feat: Add Radix UI components and data utility, refactor map markers, and integrate Navbar.

src/components/Drawer.tsx

@@ -1,4 +1,8 @@
-import { X, MapPin, Coffee, Phone, Globe, ExternalLink } from "lucide-react";
+import { X, MapPin, Phone, Globe, ExternalLink } from "lucide-react";
+import { Card } from "~/components/ui/card";
+import { Button } from "~/components/ui/button";
+import { ScrollArea } from "~/components/ui/scroll-area";
+import { Separator } from "~/components/ui/separator";
 
 interface CoffeeShop {
     id: number;
@@ -20,74 +24,86 @@ interface DrawerProps {
 export default function Drawer({ shop, onClose }: DrawerProps) {
     return (
         <div
-            className={`absolute top-0 right-0 h-full w-full sm:w-[400px] bg-black/90 backdrop-blur-xl border-l border-white/10 z-30 transform transition-transform duration-300 ease-in-out shadow-2xl ${shop ? "translate-x-0" : "translate-x-full"
+            className={`absolute top-20 left-0 h-[calc(100vh-6rem)] w-full sm:w-[400px] z-30 transform transition-transform duration-300 ease-in-out p-4 pointer-events-none ${shop ? "translate-x-0" : "-translate-x-full"
                 }`}
         >
             {shop && (
-                <div className="flex flex-col h-full text-white">
+                <Card className="h-full w-full bg-black/60 backdrop-blur-2xl border-white/10 shadow-2xl overflow-hidden flex flex-col gap-0 pointer-events-auto rounded-xl p-0 border-0">
                     {/* Header Image */}
-                    <div className="h-64 relative">
+                    <div className="h-56 relative flex-shrink-0">
                         <img
                             src={shop.image}
                             alt={shop.name}
                             className="w-full h-full object-cover"
                         />
+                        {/* Top Fade/Shadow */}
+                        <div className="absolute inset-0 bg-gradient-to-b from-black/60 via-transparent to-transparent" />
+                        {/* Bottom Fade */}
                         <div className="absolute inset-0 bg-gradient-to-t from-black/90 to-transparent" />
-                        <button
+
+                        <Button
+                            variant="ghost"
+                            size="icon"
                             onClick={onClose}
-                            className="absolute top-4 right-4 p-2 bg-black/50 rounded-full hover:bg-black/70 transition-colors backdrop-blur-md"
+                            className="absolute top-4 right-4 bg-black/20 hover:bg-black/40 text-white rounded-full h-8 w-8 backdrop-blur-md border border-white/10"
                         >
-                            <X className="w-6 h-6 text-white" />
-                        </button>
+                            <X className="w-4 h-4" />
+                        </Button>
                     </div>
 
                     {/* Content */}
-                    <div className="p-8 flex-1 overflow-y-auto -mt-12 relative z-10">
-                        <h2 className="text-4xl font-bold font-serif mb-4 text-[#D2691E] leading-tight">{shop.name}</h2>
+                    <ScrollArea className="flex-1 -mt-12 relative z-10 min-h-0">
+                        <div className="p-8">
+                            <h2 className="text-3xl font-bold font-serif mb-4 text-[#D2691E] leading-tight">{shop.name}</h2>
 
-                        <div className="space-y-4 mb-8">
-                            <div className="flex items-start gap-3 text-gray-300 font-sans text-sm">
-                                <MapPin className="w-5 h-5 text-[#8B4513] flex-shrink-0 mt-0.5" />
-                                <span>{shop.address}</span>
-                            </div>
-                            {shop.phone && (
-                                <div className="flex items-center gap-3 text-gray-300 font-sans text-sm">
-                                    <Phone className="w-5 h-5 text-[#8B4513] flex-shrink-0" />
-                                    <a href={`tel:${shop.phone}`} className="hover:text-white transition-colors">{shop.phone}</a>
+                            <div className="space-y-4 mb-8">
+                                <div className="flex items-start gap-3 text-gray-300 font-serif text-sm">
+                                    <MapPin className="w-5 h-5 text-[#8B4513] flex-shrink-0 mt-0.5" />
+                                    <span>{shop.address}</span>
                                 </div>
-                            )}
-                            {shop.website && (
-                                <div className="flex items-center gap-3 text-gray-300 font-sans text-sm">
-                                    <Globe className="w-5 h-5 text-[#8B4513] flex-shrink-0" />
-                                    <a href={shop.website} target="_blank" rel="noopener noreferrer" className="hover:text-white transition-colors flex items-center gap-1">
-                                        Visit Website <ExternalLink className="w-3 h-3" />
+                                {shop.phone && (
+                                    <div className="flex items-center gap-3 text-gray-300 font-serif text-sm">
+                                        <Phone className="w-5 h-5 text-[#8B4513] flex-shrink-0" />
+                                        <a href={`tel:${shop.phone}`} className="hover:text-white transition-colors">{shop.phone}</a>
+                                    </div>
+                                )}
+                                {shop.website && (
+                                    <div className="flex items-center gap-3 text-gray-300 font-serif text-sm">
+                                        <Globe className="w-5 h-5 text-[#8B4513] flex-shrink-0" />
+                                        <a href={shop.website} target="_blank" rel="noopener noreferrer" className="hover:text-white transition-colors flex items-center gap-1">
+                                            Visit Website <ExternalLink className="w-3 h-3" />
+                                        </a>
+                                    </div>
+                                )}
+                            </div>
+
+                            <Separator className="bg-white/10 mb-6" />
+
+                            <div className="space-y-6">
+                                <div>
+                                    <h3 className="text-lg font-semibold mb-2 text-gray-200 font-serif">About</h3>
+                                    <p className="text-gray-300 leading-relaxed font-serif text-lg">
+                                        {shop.description}
+                                    </p>
+                                </div>
+
+                                <Button
+                                    asChild
+                                    size="sm"
+                                    className="w-auto px-6 bg-[#8B4513]/20 hover:bg-[#8B4513]/40 text-white font-semibold rounded-lg shadow-lg transition-all hover:scale-[1.02] border border-[#8B4513]/50 backdrop-blur-md"
+                                >
+                                    <a
+                                        href={`https://www.google.com/maps/search/?api=1&query=${shop.lat},${shop.lng}`}
+                                        target="_blank"
+                                        rel="noopener noreferrer"
+                                    >
+                                        Get Directions
                                     </a>
-                                </div>
-                            )}
-                        </div>
-
-                        <div className="space-y-6">
-                            <div>
-                                <h3 className="text-lg font-semibold mb-2 text-gray-200 font-serif">About</h3>
-                                <p className="text-gray-300 leading-relaxed font-serif text-lg">
-                                    {shop.description}
-                                </p>
+                                </Button>
                             </div>
                         </div>
-                    </div>
-
-                    {/* Footer Actions */}
-                    <div className="p-6 border-t border-white/10 bg-black/40">
-                        <a
-                            href={`https://www.google.com/maps/search/?api=1&query=${shop.lat},${shop.lng}`}
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            className="flex items-center justify-center w-full py-4 bg-[#8B4513] hover:bg-[#A0522D] text-white font-bold rounded-xl transition-colors shadow-lg"
-                        >
-                            Get Directions
-                        </a>
-                    </div>
-                </div>
+                    </ScrollArea>
+                </Card>
             )}
         </div>
     );

