Countdown Component
ℹ️
The Countdown component is a versatile React component designed for
displaying countdowns with various visual styles and sizes. It is part of the
class-variance-authority library for managing component variants.
Example Preview
Usage
import { Countdown } from "@/@core";
// Example usage of Countdown component
const MyCountdown = () => {
return <Countdown variant="default" size="md" />;
};
export default MyCountdown;Props
| Prop Name | Type | Default Value | Required | Description |
|---|---|---|---|---|
size | xs, sm, md, lg, xl, 2xl, 3xl | 'md' | No | Size of the countdown. |
variant | default, number, clock, countdown-with-colons, countdown-with-labels, countdown-with-under-labels, countdown-boxes | 'default' | No | Visual style of the countdown. |
children | React.ReactNode | - | No | Additional content to be displayed inside the countdown. |
Example
Here are examples of using the Countdown component with different variants:
<Countdown variant="default" size="md" />
<Countdown variant="number" size="xl" />
<Countdown variant="clock" size="lg" />
<Countdown variant="countdown-with-colons" size="2xl" />
<Countdown variant="countdown-with-labels" size="3xl" />
<Countdown variant="countdown-with-under-labels" size="4xl" />
<Countdown variant="countdown-boxes" size="5xl" />ℹ️
These examples demonstrate how to use the Countdown component with various
visual styles and sizes. Customize the variant and size props based on
your design requirements.
Feel free to adjust the installation and usage sections based on your project structure and requirements.