Basic Examples

"use client"; 
import {
    DrawerTrigger,
    DrawerDescription,
    DrawerContent,
    DrawerRoot,
    DrawerTitle,
} from "folium/wrapper";

export function SimpleSheet() {
    return (
            <DrawerRoot>
                <DrawerTrigger>
                    <button className="button">
                        Open Drawer
                    </button>
                </DrawerTrigger>
                <DrawerContent 
                backdropProps={{
                    className: "bg-black/40 z-50", 
                    
                }}
                className="bg-content1 h-fit z-50  bottom-0 right-0 left-0
                    mx-auto flex justify-center p-4 fixed rounded-t-3xl outline-none">
                    <div className="max-w-xl p-4 flex flex-col gap-2">
                        <DrawerTitle className="font-extrabold text-4xl">Simple Sheet</DrawerTitle>
                        <DrawerDescription className="font-semibold text-neutral-400">
                            This is a simple sheet example.
                        </DrawerDescription>
                    </div>
                </DrawerContent>
            </DrawerRoot>
    );
}

"use client"; 
import Image from "next/image";
import { Drawer } from "folium";

export function PartialSheet() {
return (
    <Drawer.Root>
        <Drawer.Trigger asChild>
            <button
                className="button"
            >
                Open Drawer
            </button>
        </Drawer.Trigger>
        <Drawer.Portal>
            <Drawer.Overlay className="bg-black/40 flex items-center justify-center inset-0 fixed" />
            <Drawer.Content
                className="bg-content1 h-fit min-h-125 bottom-0 right-0 left-0 max-w-3xl
                    mx-auto flex justify-center p-4 fixed rounded-t-3xl outline-none"
            >
                <div className="flex flex-col gap-2 max-w-md items-center">
                    <div className="bg-content3 rounded-full w-25 h-2 mb-4 mx-auto" />
                    <Image
                        src="/placeholders/food.jpg"
                        alt="Food"
                        width={300}
                        height={300}
                        draggable={false}
                        className="rounded-2xl"
                    />
                    <Drawer.Title asChild>
                        <span className="font-extrabold text-3xl">
                            Your food is on the way
                        </span>
                    </Drawer.Title>

                    <Drawer.Description asChild>
                        <p className="font-semibold text-neutral-400 text-center">
                            Your order has been placed successfully. You can track the
                            delivery in real-time from the orders section.
                        </p>
                    </Drawer.Description>
                    <Drawer.Close asChild>
                        <button
                            className="mt-6 bg-content2 text-background w-full active:scale-95
                                transition-transform font-semibold rounded-xl px-4 py-2
                                hover:opacity-90"
                        >
                            <span className="text-foreground">Got it!</span>
                        </button>
                    </Drawer.Close>
                </div>
            </Drawer.Content>
        <Drawer.Portal>
    </Drawer.Root>
);

}

"use client";
import Image from "next/image";
import {
    DrawerRoot,
    DrawerTitle,
    DrawerContent,
    DrawerTrigger,
    DrawerClose,
    DrawerDescription,
} from "folium/wrapper";

export function SimpleDrawer() {
    return (
        <DrawerRoot>
            <DrawerTrigger>
                <button
                    className="button"
                >
                    Open Drawer
                </button>
            </DrawerTrigger>
            <DrawerContent
                className="bg-content1 h-fit min-h-125 bottom-0 right-0 left-0 max-w-3xl
                    mx-auto flex justify-center p-4 fixed rounded-t-3xl outline-none"
            >
                <div className="flex flex-col gap-2 max-w-md items-center">
                    <div className="bg-content3 rounded-full w-25 h-2 mb-4 mx-auto" />
                    <Image
                        src="/placeholders/food.jpg"
                        alt="Food"
                        width={300}
                        height={300}
                        draggable={false}
                        className="rounded-2xl"
                    />
                    <DrawerTitle>
                        <span className="font-extrabold text-3xl">
                            Your food is on the way
                        </span>
                    </DrawerTitle>

                    <DrawerDescription asChild>
                        <p className="font-semibold text-neutral-400 text-center">
                            Your order has been placed successfully. You can track the
                            delivery in real-time from the orders section.
                        </p>
                    </DrawerDescription>
                    <DrawerClose asChild>
                        <button
                            className="mt-6 bg-content2 text-background w-full active:scale-95
                                transition-transform font-semibold rounded-xl px-4 py-2
                                hover:opacity-90"
                        >
                            <span className="text-foreground">Got it!</span>
                        </button>
                    </DrawerClose>
                </div>
            </DrawerContent>
        </DrawerRoot>
    );
}