Spaces:
Paused
Paused
File size: 3,729 Bytes
5a81b95 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 | import { Users, TrendingDown, Timer, Eye, Globe, Target, FlaskConical } from 'lucide-react';
export const MiniRealTimeVisitors = () => (
<div className="h-full flex flex-col items-center justify-center">
<div className="text-3xl font-mono text-primary animate-pulse">428</div>
<div className="text-[8px] text-muted-foreground mt-1 flex items-center gap-1">
<Users size={8} /> LIVE USERS
</div>
</div>
);
export const MiniBounceRate = () => (
<div className="h-full flex flex-col items-center justify-center">
<div className="text-2xl font-mono text-primary">45%</div>
<div className="w-16 h-1 bg-secondary rounded-full mt-2 overflow-hidden">
<div className="h-full w-[45%] bg-primary" />
</div>
<div className="text-[8px] text-muted-foreground mt-1">BOUNCE RATE</div>
</div>
);
export const MiniSessionDuration = () => (
<div className="h-full flex flex-col items-center justify-center">
<div className="flex items-end gap-1">
<span className="text-xl font-mono text-primary">2</span>
<span className="text-xs text-muted-foreground mb-1">m</span>
<span className="text-xl font-mono text-primary">34</span>
<span className="text-xs text-muted-foreground mb-1">s</span>
</div>
<div className="text-[8px] text-muted-foreground mt-1 flex items-center gap-1">
<Timer size={8} /> AVG SESSION
</div>
</div>
);
export const MiniPageViews = () => (
<div className="h-full flex items-end justify-between px-2 pb-2 gap-1">
{[20, 45, 30, 80, 55, 90, 65].map((h, i) => (
<div key={i} className="flex-1 bg-primary/20 rounded-sm hover:bg-primary/60 transition-colors" style={{ height: `${h}%` }} />
))}
</div>
);
export const MiniTrafficSources = () => (
<div className="h-full flex flex-col justify-center gap-1 px-2">
{[
{ label: 'Direct', val: '40%' },
{ label: 'Social', val: '30%' },
{ label: 'Search', val: '30%' }
].map(s => (
<div key={s.label} className="flex justify-between text-[8px]">
<span className="text-muted-foreground">{s.label}</span>
<span className="text-primary">{s.val}</span>
</div>
))}
</div>
);
export const MiniGoalCompletion = () => (
<div className="h-full flex items-center justify-center relative">
<svg viewBox="0 0 36 36" className="w-12 h-12">
<path
d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
fill="none"
stroke="hsl(var(--secondary))"
strokeWidth="4"
/>
<path
d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
fill="none"
stroke="hsl(var(--primary))"
strokeWidth="4"
strokeDasharray="85, 100"
className="animate-[spin_3s_linear_infinite]"
/>
</svg>
<Target size={12} className="absolute text-primary" />
</div>
);
export const MiniCountryStats = () => (
<div className="h-full grid grid-cols-2 gap-1 p-1">
{['US', 'DE', 'UK', 'DK'].map(c => (
<div key={c} className="bg-secondary/30 rounded flex items-center justify-center text-[8px] font-mono">
{c}
</div>
))}
</div>
);
export const MiniABTest = () => (
<div className="h-full flex items-center justify-around">
<div className="flex flex-col items-center">
<div className="text-xs font-bold text-primary">A</div>
<div className="text-[8px] text-muted-foreground">12%</div>
</div>
<div className="h-8 w-px bg-border" />
<div className="flex flex-col items-center">
<div className="text-xs font-bold text-green-500">B</div>
<div className="text-[8px] text-muted-foreground">18%</div>
</div>
</div>
);
|