In Review

In Progress

Completed

Main Roadmap

Avatar

ekovegeance

Skeleton

<pre><code class="language-javascriptreact">import Alert from "@/components/ui/alert";</code></pre> example:<pre><code class="language-javascriptreact">&lt;Alert type="error" message={message} /&gt;</code></pre>props:<ul class="tight" data-tight="true"><li>type</li><li>message </li></ul>

Alert

<pre><code>import Checkbox from "@/components/ui/checkbox";</code></pre>example:<pre><code> &lt;Checkbox onChange={handleShowPassword} className="mt-4" label="Lihat Password"/&gt;</code></pre>props:<ul class="tight" data-tight="true"><li>label</li><li>className</li><li>onChange</li></ul>

Checkbox

<pre><code class="language-javascript">import Spinner from "@/components/stocks/spinner";</code></pre> example:<pre><code>&lt;Spinner text="Loading..." variant="primary"/&gt;</code></pre> props:<ul class="tight" data-tight="true"><li>className</li><li>text</li><li>variant</li></ul>variant:<ul class="tight" data-tight="true"><li>primary (default)</li><li>dark</li><li>light</li></ul>

Spinner

<pre><code>import Error from "@/components/ui/error"</code></pre> example:<pre><code>&lt;Error/&gt;</code></pre> props:<ul><li>label</li><li>message</li></ul>

Error

<pre><code>import CircularButton from "@/components/ui/circular-button";</code></pre> example:<pre><code class="language-javascriptreact">&lt;CircularButton/&gt;</code></pre> props:<ul><li>icon</li></ul>

CircularButton

<pre><code>import Header from '@/components/header';</code></pre>

Header

<pre><code>import Sidebar from '@/components/sidebar';</code></pre>

Sidebar

<pre><code>import AvatarLogin from "@components/ui/avatar-login";</code></pre>

AvatarLogin

<pre><code class="language-javascriptreact">import Timeline from '@/components/timeline';</code></pre> example:<pre><code>const steps = [
 {
 status: 'payment',
 description: 'Menunggu pembayaran',
 date: '12 Oktober 2024: 10:00',
 },
 {
 status: 'processing',
 description: 'Sedang Di cetak',
 person: 'Zakaria Sutomo',
 date: '12 Oktober 2024: 10:00',
 },
 {
 status: 'delivery',
 description: 'Dikirim ke alamat pengiriman',
 person: 'Alan Walker',
 date: '12 Oktober 2024: 10:00',
 },
 {
 status: 'completed',
 description: 'Pesanan Diterima',
 person: 'Jeni Dhoe',
 date: '12 Oktober 2024: 10:00',
 },
];

export default function TimelinePage() {
 return (
 &lt;div className="container p-4 mx-auto"&gt;
 &lt;Timeline steps={steps} /&gt;
 &lt;/div&gt;
 );
};</code></pre> props:<ul class="tight" data-tight="true"><li>steps </li></ul>

Timeline

<pre><code class="language-javascriptreact">import Dialog from "@/components/ui/dialog";</code></pre>example:<pre><code> &lt;Dialog
 isOpen={isDialogOpen}
 onClose={() =&gt; setIsDialogOpen(false)}
 title="Registrasi Berhasil"
 description="Sukses mendaftar! Silahkan login."&gt;
&lt;/Dialog&gt;</code></pre>props:<ul class="tight" data-tight="true"><li>isOpen</li><li>onClose</li><li>title</li><li>description</li></ul>

blueprint at payoprint