add shadcn ui

apps/storefront/src/features/account/account-panels.tsx

@@ -12,7 +12,7 @@ import type {
   OrderListItem,
   ProductListItem,
 } from '@sport/types';
-import { Badge, Button, EmptyState, Input, Skeleton } from '@sport/ui';
+import { Badge, Button, EmptyState, FormError, Input, Skeleton } from '@sport/ui';
 
 import { Link } from '@/i18n/navigation';
 import { browserApi } from '@/lib/api';
@@ -115,11 +115,7 @@ export function AccountOrders() {
     <div className="space-y-6">
       <h1 className="text-2xl font-black uppercase tracking-tight">{t('nav.orders')}</h1>
 
-      {error ? (
-        <p role="alert" className="text-danger text-sm">
-          {error}
-        </p>
-      ) : null}
+      <FormError message={error} />
 
       {!data ? (
         <Skeleton className="h-40 w-full" />
@@ -244,11 +240,7 @@ export function AccountAddresses() {
         ) : null}
       </div>
 
-      {error ? (
-        <p role="alert" className="text-danger text-sm">
-          {error}
-        </p>
-      ) : null}
+      <FormError message={error} />
 
       {draft ? (
         <form onSubmit={save} className="border-ink-200 space-y-4 border p-5">
@@ -301,11 +293,7 @@ export function AccountAddresses() {
             <span className="text-sm">{t('makeDefault')}</span>
           </label>
 
-          {formError ? (
-            <p role="alert" className="text-danger text-sm">
-              {formError}
-            </p>
-          ) : null}
+          <FormError message={formError} />
 
           <div className="flex gap-2">
             <Button type="submit" size="sm" disabled={busy}>
@@ -469,11 +457,7 @@ export function AccountProfile() {
           <span className="text-ink-600 text-sm">{t('marketing')}</span>
         </label>
 
-        {formError ? (
-          <p role="alert" className="text-danger text-sm">
-            {formError}
-          </p>
-        ) : null}
+        <FormError message={formError} />
         {saved ? <p className="text-success text-sm">{t('saved')}</p> : null}
 
         <Button type="submit" disabled={busy}>
@@ -517,11 +501,7 @@ export function AccountWishlist() {
     <div className="space-y-6">
       <h1 className="text-2xl font-black uppercase tracking-tight">{t('nav.wishlist')}</h1>
 
-      {error ? (
-        <p role="alert" className="text-danger text-sm">
-          {error}
-        </p>
-      ) : null}
+      <FormError message={error} />
 
       {!data ? (
         <Skeleton className="h-32 w-full" />

apps/storefront/src/features/account/auth-form.tsx

@@ -5,7 +5,7 @@ import { useTranslations } from 'next-intl';
 import { useState, type FormEvent } from 'react';
 
 import { isApiClientError } from '@sport/api-client';
-import { Button, Input } from '@sport/ui';
+import { Button, Checkbox, FormError, Input } from '@sport/ui';
 
 import { Link } from '@/i18n/navigation';
 import { routes } from '@/lib/routes';
@@ -152,22 +152,16 @@ export function AuthForm({ mode }: { mode: 'signIn' | 'register' }) {
             </label>
 
             <label className="flex items-start gap-2.5">
-              <input
-                type="checkbox"
+              <Checkbox
                 checked={acceptsMarketing}
-                onChange={(event) => setAcceptsMarketing(event.target.checked)}
-                className="border-ink-300 accent-ink-950 mt-0.5 size-4"
+                onCheckedChange={(checked) => setAcceptsMarketing(checked === true)}
               />
               <span className="text-ink-600 text-sm">{t('marketing')}</span>
             </label>
           </>
         ) : null}
 
-        {error ? (
-          <p role="alert" className="text-danger text-sm">
-            {error}
-          </p>
-        ) : null}
+        <FormError message={error} />
 
         <Button type="submit" disabled={busy} className="w-full">
           {busy ? t('working') : isRegister ? t('createAccount') : t('signIn')}