Drawer

"use client";

import React from "react";
import { TextField } from "@/ui/components/TextField";
import { Button } from "@/ui/components/Button";
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">
            Payment to Uber
          </span>
          <div className="flex flex-col items-start gap-4">
            <span className="text-body-bold font-body-bold text-default-font">
              Details
            </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">
                  Name
                </span>
                <span className="text-body font-body text-default-font">
                  John Thomas
                </span>
              </div>
              <div className="flex flex-col items-start gap-0.5">
                <span className="text-caption font-caption text-neutral-500">
                  Merchant address
                </span>
                <span className="text-body font-body text-default-font">
                  San Francisco
                </span>
              </div>
              <div className="flex flex-col items-start gap-0.5">
                <span className="text-caption font-caption text-neutral-500">
                  Category
                </span>
                <span className="text-body font-body text-default-font">
                  Rideshare / Taxi
                </span>
              </div>
            </div>
          </div>
          <div className="flex flex-col items-start gap-4">
            <span className="text-body-bold font-body-bold text-default-font">
              Payment
            </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">
                  Amount
                </span>
                <span className="text-body font-body text-default-font">
                  $13.42
                </span>
              </div>
              <div className="flex flex-col items-start gap-0.5">
                <span className="text-caption font-caption text-neutral-500">
                  Card number
                </span>
                <span className="text-body font-body text-default-font">
                  1412
                </span>
              </div>
              <div className="flex flex-col items-start gap-0.5">
                <span className="text-caption font-caption text-neutral-500">
                  Purchased at
                </span>
                <span className="text-body font-body text-default-font">
                  January 3, 2023
                </span>
              </div>
              <div className="flex flex-col items-start gap-0.5">
                <span className="text-caption font-caption text-neutral-500">
                  Payment posted at
                </span>
                <span className="text-body font-body text-default-font">
                  Jan 4, 2023, 8:33 AM
                </span>
              </div>
            </div>
          </div>
          <div className="flex w-full flex-col items-start gap-4">
            <span className="text-body-bold font-body-bold text-default-font">
              Memo
            </span>
            <TextField
              className="h-auto w-full flex-none"
              label="Additional details"
              helpText=""
            />
          </div>
        </div>
        <div className="flex w-full grow shrink-0 basis-0 flex-col items-end justify-end gap-2 px-8 pt-2 pb-8">
          <Button
            icon="FeatherCheck"
            onClick={(event: React.MouseEvent<HTMLButtonElement>) => {}}
          >
            Save
          </Button>
        </div>
      </Drawer.Content>
    </Drawer>
  );
}

export default DrawerExample;