Alert

import { Alert } from "@/components/jk/alert"

export const AlertDemo = () => {
    return (
        <div className="w-full flex flex-col gap-4">
            <Alert variant="solid" intent="solid-primary">
                This is a primary alert with solid variant.
            </Alert>
            <Alert variant="soft" intent="soft-success">
                This is a success alert with soft variant.
            </Alert>
            <Alert variant="outline" intent="outline-danger">
                This is a danger alert with outline variant.
            </Alert>
            <Alert variant="subtle" intent="subtle-warning">
                This is a warning alert with subtle variant.
            </Alert>
        </div>
    )
}

import { Alert } from "@/components/jk/alert"

export const AlertVariants = () => {
    return (
        <div className="w-full flex flex-col gap-2">
            <Alert variant="soft">
                <p>You can add components to your app using our CLI.</p>
            </Alert>
            <Alert variant="outline">
                <p>You can add components to your app using our CLI.</p>
            </Alert>
            <Alert variant="subtle">
                <p>You can add components to your app using our CLI.</p>
            </Alert>
            <Alert variant="soft" intent="soft-primary">
                <h3 className="font-semibold">With Border</h3>
                <p className="text-sm mt-0.5">
                    You can add components to your app using our CLI.
                </p>
            </Alert>
            <Alert variant="subtle" intent="subtle-danger">
                <h3 className="font-semibold">Danger zone</h3>
                <p className="text-sm mt-0.5">
                    You can add components to your app using our CLI.
                </p>
            </Alert>
        </div>

    )
}

import { Alert } from "@/components/jk/alert"


export const AlertWithTitle = () => {
    return (
        <div className="w-full flex flex-col gap-2">
            <Alert>
                <h3 className="font-semibold text-fg-title">
                    Alert with title : default
                </h3>
                <p>
                    You can add components to your app using our CLI.
                </p>
            </Alert>
            <Alert className="flex items-start gap-x-4">
                <div className="w-max">
                    <span aria-hidden="true" className="flex iconify ph--info text-xl"></span>
                </div>
                <div className="flex-1">
                    <h3 className="font-semibold text-fg-title">
                        Alert with title & Icon
                    </h3>
                    <p>
                        You can add components to your app using our CLI.
                    </p>
                </div>
            </Alert>
            <Alert className="p-4 flex items-start gap-x-4">
                <span aria-hidden="true" className="flex iconify ph--info text-xl"></span>
                <div className="flex-1 flex flex-col">
                    <h3 className="font-semibold text-fg-title">
                        Alert with title & Icon : default Reverse
                    </h3>
                    <p>
                        You can add components to your app using our CLI.
                    </p>
                </div>
            </Alert>
        </div>

    )
}