Bento Card

1"use client";
2 
3import React, { useState, useMemo } from "react";
4import { motion, AnimatePresence, LayoutGroup } from "motion/react";
5import { HugeiconsIcon } from "@hugeicons/react";
6import {
7  DashboardSquare01Icon,
8  UserGroupIcon,
9  Message01Icon,
10  Folder02Icon,
11  Add01Icon,
12  CircleArrowUpRight02Icon,
13  Search01Icon,
14  BarChartIcon,
15  Tick01Icon,
16  Settings02Icon,
17  InformationCircleIcon,
18  DatabaseIcon,
19  Mail01Icon,
20  LeftToRightListDashIcon,
21  UserIcon,
22} from "@hugeicons/core-free-icons";
23import { cn } from "@/lib/utils";
24 
25interface TabConfig {
26  id: string;
27  label: string;
28  icon: any;
29  badge?: string;
30  header: string;
31  description: string;
32}
33 
34const TABS: TabConfig[] = [
35  {
36    id: "dashboard",
37    label: "Dashboard",
38    icon: DashboardSquare01Icon,
39    header: "Project Overview",
40    description: "Daily summary of your team performance.",
41  },
42  {
43    id: "management",
44    label: "Management",
45    icon: UserGroupIcon,
46    header: "Team Management",
47    description: "Manage roles and user permissions.",
48    badge: "10",
49  },
50  {
51    id: "threads",
52    label: "Threads",
53    icon: Message01Icon,
54    header: "Communications",
55    description: "High-priority team discussions.",
56    badge: "12",
57  },
58  {
59    id: "resources",
60    label: "Resources",
61    icon: Folder02Icon,
62    header: "System Assets",
63    description: "Shared documentation and media logs.",
64  },
65];
66 
67const BentoCard = () => {
68  const [activeTab, setActiveTab] = useState(TABS[0]);
69 
70  const content = useMemo(() => {
71    switch (activeTab.id) {
72      case "dashboard":
73        return <OverviewDashboard />;
74      case "management":
75        return <ManagementDashboard />;
76      case "threads":
77        return <ThreadsDashboard />;
78      case "resources":
79        return <ResourcesDashboard />;
80      default:
81        return null;
82    }
83  }, [activeTab.id]);
84 
85  return (
86    <div className="flex items-center justify-center w-full antialiased">
87      <div className="group relative w-full max-w-xl overflow-hidden rounded-3xl sm:rounded-4xl border bg-card shadow-2xl shadow-primary/5 transition-all duration-500 hover:shadow-primary/10 hover:-translate-y-1 m-0">
88        <div className="p-4 sm:p-6 space-y-1.5 z-10 relative">
89          <h2 className="text-xs text-muted-foreground uppercase ">
90            Project Dashboard
91          </h2>
92          <p className="text-lg sm:text-2xl text-foreground font-medium leading-snug max-w-[480px]">
93// … truncated