create modal using shadcn dialog

Doyin Atobaru answered on January 9, 2025 Popularity 1/10 Helpfulness 1/10

answer create modal using shadcn dialog

related ReferenceError: Property 'Buffer' doesn't exist

create modal using shadcn dialog

Comment

export type TabValue = 'account' | 'security' | 'history' | 'connections'

export const isValidTabValue = (value: string): value is TabValue => {
    return [
        SETTINGS_TAB_VALUE.ACCOUNT,
        SETTINGS_TAB_VALUE.SECURITY,
        SETTINGS_TAB_VALUE.HISTORY,
        SETTINGS_TAB_VALUE.CONNECTIONS
    ].includes(value as TabValue)
}

export const SETTINGS_TAB_VALUE = {
    ACCOUNT: 'account',
    SECURITY: 'security',
    HISTORY: 'history',
    CONNECTIONS: 'connections'
} as const


const SettingsModal = ({
    children,
    className,
}: {
    children: React.ReactNode
    className?: string
}) => {
    const router = useRouter()
    const pathname = usePathname()
    const searchParams = useSearchParams()

    const tab = searchParams.get('tab') as TabValue

    const handleTabChange = (value: string): void => {
        if (isValidTabValue(value)) {
            router.push(`?tab=${value}`, { scroll: false })
        } else {
            console.error(`Invalid tab value: ${value}`)
        }
    }

    const handleOpen = () => {
        router.push(`${pathname}?tab=${SETTINGS_TAB_VALUE.ACCOUNT}`, { scroll: false })
    }

    const handleClose = () => {
        router.push(pathname, { scroll: false })
    }

    // TODO: Swap out Icons for equivalent library choice

    return (
        <Dialog open={!!tab} onOpenChange={open => !open && handleClose()}>
            <DialogTrigger onClick={handleOpen} className={className}>
                {children}
            </DialogTrigger>
            <DialogContent className="rounded-2xl p-0 max-w-[78%] gap-0">
                <DialogHeader className="p-2 border-b border-nuetral-100">
                    <div className="flex gap-2 items-center">
                        <div className="bg-neutral-100 border border-zinc-200 h-10 w-10 rounded-full grid place-items-center">
                            <SettingsIcon width={24} height={24} className="text-product-primary" />
                        </div>

                        <DialogTitle className="font-medium text-gray-700">Settings</DialogTitle>
                    </div>
                </DialogHeader>
.....

Popularity 1/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: dialog javascript using

Link to this answer
Share Copy Link

Contributed on Jan 11 2025

Doyin Atobaru

0 Answers Avg Quality 2/10

Closely Related Answers

ReferenceError: Property 'Buffer' doesn't exist

Comment

// Add on top
global.Buffer = require('buffer').Buffer;

Popularity 1/10 Helpfulness 1/10 Language typescript

Source: solana.stackexchange.com

Tags: typescript

Link to this answer
Share Copy Link

Contributed on Jan 09 2025

GutoTrosla

0 Answers Avg Quality 2/10

create modal using shadcn dialog

Contents

More Related Answers

create modal using shadcn dialog

Closely Related Answers

ReferenceError: Property 'Buffer' doesn't exist

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.