phase 1 complete
This commit is contained in:
@@ -393,37 +393,41 @@ export default function SiteList() {
|
||||
const renderGridView = () => (
|
||||
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2 xl:grid-cols-3">
|
||||
{filteredSites.map((site) => (
|
||||
<Card key={site.id} className="rounded-xl border-2 border-gray-200 bg-white dark:border-gray-800 dark:bg-white/3 hover:border-[var(--color-primary)] hover:shadow-lg transition-all">
|
||||
<div className="relative p-4 pb-6">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<div className="size-6 rounded-lg bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-primary-dark)] flex items-center justify-center text-white shadow-md flex-shrink-0">
|
||||
<svg className="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<Card key={site.id} padding="xs" className="rounded-xl border-2 border-gray-200 bg-white dark:border-gray-800 dark:bg-white/3 hover:border-[var(--color-primary)] hover:shadow-lg transition-all">
|
||||
<div className="relative">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<div className="size-8 rounded-lg bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-primary-dark)] flex items-center justify-center text-white shadow-md flex-shrink-0">
|
||||
<svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-gray-800 dark:text-white/90">
|
||||
{site.name}
|
||||
</h3>
|
||||
<div className="flex-1 min-w-0">
|
||||
<h3 className="text-lg font-semibold text-gray-800 dark:text-white/90">
|
||||
{site.name}
|
||||
</h3>
|
||||
{site.domain && (
|
||||
<p className="text-xs text-gray-400 dark:text-gray-500 truncate">
|
||||
{site.domain}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<p className="max-w-xs text-sm text-gray-500 dark:text-gray-400 mb-2">
|
||||
{site.description || 'No description'}
|
||||
</p>
|
||||
{site.domain && (
|
||||
<p className="text-xs text-gray-400 dark:text-gray-500 mb-2">
|
||||
{site.domain}
|
||||
{site.description && (
|
||||
<p className="max-w-xs text-sm text-gray-500 dark:text-gray-400 mb-2 ml-10">
|
||||
{site.description}
|
||||
</p>
|
||||
)}
|
||||
{/* Centered badges with uniform size */}
|
||||
<div className="flex items-center justify-center gap-2 mb-2 flex-wrap">
|
||||
<SiteTypeBadge hostingType={site.hosting_type} size="sm" />
|
||||
{/* Centered badges with smaller size */}
|
||||
<div className="flex items-center justify-center gap-1.5 mt-3 mb-2 flex-wrap">
|
||||
<SiteTypeBadge hostingType={site.hosting_type} size="xs" />
|
||||
{site.industry_name && (
|
||||
<Badge variant="soft" color="warning" size="sm">
|
||||
<Badge variant="soft" color="warning" size="xs">
|
||||
{site.industry_name}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
{/* Status badge and toggle in top right */}
|
||||
<div className="absolute top-4 right-4 flex items-center gap-3">
|
||||
<div className="absolute top-0 right-0 flex items-center gap-2">
|
||||
<Switch
|
||||
checked={site.is_active}
|
||||
onChange={(enabled) => handleToggle(site.id, enabled)}
|
||||
@@ -439,7 +443,7 @@ export default function SiteList() {
|
||||
</div>
|
||||
</div>
|
||||
{/* Centered button row */}
|
||||
<div className="border-t border-gray-200 p-3 dark:border-gray-800">
|
||||
<div className="border-t border-gray-200 mt-3 -mx-3 -mb-3 px-3 py-2 dark:border-gray-800">
|
||||
<div className="flex justify-center gap-2">
|
||||
<Button
|
||||
onClick={() => navigate(`/sites/${site.id}`)}
|
||||
|
||||
Reference in New Issue
Block a user