Fullscreen Dialog

"use client";

import React from "react";
import { IconButton } from "@/subframe/components/IconButton";
import { Alert } from "@/subframe/components/Alert";
import { TextField } from "@/subframe/components/TextField";
import { RadioCardGroup } from "@/subframe/components/RadioCardGroup";
import { CheckboxCard } from "@/subframe/components/CheckboxCard";
import { Button } from "@/subframe/components/Button";
import { FullscreenDialog } from "@/subframe/components/FullscreenDialog";

function FullscreenDialogExample() {
  return (
    <FullscreenDialog>
      <div className="flex w-full items-center justify-between border-b border-solid border-neutral-border pt-4 pr-4 pb-4 pl-4">
        <img
          className="h-8 w-8 flex-none"
          src="https://res.cloudinary.com/subframe/image/upload/v1711417507/shared/y2rsnhq3mex4auk54aye.png"
        />
        <span className="text-body-bold font-body-bold text-default-font">
          New Account
        </span>
        <IconButton icon="FeatherX" />
      </div>
      <div className="container max-w-none flex h-full w-full grow shrink-0 basis-0 flex-col items-center gap-12 overflow-hidden pt-12 pr-8 pb-12 pl-8 overflow-auto">
        <div className="flex h-full w-full max-w-[384px] grow shrink-0 basis-0 flex-col items-center gap-6">
          <Alert
            variant="brand"
            title="New account transfers earn extra"
            description="Get a bonus when you move your funds over"
          />
          <TextField
            className="h-auto w-full flex-none"
            label="Name"
            helpText=""
          >
            <TextField.Input placeholder="Your name" />
          </TextField>
          <TextField
            className="h-auto w-full flex-none"
            label="Account Number"
            helpText=""
          >
            <TextField.Input placeholder="###-#######" />
          </TextField>
          <TextField
            className="h-auto w-full flex-none"
            label="Routing Number"
            helpText=""
          >
            <TextField.Input placeholder="###-#######" />
          </TextField>
          <div className="flex w-full flex-col items-start gap-2">
            <span className="text-body-bold font-body-bold text-default-font">
              Account Type
            </span>
            <RadioCardGroup className="h-auto w-full flex-none">
              <div className="flex w-full grow shrink-0 basis-0 flex-wrap items-start gap-2">
                <RadioCardGroup.RadioCard
                  disabled={false}
                  hideRadio={false}
                  value="32f8db22"
                >
                  <div className="flex flex-col items-start pr-2">
                    <span className="w-full text-body-bold font-body-bold text-default-font">
                      Checking
                    </span>
                  </div>
                </RadioCardGroup.RadioCard>
                <RadioCardGroup.RadioCard
                  disabled={false}
                  hideRadio={false}
                  value="597f6eef"
                >
                  <div className="flex flex-col items-start pr-2">
                    <span className="w-full text-body-bold font-body-bold text-default-font">
                      Savings
                    </span>
                  </div>
                </RadioCardGroup.RadioCard>
              </div>
            </RadioCardGroup>
          </div>
          <div className="flex w-full flex-col items-start gap-2">
            <span className="text-body-bold font-body-bold text-default-font">
              Transfer Requirements
            </span>
            <CheckboxCard className="h-auto w-full flex-none">
              <span className="text-body-bold font-body-bold text-default-font">
                I&#39;m transferring a retirement account
              </span>
            </CheckboxCard>
            <CheckboxCard className="h-auto w-full flex-none">
              <span className="text-body-bold font-body-bold text-default-font">
                I&#39;m a US citizen or pernament resident
              </span>
            </CheckboxCard>
            <CheckboxCard className="h-auto w-full flex-none">
              <span className="text-body-bold font-body-bold text-default-font">
                I&#39;ve held assets in this account for &gt; 1 year
              </span>
            </CheckboxCard>
          </div>
        </div>
      </div>
      <div className="flex w-full items-center justify-between border-t border-solid border-neutral-border pt-4 pr-4 pb-4 pl-4">
        <Button variant="neutral-secondary">Cancel</Button>
        <Button>Save</Button>
      </div>
    </FullscreenDialog>
  );
}

export default FullscreenDialogExample;