"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 open={false} onOpenChange={(open: boolean) => {}}>
<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"
onClick={(event: React.MouseEvent<HTMLButtonElement>) => {}}
/>
</div>
<div className="container max-w-none flex 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 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"
value=""
onChange={(event: React.ChangeEvent<HTMLInputElement>) => {}}
/>
</TextField>
<TextField
className="h-auto w-full flex-none"
label="Account Number"
helpText=""
>
<TextField.Input
placeholder="###-#######"
value=""
onChange={(event: React.ChangeEvent<HTMLInputElement>) => {}}
/>
</TextField>
<TextField
className="h-auto w-full flex-none"
label="Routing Number"
helpText=""
>
<TextField.Input
placeholder="###-#######"
value=""
onChange={(event: React.ChangeEvent<HTMLInputElement>) => {}}
/>
</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"
value=""
onValueChange={(value: string) => {}}
>
<div className="flex grow shrink-0 basis-0 flex-wrap items-start gap-2">
<RadioCardGroup.RadioCard
disabled={false}
hideRadio={false}
value="fd7c4e37"
>
<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="e28eae6d"
>
<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"
checked={false}
onCheckedChange={(checked: boolean) => {}}
>
<span className="text-body-bold font-body-bold text-default-font">
I'm transferring a retirement account
</span>
</CheckboxCard>
<CheckboxCard
className="h-auto w-full flex-none"
checked={false}
onCheckedChange={(checked: boolean) => {}}
>
<span className="text-body-bold font-body-bold text-default-font">
I'm a US citizen or pernament resident
</span>
</CheckboxCard>
<CheckboxCard
className="h-auto w-full flex-none"
checked={false}
onCheckedChange={(checked: boolean) => {}}
>
<span className="text-body-bold font-body-bold text-default-font">
I've held assets in this account for > 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"
onClick={(event: React.MouseEvent<HTMLButtonElement>) => {}}
>
Cancel
</Button>
<Button onClick={(event: React.MouseEvent<HTMLButtonElement>) => {}}>
Save
</Button>
</div>
</FullscreenDialog>
);
}
export default FullscreenDialogExample;
children
React.ReactNode
open
boolean
onOpenChange
(open: boolean) => void
Use open
and onOpenChange
props to control the open state.
View code