src/components/Map.tsx

@@ -6,6 +6,7 @@ import L from 'leaflet';
 import { useEffect } from 'react';
 import { renderToStaticMarkup } from 'react-dom/server';
 import { Coffee } from 'lucide-react';
+import Navbar from "./Navbar";
 
 interface CoffeeShop {
     id: number;
@@ -26,22 +27,24 @@ interface MapProps {
 
 const Map = ({ shops, onShopSelect }: MapProps) => {
     useEffect(() => {
-        // No longer need default icon fix as we are using custom icons
+        // Fix for Leaflet default icon not found
+        // @ts-expect-error Fix for Leaflet default icon not found
+        delete L.Icon.Default.prototype._getIconUrl;
+        L.Icon.Default.mergeOptions({
+            iconRetinaUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-icon-2x.png',
+            iconUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-icon.png',
+            shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-shadow.png',
+        });
     }, []);
 
     const createCustomIcon = () => {
-        const iconMarkup = renderToStaticMarkup(
-            <div className="relative flex items-center justify-center w-8 h-8 bg-[#8B4513] rounded-full border-2 border-white shadow-lg transform -translate-x-1/2 -translate-y-1/2 cursor-pointer hover:scale-110 transition-transform">
-                <Coffee className="w-5 h-5 text-white" />
-                <div className="absolute -bottom-1 left-1/2 transform -translate-x-1/2 w-0 h-0 border-l-4 border-l-transparent border-r-4 border-r-transparent border-t-4 border-t-[#8B4513]"></div>
-            </div>
-        );
-
-        return L.divIcon({
-            html: iconMarkup,
-            className: 'custom-marker', // Add a class for potential extra styling
+        return new L.DivIcon({
+            className: 'custom-icon',
+            html: `<div class="w-8 h-8 bg-[#8B4513]/60 backdrop-blur-md rounded-full border border-white/30 shadow-lg flex items-center justify-center">
+    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-white"><path d="M17 8h1a4 4 0 1 1 0 8h-1"/><path d="M3 8h14v9a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4Z"/><line x1="6" x2="6" y1="2" y2="4"/><line x1="10" x2="10" y1="2" y2="4"/><line x1="14" x2="14" y1="2" y2="4"/></svg>
+  </div>`,
             iconSize: [32, 32],
-            iconAnchor: [16, 32], // Anchor at bottom center
+            iconAnchor: [16, 32],
             popupAnchor: [0, -32],
         });
     };
@@ -50,11 +53,14 @@ const Map = ({ shops, onShopSelect }: MapProps) => {
 
     return (
         <MapContainer
-            center={[40.9645, -76.8844]}
+            center={[40.9645, -76.8845]}
             zoom={15}
             style={{ height: '100%', width: '100%' }}
             className="z-0"
+            zoomControl={false}
+            attributionControl={false}
         >
+            <Navbar />
             <TileLayer
                 attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>'
                 url="https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png"

src/components/Navbar.tsx

@@ -1,19 +1,95 @@
-import { Coffee } from "lucide-react";
+import { Coffee, Plus, Minus, Home, Info, X } from "lucide-react";
+import { Card } from "~/components/ui/card";
+import { Button } from "~/components/ui/button";
+import { useMap } from "react-leaflet";
+import { useState } from "react";
 
 export default function Navbar() {
-    return (
-        <nav className="absolute top-0 left-0 right-0 z-20 flex items-center justify-between px-6 py-4 bg-black/40 backdrop-blur-md border-b border-white/10">
-            <div className="flex items-center gap-3">
-                <div className="flex items-center justify-center w-10 h-10 bg-[#8B4513] rounded-full shadow-lg">
-                    <Coffee className="w-6 h-6 text-white" />
-                </div>
-                <h1 className="text-2xl font-bold text-white font-serif tracking-wide">
-                    Lewisburg Coffee Map
-                </h1>
+  const map = useMap();
+  const [showAbout, setShowAbout] = useState(false);
+
+  return (
+    <>
+      <div className="absolute top-0 left-0 right-0 z-[1000] p-4 pointer-events-none">
+        <Card className="flex flex-row items-center justify-between px-5 py-3 bg-black/60 backdrop-blur-2xl border-white/10 rounded-xl shadow-2xl pointer-events-auto w-full">
+          <div className="flex items-center gap-3">
+            <Coffee className="w-6 h-6 text-[#8B4513]" />
+            <h1 className="text-xl font-bold text-white font-serif tracking-wide leading-none pt-0.5">
+              Lewisburg Coffee
+            </h1>
+          </div>
+
+          <div className="flex items-center gap-2">
+            {/* <Button
+              variant="ghost"
+              size="icon"
+              onClick={() => setShowAbout(true)}
+              className="bg-black/20 hover:bg-black/40 text-white rounded-lg h-8 w-8 backdrop-blur-md border border-white/10 mr-2"
+            >
+              <Info className="w-4 h-4" />
+            </Button> */}
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={() => map.setView([40.9645, -76.8845], 15)}
+              className="bg-black/20 hover:bg-black/40 text-white rounded-lg h-8 w-8 backdrop-blur-md border border-white/10"
+            >
+              <Home className="w-4 h-4" />
+            </Button>
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={() => map.zoomOut()}
+              className="bg-black/20 hover:bg-black/40 text-white rounded-lg h-8 w-8 backdrop-blur-md border border-white/10"
+            >
+              <Minus className="w-4 h-4" />
+            </Button>
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={() => map.zoomIn()}
+              className="bg-black/20 hover:bg-black/40 text-white rounded-lg h-8 w-8 backdrop-blur-md border border-white/10"
+            >
+              <Plus className="w-4 h-4" />
+            </Button>
+          </div>
+        </Card>
+      </div>
+
+      {/* About Dialog Overlay */}
+      {showAbout && (
+        <div className="absolute inset-0 z-[2000] flex items-center justify-center bg-black/60 backdrop-blur-sm p-4">
+          <Card className="w-full max-w-md bg-black/60 backdrop-blur-2xl border-white/10 text-white p-6 relative shadow-2xl rounded-xl">
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={() => setShowAbout(false)}
+              className="absolute top-4 right-4 text-gray-400 hover:text-white"
+            >
+              <X className="w-5 h-5" />
+            </Button>
+
+            <div className="flex flex-col items-center text-center space-y-4">
+              <div className="p-3 bg-[#8B4513]/20 rounded-full">
+                <Coffee className="w-8 h-8 text-[#8B4513]" />
+              </div>
+              <h2 className="text-2xl font-bold font-serif">Lewisburg Coffee Map</h2>
+              <p className="text-gray-300 font-serif leading-relaxed">
+                Explore the best coffee spots in Lewisburg, PA.
+                Curated for coffee enthusiasts.
+              </p>
+
+              <div className="w-full h-px bg-white/10 my-4" />
+
+              <div className="text-xs text-gray-500 space-y-2 font-sans">
+                <p>Map Data &copy; <a href="https://www.openstreetmap.org/copyright" className="underline hover:text-gray-300">OpenStreetMap</a> contributors</p>
+                <p>Tiles &copy; <a href="https://carto.com/attributions" className="underline hover:text-gray-300">CARTO</a></p>
+                <p>Built with Next.js, Tailwind, and Leaflet</p>
+              </div>
             </div>
-            <div className="flex gap-4">
-                {/* Placeholder for future links or actions */}
-            </div>
-        </nav>
-    );
+          </Card>
+        </div>
+      )}
+    </>
+  );
 }

src/components/ui/button.tsx

@@ -0,0 +1,60 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "~/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }

src/components/ui/card.tsx

@@ -0,0 +1,92 @@
+import * as React from "react"
+
+import { cn } from "~/lib/utils"
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-6", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}

src/components/ui/scroll-area.tsx

@@ -0,0 +1,58 @@
+"use client"
+
+import * as React from "react"
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+
+import { cn } from "~/lib/utils"
+
+function ScrollArea({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
+  return (
+    <ScrollAreaPrimitive.Root
+      data-slot="scroll-area"
+      className={cn("relative", className)}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Viewport
+        data-slot="scroll-area-viewport"
+        className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
+      >
+        {children}
+      </ScrollAreaPrimitive.Viewport>
+      <ScrollBar />
+      <ScrollAreaPrimitive.Corner />
+    </ScrollAreaPrimitive.Root>
+  )
+}
+
+function ScrollBar({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
+  return (
+    <ScrollAreaPrimitive.ScrollAreaScrollbar
+      data-slot="scroll-area-scrollbar"
+      orientation={orientation}
+      className={cn(
+        "flex touch-none p-px transition-colors select-none",
+        orientation === "vertical" &&
+          "h-full w-2.5 border-l border-l-transparent",
+        orientation === "horizontal" &&
+          "h-2.5 flex-col border-t border-t-transparent",
+        className
+      )}
+      {...props}
+    >
+      <ScrollAreaPrimitive.ScrollAreaThumb
+        data-slot="scroll-area-thumb"
+        className="bg-border relative flex-1 rounded-full"
+      />
+    </ScrollAreaPrimitive.ScrollAreaScrollbar>
+  )
+}
+
+export { ScrollArea, ScrollBar }

src/components/ui/separator.tsx

@@ -0,0 +1,28 @@
+"use client"
+
+import * as React from "react"
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+
+import { cn } from "~/lib/utils"
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Separator }

src/components/ui/sheet.tsx

@@ -0,0 +1,139 @@
+"use client"
+
+import * as React from "react"
+import * as SheetPrimitive from "@radix-ui/react-dialog"
+import { XIcon } from "lucide-react"
+
+import { cn } from "~/lib/utils"
+
+function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />
+}
+
+function SheetTrigger({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
+}
+
+function SheetClose({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Close>) {
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
+}
+
+function SheetPortal({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
+}
+
+function SheetOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
+  return (
+    <SheetPrimitive.Overlay
+      data-slot="sheet-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SheetContent({
+  className,
+  children,
+  side = "right",
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Content> & {
+  side?: "top" | "right" | "bottom" | "left"
+}) {
+  return (
+    <SheetPortal>
+      <SheetOverlay />
+      <SheetPrimitive.Content
+        data-slot="sheet-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+          side === "right" &&
+            "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
+          side === "left" &&
+            "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
+          side === "top" &&
+            "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
+          side === "bottom" &&
+            "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
+          <XIcon className="size-4" />
+          <span className="sr-only">Close</span>
+        </SheetPrimitive.Close>
+      </SheetPrimitive.Content>
+    </SheetPortal>
+  )
+}
+
+function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-header"
+      className={cn("flex flex-col gap-1.5 p-4", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-footer"
+      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Title>) {
+  return (
+    <SheetPrimitive.Title
+      data-slot="sheet-title"
+      className={cn("text-foreground font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Description>) {
+  return (
+    <SheetPrimitive.Description
+      data-slot="sheet-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Sheet,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+}