Application Shell 10

"use client";

import { useState } from "react";
import { AnimatePresence, motion } from "motion/react";
import clsx from "clsx";
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Input } from "@/components/ui/input";
import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarProvider,
  SidebarTrigger,
} from "@/components/ui/sidebar";
import {
  RelumeIcon,
  Archive,
  BarChart,
  Settings,
  Description,
  Help,
  Home,
  Layers,
  PieChart,
  Search,
  Star,
  TrendingUp,
  ChevronRight,
  KeyboardArrowDown,
  Close,
  Notifications,
} from "relume-icons";

const menuItems = [
  {
    title: "Home",
    url: "#",
    icon: Home,
  },
  {
    title: "Saved",
    url: "#",
    icon: Star,
  },
  {
    title: "Dashboard",
    url: "#",
    icon: PieChart,
    subItems: [
      { title: "Trends", icon: TrendingUp, url: "#" },
      { title: "Analytics", icon: BarChart, url: "#" },
      { title: "Historical", icon: Archive, url: "#" },
    ],
  },
  {
    title: "Projects",
    url: "#",
    icon: Layers,
  },
  {
    title: "Documents",
    url: "#",
    icon: Description,
  },
];

const footerItems = [
  {
    title: "Support",
    url: "#",
    icon: Help,
  },
  {
    title: "Settings",
    url: "#",
    icon: Settings,
  },
];

export const ApplicationShell10 = () => {
  return (
    <section>
      <AppSidebar>
        <Topbar />
        <div className="bg-scheme-foreground">
          <div className="text-neutral-darkest/50 border-b-2 border-dashed border-[#d3d3d3] py-6 text-center">
            <span>Click and paste Page Header</span>
          </div>
          <div className="container grid grid-cols-1 gap-12 px-6 py-8 md:grid-cols-[1fr_0.5fr] md:py-10 lg:px-8 lg:py-12">
            <span className="text-neutral-darkest/50 flex h-screen items-center justify-center border-2 border-dashed border-[#d3d3d3] text-center">
              Click and paste Main Content
            </span>
            <span className="text-neutral-darkest/50 flex h-screen items-center justify-center border-2 border-dashed border-[#d3d3d3] text-center">
              Click and paste Secondary Content
            </span>
          </div>
        </div>
      </AppSidebar>
    </section>
  );
};

const Topbar = () => {
  const [isSearchIconClicked, setIsSearchIconClicked] = useState<boolean>(false);
  const [isDropdownOpen, setIsDropdownOpen] = useState<boolean>(false);

  return (
    <>
      <div className="border-scheme-border md:min-h-18 sticky top-0 z-30 hidden h-auto min-h-16 w-full items-center border-b bg-white px-6 lg:flex lg:px-8">
        <div className="mx-auto grid size-full grid-cols-1 items-center justify-end justify-items-end gap-4 lg:grid-cols-[1fr_max-content] lg:justify-between lg:justify-items-stretch">
          <div className="hidden w-full max-w-md lg:block">
            <Input
              className="w-full"
              placeholder="Search"
              icon={<Search className="text-scheme-text size-6" />}
            />
          </div>
          <TopbarActions
            isSearchIconClicked={isSearchIconClicked}
            setIsSearchIconClicked={setIsSearchIconClicked}
            isDropdownOpen={isDropdownOpen}
            setIsDropdownOpen={setIsDropdownOpen}
          />
        </div>
      </div>

      <div className="border-scheme-border fixed left-0 right-0 top-0 z-30 flex min-h-16 w-full items-center justify-between border-b bg-white px-6 lg:hidden">
        <div className="flex items-center gap-4">
          <SidebarTrigger />
          <a href="#" className="flex items-center">
            <img src="https://d22po4pjz3o32e.cloudfront.net/logo-image.svg" alt="Relume logo" />
          </a>
        </div>
        <TopbarActions
          isSearchIconClicked={isSearchIconClicked}
          setIsSearchIconClicked={setIsSearchIconClicked}
          isDropdownOpen={isDropdownOpen}
          setIsDropdownOpen={setIsDropdownOpen}
        />
      </div>

      <AnimatePresence>
        {isSearchIconClicked && (
          <motion.div
            variants={{
              visible: { opacity: 1 },
              hidden: { opacity: 0 },
            }}
            initial="hidden"
            exit="hidden"
            animate={isSearchIconClicked ? "visible" : "hidden"}
            className="border-scheme-border fixed left-0 right-0 top-16 z-20 flex min-h-16 w-full items-center justify-center border-b bg-white px-6 lg:hidden"
          >
            <Input
              className="h-fit w-full"
              placeholder="Search"
              icon={<Search className="text-scheme-text size-6" />}
            />
            <button onClick={() => setIsSearchIconClicked(false)}>
              <Close className="ml-4 size-6" />
            </button>
          </motion.div>
        )}
      </AnimatePresence>
    </>
  );
};

