mirror of
https://github.com/vercel/next-learn.git
synced 2026-07-02 17:08:42 +00:00
9044c85918
* Update next to canary * Update layout.tsx * Use canary * Remove serverActions flag warning * Use unstable_noStore * Add Date.now() test * Update metadataBase url * Create wrapper component for Cards * Update page.tsx * Misc * Delete unused data fetch * Add noStore to /invoices and /customers functions * Remove date.now() * Use canary * Rename component * Fix imports * Update types for useFormStatus and useFormState * Rename folder, add team members * fixed images and added login button pending state * Update dashboard/final-example/app/lib/data.ts Co-authored-by: Matt Kane <m@mk.gg> --------- Co-authored-by: Steven Tey <stevensteel97@gmail.com> Co-authored-by: Matt Kane <m@mk.gg>
30 lines
736 B
TypeScript
30 lines
736 B
TypeScript
import { CheckIcon, ClockIcon } from '@heroicons/react/24/outline';
|
|
import clsx from 'clsx';
|
|
|
|
export default function InvoiceStatus({ status }: { status: string }) {
|
|
return (
|
|
<span
|
|
className={clsx(
|
|
'inline-flex items-center rounded-full px-2 py-1 text-xs',
|
|
{
|
|
'bg-gray-100 text-gray-500': status === 'pending',
|
|
'bg-green-500 text-white': status === 'paid',
|
|
},
|
|
)}
|
|
>
|
|
{status === 'pending' ? (
|
|
<>
|
|
Pending
|
|
<ClockIcon className="ml-1 w-4 text-gray-500" />
|
|
</>
|
|
) : null}
|
|
{status === 'paid' ? (
|
|
<>
|
|
Paid
|
|
<CheckIcon className="ml-1 w-4 text-white" />
|
|
</>
|
|
) : null}
|
|
</span>
|
|
);
|
|
}
|