Badge

import { Badge } from '@peppermint-design/devreadykit';

export default function BadgeBasicExample() {
    return (
        <div className="flex items-center gap-4">
            <Badge variant="status" color="available" />
            <Badge variant="status" color="block" />
            <Badge variant="status" color="away" />
            <Badge variant="status" color="offline" />
        </div>
    );
}

import { Check } from "@/assets/icons/check.tsx";
import { Calendar } from "@/assets/icons/calendar.tsx";
import { Close } from "@/assets/icons/close.tsx";
import { Minus } from "@/assets/icons/minus.tsx";
import { Circle } from "@/assets/icons/circle.tsx";

<Badge variant="sm" color="available" icon={<Check />} />
<Badge variant="sm" color="away"      icon={<Calendar />} />
<Badge variant="sm" color="offline"   icon={<Close />} />
<Badge variant="sm" color="block"     icon={<Minus />} />
<Badge variant="sm" color="default"   icon={<Circle />} />

    import { Check } from "@/assets/icons/check.tsx";
    import { Calendar } from "@/assets/icons/calendar.tsx";
    import { Close } from "@/assets/icons/close.tsx";
    import { Minus } from "@/assets/icons/minus.tsx";
    import { Circle } from "@/assets/icons/circle.tsx";

    <Badge variant="md" color="available" icon={<Check />} />
    <Badge variant="md" color="away"      icon={<Calendar />} />
    <Badge variant="md" color="offline"   icon={<Close />} />
    <Badge variant="md" color="block"     icon={<Minus />} />
    <Badge variant="md" color="default"   icon={<Circle />} />

<Badge variant="lg" color="available" text="Available" />
<Badge variant="lg" color="away" text="Away" />
<Badge variant="lg" color="offline" text="Offline" />
<Badge variant="lg" color="block" text="Blocked" />
<Badge variant="lg" color="default" text="Default" />

import Badge from "@peppermint-design/devreadykit";
import { Check } from "@/assets/icons/check";
import { Close } from "@/assets/icons/close";


export default function BadgeWithIconText() {
    return (
        <div className="flex items-center flex-col gap-4">
            <div className="flex flex-wrap gap-3">
                <Badge variant="lg" color="available" text="Active" icon={<Check />} />
                <Badge variant="lg" color="block" text="Error" icon={<Close />} />
            </div>
        </div>
    );
}

import Badge from "@peppermint-design/devreadykit";

export default function BadgeNumeric() {
    return (
        <div className="flex items-center flex-col gap-4">
            <div className="flex flex-wrap gap-3">
                <Badge variant="lg" color="default" text={5} />
                <Badge variant="lg" color="default" text={12} />
                <Badge variant="lg" color="default" text={99} />
                <Badge variant="lg" color="default" text={999} />
            </div>
        </div>
    );
}

import Badge from "@peppermint-design/devreadykit";

const users = [
    { id: 1, name: "Alice Johnson", status: "available", statusText: "Online" },
    { id: 2, name: "Brian Kim", status: "away", statusText: "Away" },
    { id: 3, name: "Carlos Ruiz", status: "offline", statusText: "Offline" },
    { id: 4, name: "Dana Lee", status: "block", statusText: "Blocked" },
] as const;

export default function BadgeUserStatus() {
    return (
        <div className="flex items-center flex-col gap-4 w-full">
            <div className="w-full max-w-md space-y-3">
                {users.map((user) => (
                    <div key={user.id} className="flex items-center justify-between rounded border gap-4 p-3">
                        <span className="text-sm text-neutral-800">{user.name}</span>
                        <Badge variant="lg" color={user.status} text={user.statusText} />
                    </div>
                ))}
            </div>
        </div>
    );
}

import Badge from "@peppermint-design/devreadykit";
import { Check } from "@/assets/icons/check";
import { Close } from "@/assets/icons/close";
import { Console } from "@/assets/icons/console.tsx";
import { MoreHorizontal } from "@/assets/icons/more-horizontal.tsx";


export default function BadgeTaskStatus() {
    return (
        <div className="flex items-center flex-col gap-4 w-full">
            <div className="w-full max-w-md space-y-3">
                <div className="flex items-center justify-between rounded border gap-4 p-3">
                    <span className="text-sm text-neutral-800">Completed</span>
                    <Badge variant="lg" color="available" text="Done" icon={<Check />} />
                </div>
                <div className="flex items-center justify-between rounded border gap-4 p-3">
                    <span className="text-sm text-neutral-800">In-progress</span>
                    <Badge variant="lg" color="away" text="In Progress" icon={<Clock />} />
                </div>
                <div className="flex items-center justify-between rounded border gap-4 p-3">
                    <span className="text-sm text-neutral-800">Blocked</span>
                    <Badge variant="lg" color="block" text="Blocked" icon={<Console />} />
                </div>
                <div className="flex items-center justify-between rounded border gap-4 p-3">
                    <span className="text-sm text-neutral-800">Pending</span>
                    <Badge variant="lg" color="offline" text="Pending" icon={<MoreHorizontal />} />
                </div>
            </div>
        </div>
    );
}