Smooth Drawer

1"use client";
2 
3/**
4 * @author: @dorianbaffier
5 * @description: Smooth Drawer
6 * @version: 1.0.0
7 * @date: 2025-06-26
8 * @license: MIT
9 * @website: https://kokonutui.com
10 * @github: https://github.com/kokonut-labs/kokonutui
11 */
12 
13import { Fingerprint } from "lucide-react";
14import { motion } from "motion/react";
15import Image from "next/image";
16import Link from "next/link";
17import type * as React from "react";
18import { Button } from "@/components/ui/button";
19import {
20  Drawer,
21  DrawerClose,
22  DrawerContent,
23  DrawerDescription,
24  DrawerFooter,
25  DrawerHeader,
26  DrawerTitle,
27  DrawerTrigger,
28} from "@/components/ui/drawer";
29 
30interface PriceTagProps {
31  price: number;
32  discountedPrice: number;
33}
34 
35function PriceTag({ price, discountedPrice }: PriceTagProps) {
36  return (
37    <div className="mx-auto flex max-w-fit items-center justify-around gap-4">
38      <div className="flex items-baseline gap-2">
39        <span className="bg-gradient-to-br from-zinc-900 to-zinc-700 bg-clip-text font-bold text-4xl text-transparent dark:from-white dark:to-zinc-300">
40          ${discountedPrice}
41        </span>
42        <span className="text-lg text-zinc-400 line-through dark:text-zinc-500">
43          ${price}
44        </span>
45      </div>
46      <div className="flex flex-col items-center gap-0.5">
47        <span className="font-medium text-sm text-zinc-900 dark:text-zinc-100">
48          Lifetime access
49        </span>
50        <span className="text-xs text-zinc-700 dark:text-zinc-300">
51          One-time payment
52        </span>
53      </div>
54    </div>
55  );
56}
57 
58interface DrawerDemoProps extends React.HTMLAttributes<HTMLDivElement> {
59  title?: string;
60  description?: string;
61  primaryButtonText?: string;
62  secondaryButtonText?: string;
63  onPrimaryAction?: () => void;
64  onSecondaryAction?: () => void;
65  price?: number;
66  discountedPrice?: number;
67}
68 
69const drawerVariants = {
70  hidden: {
71    y: "100%",
72    opacity: 0,
73    rotateX: 5,
74    transition: {
75      type: "spring",
76      stiffness: 300,
77      damping: 30,
78    },
79  },
80  visible: {
81    y: 0,
82    opacity: 1,
83    rotateX: 0,
84    transition: {
85      type: "spring",
86      stiffness: 300,
87      damping: 30,
88      mass: 0.8,
89      staggerChildren: 0.07,
90      delayChildren: 0.2,
91    },
92  },
93};
94 
95const itemVariants = {
96  hidden: {
97    y: 20,
98    opacity: 0,
99    transition: {
100      type: "spring",
101      stiffness: 300,
102      damping: 30,
103    },
104  },
105  visible: {
106    y: 0,
107    opacity: 1,
108    transition: {
109      type: "spring",
110// … truncated