"use client"; import { Content as TabsContent, List as TabsList, Root as TabsRoot, Trigger as TabsTrigger, } from "@radix-ui/react-tabs"; import { AnimatePresence, motion, useReducedMotion } from "motion/react"; import { useLayoutEffect, useRef, useState } from "react"; /** * Tab definition for Phototab */ export interface PhototabTab { /** Tab label */ name: string; /** Tab icon (ReactNode) */ icon: React.ReactNode; /** Tab image (string: URL or import) */ image: string; } export interface PhototabProps { /** Array of tabs to display */ tabs: PhototabTab[]; /** Default selected tab name */ defaultTab?: string; /** Height of the component in pixels */ height?: number; /** Class name for root */ className?: string; /** Class name for tab list */ tabListClassName?: string; /** Class name for tab trigger */ tabTriggerClassName?: string; /** Class name for image */ imageClassName?: string; } export default function Phototab({ tabs, defaultTab, height = 400, className = "", tabListClassName = "", tabTriggerClassName = "", imageClassName = "", }: PhototabProps) { const [hoveredIndex, setHoveredIndex] = useState(null); const [bgStyle, setBgStyle] = useState<{ left: number; top: number; width: number; height: number; } | null>(null); const triggersRef = useRef<(HTMLButtonElement | null)[]>([]); const listRef = useRef(null); const shouldReduceMotion = useReducedMotion(); useLayoutEffect(() => { if ( hoveredIndex !== null && triggersRef.current[hoveredIndex] && listRef.current ) { const trigger = triggersRef.current[hoveredIndex]; if (!trigger) { return; } const listRect = listRef.current.getBoundingClientRect(); const triggerRect = trigger.getBoundingClientRect(); setBgStyle({ left: triggerRect.left - listRect.left, top: triggerRect.top - listRect.top, width: triggerRect.width, height: triggerRect.height, }); } else { setBgStyle(null); } }, [hoveredIndex]); return ( {bgStyle && ( )} {tabs.map((tab, index) => ( { setHoveredIndex(index); }} onMouseLeave={() => { setHoveredIndex(null); }} ref={(el) => { triggersRef.current[index] = el; }} value={tab.name} > {tab.icon} {tab.name} ))} {tabs.map((tab) => (

))} ); }

Phototab

Installation

Features

Props

On this page