salman/igny8
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

phase 1 complete

Browse Source
This commit is contained in:
IGNY8 VPS (Salman)
2026-01-05 05:06:30 +00:00
parent de0e42cca8
commit abc6c011ea
4 changed files with 58 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
frontend/src/components/common/SiteCard.tsx
View File

@@ -28,22 +28,6 @@ export default function SiteCard({
onToggle(site.id, enabled);
};
const getStatusColor = () => {
if (site.is_active) {
return 'bg-success-500 dark:bg-success-600';
}
return 'bg-gray-400 dark:bg-gray-500';
};
const getStatusText = () => {
if (site.is_active) {
return { text: 'Active', color: 'text-success-600 dark:text-success-400', bold: true };
}
return { text: 'Inactive', color: 'text-gray-400 dark:text-gray-500', bold: false };
};
const statusText = getStatusText();
// Setup checklist state derived from site data
const hasIndustry = !!site.industry || !!site.industry_name;
const hasSectors = site.active_sectors_count > 0;
@@ -52,26 +36,28 @@ export default function SiteCard({
return (
<article className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/3">
<div className="relative p-3 pb-5">
<div className="relative p-3">
<div className="flex items-center gap-2 mb-1">
<div className="inline-flex items-center justify-center">
<div className="inline-flex items-center justify-center text-lg">
{icon}
</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>
{site.domain && (
<p className="text-xs text-gray-400 dark:text-gray-500 mb-2 ml-8">
{site.domain}
</p>
)}
{site.description && (
<p className="max-w-xs text-sm text-gray-500 dark:text-gray-400 mb-2">
<p className="max-w-xs text-sm text-gray-500 dark:text-gray-400 mb-2 ml-8">
{site.description}
</p>
)}
<div className="flex items-center gap-1.5 mb-2 flex-wrap">
<div className="flex items-center gap-1.5 mt-2 mb-2 flex-wrap">
<SiteTypeBadge hostingType={site.hosting_type} size="xs" />
{site.industry_name && (
<Badge variant="soft" color="warning" size="xs">
@@ -81,11 +67,6 @@ export default function SiteCard({
<Badge variant="soft" color="neutral" size="xs">
{site.active_sectors_count} / 5 Sectors
</Badge>
{site.status && (
<Badge variant={site.is_active ? 'solid' : 'soft'} color={site.status === 'active' ? 'success' : 'neutral'} size="xs">
{site.status}
</Badge>
)}
</div>
{/* Setup Checklist - Compact View */}
<div className="mt-2">
@@ -99,19 +80,25 @@ export default function SiteCard({
compact={true}
/>
</div>
{/* Status Text and Circle - Same row */}
{/* Status badge and toggle in top right */}
<div className="absolute top-3 right-3 flex items-center gap-2">
<span className={`text-sm ${statusText.color} ${statusText.bold ? 'font-bold' : ''} transition-colors duration-200`}>
{statusText.text}
</span>
<div
className={`w-[20px] h-[20px] rounded-full ${getStatusColor()} transition-colors duration-200`}
title={site.is_active ? 'Active site' : 'Inactive site'}
<Switch
label=""
checked={site.is_active}
disabled={isToggling}
onChange={handleToggle}
/>
<Badge
variant="solid"
color={site.is_active ? "success" : "error"}
size="xs"
>
{site.is_active ? 'Active' : 'Inactive'}
</Badge>
</div>
</div>
<div className="flex items-center justify-between border-t border-gray-200 p-2 dark:border-gray-800">
<div className="flex gap-1.5 flex-1">
<div className="flex items-center justify-center border-t border-gray-200 p-2 dark:border-gray-800">
<div className="flex gap-1.5">
<Button
variant="primary"
tone="brand"
@@ -140,12 +127,6 @@ export default function SiteCard({
Settings
</Button>
</div>
<Switch
label=""
checked={site.is_active}
disabled={isToggling}
onChange={handleToggle}
/>
</div>
</article>
);