const TopbarActions = ({
  isSearchIconClicked,
  setIsSearchIconClicked,
  isDropdownOpen,
  setIsDropdownOpen,
}: {
  isSearchIconClicked: boolean;
  setIsSearchIconClicked: (value: boolean) => void;
  isDropdownOpen: boolean;
  setIsDropdownOpen: (value: boolean) => void;
}) => {
  return (
    <div className="flex items-center gap-2 md:gap-4">
      <button
        onClick={() => setIsSearchIconClicked(!isSearchIconClicked)}
        className="p-2 lg:hidden"
      >
        <Search className="text-scheme-text size-6" />
      </button>
      <DropdownMenu>
        <DropdownMenuTrigger className="relative">
          <div className="bg-neutral-darkest absolute bottom-auto left-auto right-2 top-2 size-2 rounded-full outline-[3px] outline-offset-0 outline-white" />
          <Notifications className="text-scheme-text size-6" />
        </DropdownMenuTrigger>
        <DropdownMenuContent className="max-w-[19rem] px-0" align="end" sideOffset={0}>
          <div className="flex flex-col">
            <div className="flex items-center justify-between px-4 py-2">
              <DropdownMenuLabel className="p-0">Notifications</DropdownMenuLabel>
              <a href="#">Mark as read</a>
            </div>
            <DropdownMenuSeparator />
            <div className="h-full max-h-[14rem] overflow-auto px-2 py-1">
              <DropdownMenuItem className="mt-2 grid grid-cols-[max-content_1fr] gap-2 px-2 py-1">
                <div className="flex size-full flex-col items-start justify-start">
                  <RelumeIcon className="text-scheme-text size-6" />
                </div>
                <div>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                  <p className="text-small mt-2">11 Jan 2022</p>
                </div>
              </DropdownMenuItem>
              <DropdownMenuItem className="mt-2 grid grid-cols-[max-content_1fr] gap-2 px-2 py-1">
                <div className="flex size-full flex-col items-start justify-start">
                  <RelumeIcon className="text-scheme-text size-6" />
                </div>
                <div>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                  <p className="text-small mt-2">11 Jan 2022</p>
                </div>
              </DropdownMenuItem>
            </div>
          </div>
          <DropdownMenuSeparator />
          <div className="flex w-full items-end justify-end px-4 py-2">
            <Button
              variant="link"
              size="link"
              iconRight={<ChevronRight className="text-scheme-text" />}
              asChild
            >
              <a href="#">View All</a>
            </Button>
          </div>
        </DropdownMenuContent>
      </DropdownMenu>
      <DropdownMenu onOpenChange={(isOpen) => setIsDropdownOpen(isOpen)}>
        <DropdownMenuTrigger className="flex items-center p-0">
          <img
            src="https://d22po4pjz3o32e.cloudfront.net/avatar-image.svg"
            alt="Avatar"
            className="size-10 rounded-full object-cover"
          />
          <div className="ml-3 hidden md:flex md:items-center md:gap-2">
            <p>Name Surname</p>
            <KeyboardArrowDown
              className={clsx("text-scheme-text shrink-0 transition-transform duration-300", {
                "rotate-180": isDropdownOpen,
                "rotate-0": !isDropdownOpen,
              })}
            />
          </div>
        </DropdownMenuTrigger>
        <DropdownMenuContent
          align="end"
          sideOffset={0}
          className="mt-1.5 min-w-32 px-0 py-2 md:min-w-48"
        >
          <DropdownMenuGroup>
            <DropdownMenuItem>
              <a href="#">My Profile</a>
            </DropdownMenuItem>
            <DropdownMenuItem>
              <a href="#">Profile Settings</a>
            </DropdownMenuItem>
            <DropdownMenuSeparator className="mx-4" />
            <DropdownMenuItem>
              <a href="#">Log Out</a>
            </DropdownMenuItem>
          </DropdownMenuGroup>
        </DropdownMenuContent>
      </DropdownMenu>
    </div>
  );
};

