Skip to content

Commit 87ce416

Browse files
lovable-dev[bot]lovable-dev[bot]
committed
Refactor component showcase
Move component showcase examples to individual pages for better organization and discoverability.
1 parent 5d73a52 commit 87ce416

8 files changed

Lines changed: 1164 additions & 1 deletion

File tree

‎src/App.tsx‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,13 @@ import Settings from "./pages/Settings";
1414
import Profile from "./pages/Profile";
1515
import Notifications from "./pages/Notifications";
1616
import ComponentShowcase from "./pages/ComponentShowcase";
17+
import ComponentShowcaseIndex from "./pages/showcase/ComponentShowcaseIndex";
18+
import StatsCards from "./pages/showcase/StatsCards";
19+
import DataTables from "./pages/showcase/DataTables";
20+
import ActivityFeeds from "./pages/showcase/ActivityFeeds";
21+
import Charts from "./pages/showcase/Charts";
22+
import FeatureCards from "./pages/showcase/FeatureCards";
23+
import LoadingStates from "./pages/showcase/LoadingStates";
1724
import Login from "./pages/Login";
1825
import Register from "./pages/Register";
1926
import NotFound from "./pages/NotFound";
@@ -48,7 +55,14 @@ const App = () => (
4855
<Route path="/settings" element={<Settings />} />
4956
<Route path="/profile" element={<Profile />} />
5057
<Route path="/notifications" element={<Notifications />} />
51-
<Route path="/showcase" element={<ComponentShowcase />} />
58+
<Route path="/showcase" element={<ComponentShowcaseIndex />} />
59+
<Route path="/showcase/stats" element={<StatsCards />} />
60+
<Route path="/showcase/tables" element={<DataTables />} />
61+
<Route path="/showcase/activity" element={<ActivityFeeds />} />
62+
<Route path="/showcase/charts" element={<Charts />} />
63+
<Route path="/showcase/features" element={<FeatureCards />} />
64+
<Route path="/showcase/loading" element={<LoadingStates />} />
65+
<Route path="/old-showcase" element={<ComponentShowcase />} />
5266
</Route>
5367
{/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
5468
<Route path="*" element={<NotFound />} />

‎src/pages/showcase/ActivityFeeds.tsx‎

Lines changed: 174 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,174 @@
1+
import { Helmet } from "react-helmet-async";
2+
import { ActivityFeed } from "@/components/ui/activity-feed";
3+
import { Badge } from "@/components/ui/badge";
4+
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
5+
import { FileText, Settings, BarChart3, Users, Shield, Zap } from "lucide-react";
6+
7+
export default function ActivityFeeds() {
8+
const activities = [
9+
{
10+
id: "1",
11+
user: { name: "Ahmet Yılmaz", initials: "AY" },
12+
action: "Yeni rapor oluşturdu",
13+
target: "Q4 Analiz Raporu",
14+
time: "5 dakika önce",
15+
type: "success" as const,
16+
icon: FileText
17+
},
18+
{
19+
id: "2",
20+
user: { name: "Fatma Kaya", initials: "FK" },
21+
action: "Sistem ayarlarını güncelledi",
22+
target: "Güvenlik Politikaları",
23+
time: "1 saat önce",
24+
type: "info" as const,
25+
icon: Settings
26+
},
27+
{
28+
id: "3",
29+
user: { name: "Mehmet Demir", initials: "MD" },
30+
action: "Performans uyarısı aldı",
31+
target: "API Response Time",
32+
time: "2 saat önce",
33+
type: "warning" as const,
34+
icon: BarChart3
35+
},
36+
{
37+
id: "4",
38+
user: { name: "Ayşe Özkan", initials: "AÖ" },
39+
action: "Yeni kullanıcı ekledi",
40+
target: "Ekip Üyesi Kaydı",
41+
time: "3 saat önce",
42+
type: "success" as const,
43+
icon: Users
44+
},
45+
{
46+
id: "5",
47+
user: { name: "Ali Arslan", initials: "AA" },
48+
action: "Güvenlik ayarları değiştirildi",
49+
target: "2FA Aktivasyonu",
50+
time: "4 saat önce",
51+
type: "info" as const,
52+
icon: Shield
53+
}
54+
];
55+
56+
const criticalActivities = [
57+
{
58+
id: "6",
59+
user: { name: "Sistem", initials: "SY" },
60+
action: "Kritik hata tespit edildi",
61+
target: "Database Connection",
62+
time: "Az önce",
63+
type: "error" as const,
64+
icon: Zap
65+
},
66+
{
67+
id: "7",
68+
user: { name: "Sistem", initials: "SY" },
69+
action: "Backup işlemi başarısız",
70+
target: "Günlük Yedekleme",
71+
time: "10 dakika önce",
72+
type: "warning" as const,
73+
icon: Settings
74+
}
75+
];
76+
77+
return (
78+
<>
79+
<Helmet>
80+
<title>Aktivite Akışları - CodeMaze Admin</title>
81+
<meta name="description" content="Gerçek zamanlı aktivite takibi ve bildirim sistemi" />
82+
</Helmet>
83+
84+
<div className="space-y-8">
85+
<div className="text-center space-y-4">
86+
<h1 className="text-4xl font-bold tracking-tight bg-gradient-to-r from-primary to-primary/60 bg-clip-text text-transparent">
87+
Aktivite Akışları
88+
</h1>
89+
<p className="text-xl text-muted-foreground max-w-2xl mx-auto">
90+
Gerçek zamanlı kullanıcı aktiviteleri ve sistem olaylarını takip edin
91+
</p>
92+
</div>
93+
94+
<div className="grid gap-6 lg:grid-cols-2">
95+
<section className="space-y-4">
96+
<div className="flex items-center gap-2">
97+
<h2 className="text-2xl font-semibold">Genel Aktiviteler</h2>
98+
<Badge variant="secondary">Canlı</Badge>
99+
</div>
100+
<ActivityFeed
101+
activities={activities}
102+
title="Kullanıcı Aktiviteleri"
103+
/>
104+
</section>
105+
106+
<section className="space-y-4">
107+
<div className="flex items-center gap-2">
108+
<h2 className="text-2xl font-semibold">Kritik Olaylar</h2>
109+
<Badge variant="destructive">Acil</Badge>
110+
</div>
111+
<ActivityFeed
112+
activities={criticalActivities}
113+
title="Sistem Uyarıları"
114+
/>
115+
</section>
116+
</div>
117+
118+
<section className="space-y-4">
119+
<h2 className="text-2xl font-semibold">Özellikler</h2>
120+
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
121+
<Card>
122+
<CardHeader>
123+
<CardTitle>Gerçek Zamanlı</CardTitle>
124+
</CardHeader>
125+
<CardContent>
126+
<p className="text-muted-foreground">Anlık aktivite güncellemeleri</p>
127+
</CardContent>
128+
</Card>
129+
<Card>
130+
<CardHeader>
131+
<CardTitle>Tip Kategorileri</CardTitle>
132+
</CardHeader>
133+
<CardContent>
134+
<p className="text-muted-foreground">Success, Info, Warning, Error türleri</p>
135+
</CardContent>
136+
</Card>
137+
<Card>
138+
<CardHeader>
139+
<CardTitle>Kullanıcı Avatarları</CardTitle>
140+
</CardHeader>
141+
<CardContent>
142+
<p className="text-muted-foreground">İnisiyaller ile otomatik avatar oluşturma</p>
143+
</CardContent>
144+
</Card>
145+
<Card>
146+
<CardHeader>
147+
<CardTitle>Zaman Gösterimi</CardTitle>
148+
</CardHeader>
149+
<CardContent>
150+
<p className="text-muted-foreground">Relative time formatting</p>
151+
</CardContent>
152+
</Card>
153+
<Card>
154+
<CardHeader>
155+
<CardTitle>İkon Desteği</CardTitle>
156+
</CardHeader>
157+
<CardContent>
158+
<p className="text-muted-foreground">Her aktivite için özel ikonlar</p>
159+
</CardContent>
160+
</Card>
161+
<Card>
162+
<CardHeader>
163+
<CardTitle>Hover Efektleri</CardTitle>
164+
</CardHeader>
165+
<CardContent>
166+
<p className="text-muted-foreground">Smooth animasyonlar ve geçişler</p>
167+
</CardContent>
168+
</Card>
169+
</div>
170+
</section>
171+
</div>
172+
</>
173+
);
174+
}

‎src/pages/showcase/Charts.tsx‎

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
import { Helmet } from "react-helmet-async";
2+
import { MetricChart } from "@/components/ui/metric-chart";
3+
import { Badge } from "@/components/ui/badge";
4+
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
5+
6+
export default function Charts() {
7+
const chartData = [
8+
{ label: "Ocak", value: 4500, color: "bg-blue-500" },
9+
{ label: "Şubat", value: 5200, color: "bg-green-500" },
10+
{ label: "Mart", value: 4800, color: "bg-purple-500" },
11+
{ label: "Nisan", value: 6100, color: "bg-orange-500" },
12+
{ label: "Mayıs", value: 6800, color: "bg-red-500" },
13+
{ label: "Haziran", value: 7200, color: "bg-indigo-500" }
14+
];
15+
16+
const salesData = [
17+
{ label: "Web", value: 12500, color: "bg-primary" },
18+
{ label: "Mobil", value: 8300, color: "bg-secondary" },
19+
{ label: "Desktop", value: 6200, color: "bg-accent" },
20+
{ label: "Tablet", value: 3400, color: "bg-muted" }
21+
];
22+
23+
const userGrowthData = [
24+
{ label: "Q1", value: 2500, color: "bg-emerald-500" },
25+
{ label: "Q2", value: 3200, color: "bg-emerald-600" },
26+
{ label: "Q3", value: 4100, color: "bg-emerald-700" },
27+
{ label: "Q4", value: 5800, color: "bg-emerald-800" }
28+
];
29+
30+
return (
31+
<>
32+
<Helmet>
33+
<title>Grafikler - CodeMaze Admin</title>
34+
<meta name="description" content="İnteraktif ve animasyonlu metric grafikleri" />
35+
</Helmet>
36+
37+
<div className="space-y-8">
38+
<div className="text-center space-y-4">
39+
<h1 className="text-4xl font-bold tracking-tight bg-gradient-to-r from-primary to-primary/60 bg-clip-text text-transparent">
40+
Metric Grafikleri
41+
</h1>
42+
<p className="text-xl text-muted-foreground max-w-2xl mx-auto">
43+
Verilerinizi görselleştirmek için güçlü ve esnek grafik bileşenleri
44+
</p>
45+
</div>
46+
47+
<section className="space-y-4">
48+
<div className="flex items-center gap-2">
49+
<h2 className="text-2xl font-semibold">Aylık Performans</h2>
50+
<Badge variant="default">Trend ↗</Badge>
51+
</div>
52+
<div className="grid gap-6 lg:grid-cols-1">
53+
<MetricChart
54+
title="Aylık Satış Performansı"
55+
data={chartData}
56+
total={34400}
57+
change={15.3}
58+
changeType="positive"
59+
/>
60+
</div>
61+
</section>
62+
63+
<section className="space-y-4">
64+
<div className="flex items-center gap-2">
65+
<h2 className="text-2xl font-semibold">Platform Dağılımı</h2>
66+
<Badge variant="secondary">Multi-Platform</Badge>
67+
</div>
68+
<div className="grid gap-6 lg:grid-cols-2">
69+
<MetricChart
70+
title="Satış Kanalları"
71+
data={salesData}
72+
total={30400}
73+
change={8.7}
74+
changeType="positive"
75+
/>
76+
<MetricChart
77+
title="Kullanıcı Büyümesi"
78+
data={userGrowthData}
79+
total={15600}
80+
change={-2.1}
81+
changeType="negative"
82+
/>
83+
</div>
84+
</section>
85+
86+
<section className="space-y-4">
87+
<h2 className="text-2xl font-semibold">Grafik Özellikleri</h2>
88+
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
89+
<Card>
90+
<CardHeader>
91+
<CardTitle>Hover Etkileşimi</CardTitle>
92+
</CardHeader>
93+
<CardContent>
94+
<p className="text-muted-foreground">Bar üzerine gelince detaylı bilgi gösterimi</p>
95+
</CardContent>
96+
</Card>
97+
<Card>
98+
<CardHeader>
99+
<CardTitle>Animasyonlu Yükleme</CardTitle>
100+
</CardHeader>
101+
<CardContent>
102+
<p className="text-muted-foreground">Barlar yumuşak animasyonla yüklenir</p>
103+
</CardContent>
104+
</Card>
105+
<Card>
106+
<CardHeader>
107+
<CardTitle>Toplam Hesaplama</CardTitle>
108+
</CardHeader>
109+
<CardContent>
110+
<p className="text-muted-foreground">Otomatik toplam ve yüzde hesaplaması</p>
111+
</CardContent>
112+
</Card>
113+
<Card>
114+
<CardHeader>
115+
<CardTitle>Trend Göstergesi</CardTitle>
116+
</CardHeader>
117+
<CardContent>
118+
<p className="text-muted-foreground">Pozitif/negatif değişim gösterimi</p>
119+
</CardContent>
120+
</Card>
121+
<Card>
122+
<CardHeader>
123+
<CardTitle>Renk Kodlama</CardTitle>
124+
</CardHeader>
125+
<CardContent>
126+
<p className="text-muted-foreground">Her veri serisi için özel renkler</p>
127+
</CardContent>
128+
</Card>
129+
<Card>
130+
<CardHeader>
131+
<CardTitle>Responsive Tasarım</CardTitle>
132+
</CardHeader>
133+
<CardContent>
134+
<p className="text-muted-foreground">Tüm ekran boyutlarında uyumlu</p>
135+
</CardContent>
136+
</Card>
137+
</div>
138+
</section>
139+
</div>
140+
</>
141+
);
142+
}

0 commit comments

Comments
 (0)