diff --git a/app/components/management-card.tsx b/app/components/management-card.tsx index 8cb69b5..2890e44 100644 --- a/app/components/management-card.tsx +++ b/app/components/management-card.tsx @@ -1,123 +1,73 @@ import { cn } from "~/utils"; import { Avatar } from "./ui/avatar"; import { Button } from "./ui/button"; -import { AddIcon, EditIcon, FingerPrintIcon } from "./icons"; -import { Dialog, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "./ui/dialog"; -import { DialogContent, Portal } from "@radix-ui/react-dialog"; +import { EditIcon, FingerPrintIcon } from "./icons"; -interface ManagementCardProps { - title?: string; - value?: string; - subtitle?: string; - isInviteCard?: boolean; - isPasswordCard?: boolean; - isAvatarCard?: boolean; - isDeleteCard?: boolean - buttonText?: string; - buttonOnClick?: () => void - dialogNode?: React.ReactNode -} - -export const ManagementCard = ({ - title, - isAvatarCard, - isInviteCard, - isPasswordCard, - isDeleteCard, - subtitle, - value, - buttonText, - buttonOnClick, - dialogNode -}: ManagementCardProps) => { - const buttonVariant: string = isInviteCard ? "accent" : isDeleteCard ? "destructive" : "default"; - return ( -
- {isAvatarCard ? ( -
- - -
- ) : ( - <> -
- -

{title}

-
- {subtitle && ( - {subtitle} - )} - {value && ( - {value} - )} - {isPasswordCard && } - {!dialogNode ? ( - - ): ( - - Open - - - Are you absolutely sure? - - This action cannot be undone. This will permanently delete your account - and remove your data from our servers. - - - - - - )} - - )} -
- ); +const ManagementCardAvatar = ({ src }: { src?: string }) => { + return ( +
+
+ + +
+
+ ); }; -const PasswordDots = ({ className }: { className?: string }) => { - return ( - - - - - - - - - - - - - - - - - - - ); +const ManagementCardTitle = ({ + children, + className, +}: React.PropsWithChildren<{ className?: string }>) => { + return ( +
+ + {children} +
+ ); }; + +const ManagementCardContent = ({ + children, + className, +}: React.PropsWithChildren<{ className?: string }>) => { + return ( +
+ {children} +
+ ); +}; + +const ManagementCardFooter = ({ + children, + className, +}: React.PropsWithChildren<{ className?: string }>) => { + return
{children}
; +}; + +const ManagementCard = ({ + children, + variant, +}: React.PropsWithChildren<{ variant?: string }>) => { + return ( +
+ {children} +
+ ); +}; + +export { + ManagementCard, + ManagementCardAvatar, + ManagementCardContent, + ManagementCardFooter, + ManagementCardTitle, +}; \ No newline at end of file diff --git a/app/routes/account.tsx b/app/routes/account.tsx index edf89f8..127ed7e 100644 --- a/app/routes/account.tsx +++ b/app/routes/account.tsx @@ -4,8 +4,8 @@ import { useState } from "react"; import { z } from "zod"; import { Field } from "~/components/forms"; import { GeneralLayout } from "~/components/general-layout"; -import { AddIcon, CloudIcon } from "~/components/icons"; -import { ManagementCard } from "~/components/management-card"; +import { AddIcon, CloudIcon, CrownIcon } from "~/components/icons"; +import { ManagementCard, ManagementCardAvatar, ManagementCardContent, ManagementCardFooter, ManagementCardTitle } from "~/components/management-card"; import { Button } from "~/components/ui/button"; import { Dialog, @@ -47,58 +47,106 @@ export default function MyAccount() { />

Account Management

- - setModal({ ...openModal, changeEmail: true })} - /> - + + + + + Email Address + + bsimpson@springfield.oh.gov.com + + + + + + + Account Type + + Lite Premium Account + + + + + +

Security

- setModal({ ...openModal, changePassword: true })} - /> - setModal({ ...openModal, setupTwoFactor: true })} - /> - + + Password + + + + + + + + + Two-Factor Authentication + + Improve security by enabling 2FA. + + + + + + + Backup Key + + Never share this code with anyone. + + + + +

More

- - - + + Invite a Friend + Get 1 GB per friend invited for free (max 5 GB). + + + + + + Read our Resources + Navigate helpful articles or get assistance. + + + + + + Delete Account + Once initiated, this action cannot be undone. + + + +
{/* Dialogs must be near to body as possible to open the modal, otherwise will be restricted to parent height-width */} ); }; + +const PasswordDots = ({ className }: { className?: string }) => { + return ( + + + + + + + + + + + + + + + + + + + ); +}; \ No newline at end of file