TabPreview.tsx25 lines · main

1	import { motion } from 'framer-motion'
2
3	import { EntityTypeIcon } from '@/components/ui/EntityTypeIcon'
4	import { useTabsStateSnapshot } from '@/state/tabs'
5
6	export const TabPreview = ({ tab }: { tab: string }) => {
7	const tabs = useTabsStateSnapshot()
8
9	const tabData = tabs.tabsMap[tab]
10
11	if (!tabData) return null
12
13	return (
14	<motion.div
15	layoutId={tab}
16	transition={{ duration: 0.045 }}
17	animate={{ opacity: 0.7 }}
18	className="flex relative items-center gap-2 px-3 text-xs bg-dash-sidebar dark:bg-surface-100 shadow-lg rounded-xs h-10"
19	>
20	<EntityTypeIcon type={tabData.type} />
21	<span>{tabData.label || 'Untitled'}</span>
22	<div className="absolute w-full top-0 left-0 right-0 h-px bg-foreground-muted" />
23	</motion.div>
24	)
25	}