Drawer

"use client";

import React from "react";
import { Drawer } from "@/ui/components/Drawer";

function DrawerExample() {
  return (
    <Drawer open={false} onOpenChange={(open: boolean) => {}}>
      <Drawer.Content>
        <div className="flex w-full grow shrink-0 basis-0 flex-col items-start gap-8 px-8 py-8">
          <span className="text-heading-3 font-heading-3 text-default-font">
            Drawer Header
          </span>
          <div className="flex flex-col items-start gap-4">
            <span className="text-body-bold font-body-bold text-default-font">
              Drawer Section
            </span>
            <div className="flex flex-col items-start gap-2">
              <div className="flex flex-col items-start gap-0.5">
                <span className="text-caption font-caption text-neutral-500">
                  Label
                </span>
                <span className="text-body font-body text-default-font">
                  Value
                </span>
              </div>
              <div className="flex flex-col items-start gap-0.5">
                <span className="text-caption font-caption text-neutral-500">
                  Label
                </span>
                <span className="text-body font-body text-default-font">
                  Value
                </span>
              </div>
              <div className="flex flex-col items-start gap-0.5">
                <span className="text-caption font-caption text-neutral-500">
                  Label
                </span>
                <span className="text-body font-body text-default-font">
                  Value
                </span>
              </div>
            </div>
          </div>
          <div className="flex flex-col items-start gap-4">
            <span className="text-body-bold font-body-bold text-default-font">
              Drawer Section
            </span>
            <div className="flex flex-col items-start gap-2">
              <div className="flex flex-col items-start gap-0.5">
                <span className="text-caption font-caption text-neutral-500">
                  Label
                </span>
                <span className="text-body font-body text-default-font">
                  Value
                </span>
              </div>
              <div className="flex flex-col items-start gap-0.5">
                <span className="text-caption font-caption text-neutral-500">
                  Label
                </span>
                <span className="text-body font-body text-default-font">
                  Value
                </span>
              </div>
              <div className="flex flex-col items-start gap-0.5">
                <span className="text-caption font-caption text-neutral-500">
                  Label
                </span>
                <span className="text-body font-body text-default-font">
                  Value
                </span>
              </div>
            </div>
          </div>
        </div>
        <div className="flex w-full items-center justify-end gap-2 px-8 pt-2 pb-8">
          <span className="text-body font-body text-default-font">
            Drawer CTA
          </span>
        </div>
      </Drawer.Content>
    </Drawer>
  );
}

export default DrawerExample;