redesign the homepage

2026-06-26 16:27:21 -04:00
parent 256ff0814e
commit d7fb7b7a7b
1030 changed files with 107374 additions and 2657 deletions
@@ -0,0 +1,103 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import Link from 'next/link'
+import { useRouter } from 'next/navigation'
+import { RenterAuthError, loadRenterProfile, type SavedCompany } from '@/lib/renter'
+import { useMarketplacePreferences } from '@/components/MarketplaceShell'
+
+export default function RenterSavedCompaniesPage() {
+  const router = useRouter()
+  const { language } = useMarketplacePreferences()
+  const dict = {
+    en: {
+      load: 'Could not load saved companies.',
+      renter: 'Renter',
+      title: 'Saved companies',
+      back: 'Back to dashboard',
+      loading: 'Loading saved companies…',
+      empty: 'You have not saved any companies yet.',
+      browse: 'Browse the marketplace',
+      rentalCompany: 'Rental company',
+    },
+    fr: {
+      load: 'Impossible de charger les entreprises sauvegardées.',
+      renter: 'Client',
+      title: 'Entreprises sauvegardées',
+      back: 'Retour au tableau de bord',
+      loading: 'Chargement des entreprises sauvegardées…',
+      empty: 'Vous n’avez encore enregistré aucune entreprise.',
+      browse: 'Parcourir la marketplace',
+      rentalCompany: 'Société de location',
+    },
+    ar: {
+      load: 'تعذر تحميل الشركات المحفوظة.',
+      renter: 'المستأجر',
+      title: 'الشركات المحفوظة',
+      back: 'العودة إلى بوابة المستأجر',
+      loading: 'جارٍ تحميل الشركات المحفوظة…',
+      empty: 'لم تقم بحفظ أي شركة بعد.',
+      browse: 'تصفح السوق',
+      rentalCompany: 'شركة تأجير',
+    },
+  }[language]
+  const [companies, setCompanies] = useState<SavedCompany[]>([])
+  const [errorMsg, setErrorMsg] = useState('')
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    loadRenterProfile()
+      .then((profile) => setCompanies(profile.savedCompanies ?? []))
+      .catch((err) => {
+        if (err instanceof RenterAuthError) {
+          router.replace('/')
+          return
+        }
+        setErrorMsg(err instanceof Error ? err.message : dict.load)
+      })
+      .finally(() => setLoading(false))
+  }, [router])
+
+  return (
+    <div className="shell space-y-6">
+      <h1 className="text-3xl font-black tracking-tight text-blue-900">{dict.title}</h1>
+
+      {loading ? <div className="card p-8 text-sm text-stone-500">{dict.loading}</div> : null}
+      {!loading && errorMsg ? <div className="card p-8 text-sm text-rose-600">{errorMsg}</div> : null}
+
+      {!loading && !errorMsg && companies.length === 0 ? (
+        <div className="card p-10 text-center">
+          <p className="text-sm text-stone-500">{dict.empty}</p>
+          <Link href="/explore" className="mt-5 inline-flex rounded-full bg-orange-600 px-6 py-2.5 text-sm font-semibold text-white">
+            {dict.browse}
+          </Link>
+        </div>
+      ) : null}
+
+      {!loading && !errorMsg && companies.length > 0 ? (
+        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+          {companies.map((company) => (
+            <Link
+              key={company.id}
+              href={`/explore/${company.brand?.subdomain ?? company.id}`}
+              className="card flex items-center gap-4 p-5 hover:border-orange-300 transition-colors"
+            >
+              {company.brand?.logoUrl ? (
+                // eslint-disable-next-line @next/next/no-img-element
+                <img src={company.brand.logoUrl} alt={company.brand.displayName} className="h-11 w-11 rounded-xl object-contain" />
+              ) : (
+                <div className="flex h-11 w-11 items-center justify-center rounded-xl bg-orange-100 text-sm font-bold text-orange-700">
+                  {company.brand?.displayName?.charAt(0) ?? '?'}
+                </div>
+              )}
+              <div className="min-w-0">
+                <p className="truncate text-sm font-semibold text-blue-900">{company.brand?.displayName ?? dict.rentalCompany}</p>
+                <p className="mt-1 truncate text-xs text-stone-400">{company.brand?.subdomain ?? company.id}</p>
+              </div>
+            </Link>
+          ))}
+        </div>
+      ) : null}
+    </div>
+  )
+}