const AppSidebar = ({ children }: { children: React.ReactNode }) => {
  return (
    <SidebarProvider>
      <Sidebar className="py-6" closeButtonClassName="fixed top-4 right-4 text-white">
        <SidebarHeader className="hidden lg:block">
          <a href="#">
            <img src="https://d22po4pjz3o32e.cloudfront.net/logo-image.svg" alt="Relume logo" />
          </a>
        </SidebarHeader>
        <SidebarContent className="mt-6">
          <SidebarMenu>
            {menuItems.map((item, index) => (
              <SidebarMenuItem key={index}>
                {item.title === "Dashboard" ? (
                  <Accordion type="single" collapsible className="w-full">
                    <AccordionItem value="dashboard" className="border-none">
                      <AccordionTrigger className="text-regular p-2 font-normal [&>svg]:size-4">
                        <span className="flex items-center gap-3">
                          <item.icon className="text-scheme-text size-6 shrink-0" />
                          <p>{item.title}</p>
                        </span>
                      </AccordionTrigger>
                      {item.subItems?.map((subItem, subIndex) => (
                        <AccordionContent
                          key={subIndex}
                          className="text-regular flex items-center p-0 pl-9 text-center"
                        >
                          <SidebarMenuItem className="w-full">
                            <SidebarMenuButton asChild>
                              <a href={subItem.url} className="flex w-full items-center">
                                <subItem.icon className="size-6 shrink-0" />
                                <span>{subItem.title}</span>
                              </a>
                            </SidebarMenuButton>
                          </SidebarMenuItem>
                        </AccordionContent>
                      ))}
                    </AccordionItem>
                  </Accordion>
                ) : (
                  <SidebarMenuButton asChild>
                    <a href={item.url} className="flex w-full items-center">
                      <item.icon className="text-scheme-text" />
                      <span>{item.title}</span>
                      {index === 1 && (
                        <Badge variant="outline" className="ml-auto !rounded-[5rem] py-0">
                          24
                        </Badge>
                      )}
                    </a>
                  </SidebarMenuButton>
                )}
              </SidebarMenuItem>
            ))}
          </SidebarMenu>
        </SidebarContent>
        <SidebarFooter className="pb-6 lg:pb-0">
          <div>
            {footerItems.map((item, index) => (
              <SidebarMenuItem key={index}>
                <SidebarMenuButton asChild>
                  <a href={item.url} className="flex w-full items-center">
                    <item.icon className="text-scheme-text" />
                    <span>{item.title}</span>
                  </a>
                </SidebarMenuButton>
              </SidebarMenuItem>
            ))}
          </div>
        </SidebarFooter>
      </Sidebar>
      <main className="min-h-screen w-full pt-16 lg:pt-0">{children}</main>
    </SidebarProvider>
  );
};