yoginth.com
Hey is a decentralized and permissionless social media app built with Lens Protocol 馃尶
1import { MotionConfig, motion } from "motion/react";
2import { memo, type ReactNode } from "react";
3import cn from "@/helpers/cn";
4
5interface TabsProps {
6 tabs: { name: string; type: string; suffix?: ReactNode }[];
7 active: string;
8 setActive: (type: string) => void;
9 layoutId: string;
10 className?: string;
11}
12
13const Tabs = ({ tabs, active, setActive, layoutId, className }: TabsProps) => {
14 return (
15 <MotionConfig transition={{ bounce: 0, duration: 0.4, type: "spring" }}>
16 <motion.ul
17 className={cn("mb-0 flex list-none flex-wrap gap-3", className)}
18 layout
19 >
20 {tabs.map((tab) => (
21 <motion.li
22 className="relative cursor-pointer px-3 py-1.5 text-sm outline-hidden transition-colors"
23 key={tab.type}
24 layout
25 onClick={() => setActive(tab.type)}
26 tabIndex={0}
27 >
28 {active === tab.type ? (
29 <motion.div
30 className="absolute inset-0 rounded-lg bg-gray-300 dark:bg-gray-300/20"
31 layoutId={layoutId}
32 />
33 ) : null}
34 <span className="relative flex items-center gap-2 text-inherit">
35 {tab.name}
36 {tab.suffix}
37 </span>
38 </motion.li>
39 ))}
40 </motion.ul>
41 </MotionConfig>
42 );
43};
44
45export default memo(Tabs);