About

The SimpleStatusCardV1 component is designed to display the connection status of an application, along with a title and description. It features a status button that changes appearance based on the connection status.

Tips/Instructions

1. Usage: Import the SimpleStatusCardV1 component and provide the required props: connected, title, description.
2. Customization: You can easily customize the title, description, and SVG icon to match your application's branding.

function StatusButton({ connected }) {
    return (
        <button
            className={`${
                connected
                    ? "bg-green-50 dark:bg-green-950 text-green-500 dark:text-green-600"
                    : "bg-white border-2 dark:border-zinc-700 border-zinc-200 dark:bg-zinc-800 text-zinc-500 dark:text-zinc-200"
            } rounded-md text-sm h-7 font-medium w-1/2 flex items-center justify-center`}
        >
            {connected ? "Connected" : "Connect"}
        </button>
    );
}

function StatusIcon() {
    return (
        // figma icon
        <svg
            className="h-6 fill-black dark:fill-white"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 384 512"
        >
            <path
                d="M14 95.8C14 42.9 56.9 0 109.8 0H274.2C327.1 0 370 42.9 370 95.8C370 129.3 352.8 158.8 326.7 175.9C352.8 193 370 222.5 370 256C370 308.9 327.1 351.8 274.2 351.8H272.1C247.3 351.8 224.7 342.4 207.7 326.9V415.2C207.7 468.8 163.7 512 110.3 512C57.5 512 14 469.2 14 416.2C14 382.7 31.2 353.2 57.2 336.1C31.2 319 14 289.5 14 256C14 222.5 31.2 193 57.2 175.9C31.2 158.8 14 129.3 14 95.8zM176.3 191.6H109.8C74.2 191.6 45.4 220.4 45.4 256C45.4 291.4 74 320.2 109.4 320.4C109.5 320.4 109.7 320.4 109.8 320.4H176.3V191.6zM207.7 256C207.7 291.6 236.5 320.4 272.1 320.4H274.2C309.7 320.4 338.6 291.6 338.6 256C338.6 220.4 309.7 191.6 274.2 191.6H272.1C236.5 191.6 207.7 220.4 207.7 256zM109.8 351.8C109.7 351.8 109.5 351.8 109.4 351.8C74 352 45.4 380.8 45.4 416.2C45.4 451.7 74.6 480.6 110.3 480.6C146.6 480.6 176.3 451.2 176.3 415.2V351.8H109.8zM109.8 31.4C74.2 31.4 45.4 60.2 45.4 95.8C45.4 131.4 74.2 160.2 109.8 160.2H176.3V31.4H109.8zM207.7 160.2H274.2C309.7 160.2 338.6 131.4 338.6 95.8C338.6 60.2 309.7 31.4 274.2 31.4H207.7V160.2z"
            />
        </svg>
    );
}

export default function SimpleStatusCardV1({ connected, title, description }) {
    return (
        <div className="w-60 bg-white dark:bg-zinc-900 flex flex-col gap-4 border-2 border-zinc-200 dark:border-zinc-800 rounded-lg shadow-none hover:shadow-md duration-200 p-4">
            <div className="flex">
                <div className="w-1/2">
                    <StatusIcon />
                </div>
                <StatusButton connected={connected} />
            </div>
            <div className="flex flex-col gap-2">
                <div className="font-medium text-black dark:text-white">{title}</div>
                <div className="text-sm text-zinc-400 dark:text-zinc-500">{description}</div>
            </div>
        </div>
    );
}

// Usage
<SimpleStatusCardV1
    connected={true}
    title="Application Title"
    description="This is a brief description of the application status."
/>

Files Included

• SimpleStatusCardV1.jsx