Jack/add sheet

app/test/page.tsx

@@ -1,89 +1,35 @@
 import {
-    HoverCard,
-    HoverCardTrigger,
-    HoverCardContent,
-} from "@/components/ui/hover-card";
-import { CalendarDays } from "lucide-react";
-import { DataTable, Payment } from "@/components/ui/data-table";
+    Sheet,
+    SheetContent,
+    SheetDescription,
+    SheetHeader,
+    SheetTitle,
+    SheetTrigger,
+} from "@/components/ui/sheet";
 
-const dataTable_data: Payment[] = [
-    {
-        id: "m5gr84i9",
-        amount: 316,
-        status: "success",
-        email: "ken99@example.com",
-    },
-    {
-        id: "3u1reuv4",
-        amount: 242,
-        status: "success",
-        email: "Abe45@example.com",
-    },
-    {
-        id: "derv1ws0",
-        amount: 837,
-        status: "processing",
-        email: "Monserrat44@example.com",
-    },
-    {
-        id: "5kma53ae",
-        amount: 874,
-        status: "success",
-        email: "Silas22@example.com",
-    },
-    {
-        id: "bhqecj4p",
-        amount: 721,
-        status: "failed",
-        email: "carmella@example.com",
-    },
-];
+import { Button } from "@/components/ui/button";
 
 export default function TestPage() {
     return (
-        <div>
-            <div className="p-8">
-                <DataTable data={dataTable_data} />
-            </div>
-            <HoverCard>
-                <HoverCardTrigger>@codelabdavis</HoverCardTrigger>
-                <HoverCardContent>
-                    <div className="flex gap-6">
-                        <div className="bg-black w-[30px] h-[27.38px] rounded-full py-[6.83px] px-[8.7px] text-center relative">
-                            <span className="absolute text-[#F26F71] font-black left-2 bottom-0.25">
-                                .
-                            </span>
-                            <span className="absolute text-[#FFF] font-black bottom-1.5 text-xs">
-                                /
-                            </span>
-                        </div>
-                        <div className="flex flex-col gap-6">
-                            <div className="flex flex-col gap-2">
-                                <p className="text-xs/4.5 font-bold">
-                                    @codelabdavis
-                                </p>
+        <main className="flex flex-col items-center gap-4 p-8">
+            <h1 className="text-4xl sm:text-5xl font-bold text-center">
+                Sheet Component
+            </h1>
 
-                                <p className="text-xs/4.5 font-medium">
-                                    Software and Design Agency at UC
-                                    Davis
-                                </p>
-                            </div>
-
-                            <div className="flex gap-2.5">
-                                <CalendarDays
-                                    width={15}
-                                    height={15}
-                                    stroke="#71717A"
-                                ></CalendarDays>
-
-                                <span className="text-xs/4.5 text-[#71717A] font-medium">
-                                    Joined December 2021
-                                </span>
-                            </div>
-                        </div>
-                    </div>
-                </HoverCardContent>
-            </HoverCard>
-        </div>
+            <Sheet>
+                <SheetTrigger asChild>
+                    <Button>Open</Button>
+                </SheetTrigger>
+                <SheetContent>
+                    <SheetHeader>
+                        <SheetTitle>Edit Profile</SheetTitle>
+                        <SheetDescription>
+                            Make changes to your profile here. Click
+                            save when you&apos;re done.
+                        </SheetDescription>
+                    </SheetHeader>
+                </SheetContent>
+            </Sheet>
+        </main>
     );
 }

components/ui/sheet.tsx

@@ -0,0 +1,203 @@
+"use client";
+
+import * as React from "react";
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+import { XIcon } from "lucide-react";
+import { Button } from "@/components/ui/button";
+
+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-5 right-5 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-4 p-5", 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 (
+        <div className="flex flex-col gap-[27px]">
+            <SheetPrimitive.Description
+                data-slot="sheet-description"
+                className={cn(
+                    "text-muted-foreground text-xs",
+                    className
+                )}
+                {...props}
+            />
+
+            <div className="flex flex-col gap-3">
+                <div className="flex gap-4 items-center ml-[34px]">
+                    <span className="font-poppins font-[600]">
+                        Name
+                    </span>
+
+                    <input
+                        type="text"
+                        id="name"
+                        name="name"
+                        placeholder="Enter name here"
+                        required
+                        className="w-[250px] p-[10px] font-[500] text-[#18181B] text-xs border rounded-[6px] border-[#E4E4E7] shadow-xs"
+                    />
+                </div>
+
+                <div className="flex gap-4 items-center">
+                    <span className="font-poppins font-[600]">
+                        Username
+                    </span>
+
+                    <input
+                        type="text"
+                        id="username"
+                        name="username"
+                        placeholder="Enter username here"
+                        required
+                        className="w-[250px] p-[10px] font-[500] text-[#18181B] text-xs border rounded-[6px] border-[#E4E4E7] shadow-xs"
+                    />
+                </div>
+            </div>
+
+            <div className="flex justify-end ">
+                <Button className="w-fit h-fit px-4 py-3 bg-[linear-gradient(90deg,_#FF9B3E_0%,_#FF343B_98.5%)] text-white">
+                    Save changes
+                </Button>
+            </div>
+        </div>
+    );
+}
+
+export {
+    Sheet,
+    SheetTrigger,
+    SheetClose,
+    SheetContent,
+    SheetHeader,
+    SheetFooter,
+    SheetTitle,
+    SheetDescription,
+};

package.json

@@ -13,6 +13,7 @@
     },
     "dependencies": {
         "@radix-ui/react-checkbox": "^1.1.4",
+        "@radix-ui/react-dialog": "^1.1.14",
         "@radix-ui/react-dropdown-menu": "^2.1.6",
         "@radix-ui/react-hover-card": "^1.1.6",
         "@radix-ui/react-progress": "^1.1.2",