BuzzbeeSCD/clustri
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: interactive site redesign with dot matrix effects and component polish

Browse Source
This commit is contained in:
Matt
2026-08-25 13:08:21 +00:00
parent efbdf2356f
commit 563d9c0eeb
33 changed files with 969 additions and 505 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/dashboard/QuickActions.tsx
+19 -18
View File
@@ -1,4 +1,5 @@
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Card, CardContent, CardHeader } from '@/components/ui/card'
import { DotMatrixText } from '@/components/ui/dot-matrix'
import { Button } from '@/components/ui/button'
import { RefreshCw, Server, Box, HardDrive, ListTodo, Shield, Zap } from 'lucide-react'
@@ -10,65 +11,65 @@ interface QuickActionsProps {
export function QuickActions({ onRefresh, isRefreshing, onNavigate }: QuickActionsProps) {
return (
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0">
<Card className="dot-grid">
<CardHeader className="flex flex-row items-center justify-between space-y-0 border-b border-dotted border-border/60">
<div className="flex items-center gap-2.5">
<div className="flex h-7 w-7 items-center justify-center rounded-md border border-border bg-muted/40">
<div className="flex h-7 w-7 items-center justify-center rounded-sm border border-dotted border-border bg-muted/40">
<Zap className="h-3.5 w-3.5 text-muted-foreground" />
</div>
<CardTitle className="text-sm font-semibold">Quick Actions</CardTitle>
<DotMatrixText text="QUICK ACTIONS" size="xs" className="text-foreground" />
</div>
</CardHeader>
<CardContent>
<CardContent className="pt-4">
<div className="grid grid-cols-2 sm:grid-cols-3 gap-2">
<Button
variant="outline"
className="flex h-auto flex-col items-center gap-1.5 px-2 py-3"
className="flex h-auto flex-col items-center gap-1.5 border-dotted px-2 py-3"
onClick={onRefresh}
disabled={isRefreshing}
>
<RefreshCw className={`h-4 w-4 ${isRefreshing ? 'animate-spin' : ''}`} />
<span className="text-xs font-medium">Refresh</span>
<DotMatrixText text="REFRESH" size="xs" className="text-muted-foreground" />
</Button>
<Button
variant="outline"
className="flex h-auto flex-col items-center gap-1.5 px-2 py-3"
className="flex h-auto flex-col items-center gap-1.5 border-dotted px-2 py-3"
onClick={() => onNavigate?.('nodes')}
>
<Server className="h-4 w-4" />
<span className="text-xs font-medium">Nodes</span>
<DotMatrixText text="NODES" size="xs" className="text-muted-foreground" />
</Button>
<Button
variant="outline"
className="flex h-auto flex-col items-center gap-1.5 px-2 py-3"
className="flex h-auto flex-col items-center gap-1.5 border-dotted px-2 py-3"
onClick={() => onNavigate?.('vms')}
>
<Box className="h-4 w-4" />
<span className="text-xs font-medium">VMs</span>
<DotMatrixText text="VMS" size="xs" className="text-muted-foreground" />
</Button>
<Button
variant="outline"
className="flex h-auto flex-col items-center gap-1.5 px-2 py-3"
className="flex h-auto flex-col items-center gap-1.5 border-dotted px-2 py-3"
onClick={() => onNavigate?.('storage')}
>
<HardDrive className="h-4 w-4" />
<span className="text-xs font-medium">Storage</span>
<DotMatrixText text="STORAGE" size="xs" className="text-muted-foreground" />
</Button>
<Button
variant="outline"
className="flex h-auto flex-col items-center gap-1.5 px-2 py-3"
className="flex h-auto flex-col items-center gap-1.5 border-dotted px-2 py-3"
onClick={() => onNavigate?.('tasks')}
>
<ListTodo className="h-4 w-4" />
<span className="text-xs font-medium">Tasks</span>
<DotMatrixText text="TASKS" size="xs" className="text-muted-foreground" />
</Button>
<Button
variant="outline"
className="flex h-auto flex-col items-center gap-1.5 px-2 py-3"
className="flex h-auto flex-col items-center gap-1.5 border-dotted px-2 py-3"
onClick={() => onNavigate?.('backups')}
>
<Shield className="h-4 w-4" />
<span className="text-xs font-medium">Backups</span>
<DotMatrixText text="BACKUPS" size="xs" className="text-muted-foreground" />
</Button>
</div>
</CardContent>