Skip to content

Commit f7e82ef

Browse files
MichaelninderMichaelninder
authored
Merge PR #6 from dev-branch
2 parents c6eebc6 + 844a986 commit f7e82ef

File tree

8 files changed

+411
-2
lines changed

8 files changed

+411
-2
lines changed

‎components/data-display/compact-stats-grid.html‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
2+
<div class="group rounded-xl border border-gray-200 bg-white p-4 transition-all hover:border-blue-300 dark:border-gray-800 dark:bg-gray-900 dark:hover:border-blue-900">
3+
<div class="flex items-center gap-3">
4+
<div class="flex size-10 shrink-0 items-center justify-center rounded-lg bg-blue-50 text-blue-600 dark:bg-blue-400/10 dark:text-blue-400">
5+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-5"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z" /></svg>
6+
</div>
7+
<div class="min-w-0 flex-1">
8+
<p class="truncate text-xs font-medium text-gray-500 dark:text-gray-400">Total Users</p>
9+
<div class="flex items-baseline gap-2">
10+
<p class="text-xl font-bold text-gray-900 dark:text-white">12,482</p>
11+
<span class="flex items-center text-[10px] font-bold text-green-600 dark:text-green-400">
12+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-3"><path fill-rule="evenodd" d="M10 17a.75.75 0 0 1-.75-.75V5.612L5.29 9.77a.75.75 0 0 1-1.08-1.04l5.25-5.5a.75.75 0 0 1 1.08 0l5.25 5.5a.75.75 0 1 1-1.08 1.04l-3.96-4.158V16.25A.75.75 0 0 1 10 17Z" clip-rule="evenodd" /></svg>
13+
12%
14+
</span>
15+
</div>
16+
</div>
17+
</div>
18+
</div>
19+
20+
<div class="group rounded-xl border border-gray-200 bg-white p-4 transition-all hover:border-purple-300 dark:border-gray-800 dark:bg-gray-900 dark:hover:border-purple-900">
21+
<div class="flex items-center gap-3">
22+
<div class="flex size-10 shrink-0 items-center justify-center rounded-lg bg-purple-50 text-purple-600 dark:bg-purple-400/10 dark:text-purple-400">
23+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v12m-3-2.818.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182C13.536 12.219 12.768 12 12 12c-.725 0-1.45-.22-2.003-.659-1.106-.879-1.106-2.303 0-3.182s2.9-.879 4.006 0l.415.33M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" /></svg>
24+
</div>
25+
<div class="min-w-0 flex-1">
26+
<p class="truncate text-xs font-medium text-gray-500 dark:text-gray-400">Revenue</p>
27+
<div class="flex items-baseline gap-2">
28+
<p class="text-xl font-bold text-gray-900 dark:text-white">$45,210</p>
29+
<span class="flex items-center text-[10px] font-bold text-red-600 dark:text-red-400">
30+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-3 rotate-180"><path fill-rule="evenodd" d="M10 17a.75.75 0 0 1-.75-.75V5.612L5.29 9.77a.75.75 0 0 1-1.08-1.04l5.25-5.5a.75.75 0 0 1 1.08 0l5.25 5.5a.75.75 0 1 1-1.08 1.04l-3.96-4.158V16.25A.75.75 0 0 1 10 17Z" clip-rule="evenodd" /></svg>
31+
3%
32+
</span>
33+
</div>
34+
</div>
35+
</div>
36+
</div>
37+
38+
<div class="group rounded-xl border border-gray-200 bg-white p-4 transition-all hover:border-orange-300 dark:border-gray-800 dark:bg-gray-900 dark:hover:border-orange-900">
39+
<div class="flex items-center gap-3">
40+
<div class="flex size-10 shrink-0 items-center justify-center rounded-lg bg-orange-50 text-orange-600 dark:bg-orange-400/10 dark:text-orange-400">
41+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-5"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18L9 11.25l4.306 4.307a11.95 11.95 0 015.814-5.519l2.74-1.22m0 0l-5.94-2.28m5.94 2.28l-2.28 5.94" /></svg>
42+
</div>
43+
<div class="min-w-0 flex-1">
44+
<p class="truncate text-xs font-medium text-gray-500 dark:text-gray-400">Growth</p>
45+
<div class="flex items-baseline gap-2">
46+
<p class="text-xl font-bold text-gray-900 dark:text-white">24.2%</p>
47+
<span class="flex items-center text-[10px] font-bold text-green-600 dark:text-green-400">
48+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-3"><path fill-rule="evenodd" d="M10 17a.75.75 0 0 1-.75-.75V5.612L5.29 9.77a.75.75 0 0 1-1.08-1.04l5.25-5.5a.75.75 0 0 1 1.08 0l5.25 5.5a.75.75 0 1 1-1.08 1.04l-3.96-4.158V16.25A.75.75 0 0 1 10 17Z" clip-rule="evenodd" /></svg>
49+
8%
50+
</span>
51+
</div>
52+
</div>
53+
</div>
54+
</div>
55+
</div>

‎components/data-display/other-stats-grid.html‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-10 text-gray-950">
2+
<div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100 flex items-center">
3+
<div class="p-3 rounded-lg bg-blue-50 text-blue-600 mr-4">
4+
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path></svg>
5+
</div>
6+
<div>
7+
<p class="text-sm font-medium text-gray-500">Bücher</p>
8+
<p class="text-2xl font-bold text-hv-admin-text">16</p>
9+
</div>
10+
</div>
11+
12+
<div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100 flex items-center">
13+
<div class="p-3 rounded-lg bg-emerald-50 text-emerald-600 mr-4">
14+
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"></path></svg>
15+
</div>
16+
<div>
17+
<p class="text-sm font-medium text-gray-500">Benutzer</p>
18+
<p class="text-2xl font-bold text-hv-admin-text">273</p>
19+
</div>
20+
</div>
21+
22+
<div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100 flex items-center">
23+
<div class="p-3 rounded-lg bg-purple-50 text-purple-600 mr-4">
24+
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>
25+
</div>
26+
<div>
27+
<p class="text-sm font-medium text-gray-500">Bestellungen</p>
28+
<p class="text-2xl font-bold text-hv-admin-text">469</p>
29+
</div>
30+
</div>
31+
32+
<div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100 flex items-center">
33+
<div class="p-3 rounded-lg bg-orange-50 text-orange-600 mr-4">
34+
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"></path></svg>
35+
</div>
36+
<div>
37+
<p class="text-sm font-medium text-gray-500">Stück bestellt</p>
38+
<p class="text-2xl font-bold text-hv-admin-text">519</p>
39+
</div>
40+
</div>
41+
</div>

‎components/data-display/simple-stats-grid.html‎

Lines changed: 172 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,172 @@
1+
<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
2+
<div
3+
class="group relative overflow-hidden rounded-2xl border border-gray-200 bg-white p-6 transition-all duration-200 hover:shadow-lg hover:shadow-gray-200/50 dark:border-gray-800 dark:bg-gray-900 dark:hover:border-gray-700 dark:hover:shadow-none"
4+
>
5+
<div class="flex items-center justify-between">
6+
<div class="flex items-center gap-4">
7+
<div
8+
class="flex size-12 items-center justify-center rounded-xl bg-blue-50 text-blue-600 transition-colors group-hover:bg-blue-100 dark:bg-blue-500/10 dark:text-blue-400 dark:group-hover:bg-blue-500/20"
9+
>
10+
<svg
11+
xmlns="http://www.w3.org/2000/svg"
12+
fill="none"
13+
viewBox="0 0 24 24"
14+
stroke-width="1.5"
15+
stroke="currentColor"
16+
class="size-6"
17+
>
18+
<path
19+
stroke-linecap="round"
20+
stroke-linejoin="round"
21+
d="M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z"
22+
/>
23+
</svg>
24+
</div>
25+
<div>
26+
<p class="text-xs font-semibold uppercase tracking-wider text-gray-500">
27+
Total Users
28+
</p>
29+
<p class="text-3xl font-bold tracking-tight text-gray-900 dark:text-white">
30+
12,482
31+
</p>
32+
</div>
33+
</div>
34+
</div>
35+
<div class="mt-6 flex items-center gap-2">
36+
<div
37+
class="flex items-center rounded-full bg-emerald-50 px-2 py-0.5 text-xs font-bold text-emerald-600 dark:bg-emerald-500/10 dark:text-emerald-400"
38+
>
39+
<svg
40+
xmlns="http://www.w3.org/2000/svg"
41+
viewBox="0 0 20 20"
42+
fill="currentColor"
43+
class="mr-0.5 size-3.5"
44+
>
45+
<path
46+
fill-rule="evenodd"
47+
d="M10 17a.75.75 0 0 1-.75-.75V5.612L5.29 9.77a.75.75 0 0 1-1.08-1.04l5.25-5.5a.75.75 0 0 1 1.08 0l5.25 5.5a.75.75 0 1 1-1.08 1.04l-3.96-4.158V16.25A.75.75 0 0 1 10 17Z"
48+
clip-rule="evenodd"
49+
/>
50+
</svg>
51+
12.5%
52+
</div>
53+
<span class="text-xs text-gray-400 dark:text-gray-500"
54+
>vs last month</span
55+
>
56+
</div>
57+
</div>
58+
59+
<div
60+
class="group relative overflow-hidden rounded-2xl border border-gray-200 bg-white p-6 transition-all duration-200 hover:shadow-lg hover:shadow-gray-200/50 dark:border-gray-800 dark:bg-gray-900 dark:hover:border-gray-700 dark:hover:shadow-none"
61+
>
62+
<div class="flex items-center justify-between">
63+
<div class="flex items-center gap-4">
64+
<div
65+
class="flex size-12 items-center justify-center rounded-xl bg-purple-50 text-purple-600 transition-colors group-hover:bg-purple-100 dark:bg-purple-500/10 dark:text-purple-400 dark:group-hover:bg-purple-500/20"
66+
>
67+
<svg
68+
xmlns="http://www.w3.org/2000/svg"
69+
fill="none"
70+
viewBox="0 0 24 24"
71+
stroke-width="1.5"
72+
stroke="currentColor"
73+
class="size-6"
74+
>
75+
<path
76+
stroke-linecap="round"
77+
stroke-linejoin="round"
78+
d="M12 6v12m-3-2.818.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182C13.536 12.219 12.768 12 12 12c-.725 0-1.45-.22-2.003-.659-1.106-.879-1.106-2.303 0-3.182s2.9-.879 4.006 0l.415.33M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
79+
/>
80+
</svg>
81+
</div>
82+
<div>
83+
<p class="text-xs font-semibold uppercase tracking-wider text-gray-500">
84+
Revenue
85+
</p>
86+
<p class="text-3xl font-bold tracking-tight text-gray-900 dark:text-white">
87+
$45,210
88+
</p>
89+
</div>
90+
</div>
91+
</div>
92+
<div class="mt-6 flex items-center gap-2">
93+
<div
94+
class="flex items-center rounded-full bg-rose-50 px-2 py-0.5 text-xs font-bold text-rose-600 dark:bg-rose-500/10 dark:text-rose-400"
95+
>
96+
<svg
97+
xmlns="http://www.w3.org/2000/svg"
98+
viewBox="0 0 20 20"
99+
fill="currentColor"
100+
class="mr-0.5 size-3.5 rotate-180"
101+
>
102+
<path
103+
fill-rule="evenodd"
104+
d="M10 17a.75.75 0 0 1-.75-.75V5.612L5.29 9.77a.75.75 0 0 1-1.08-1.04l5.25-5.5a.75.75 0 0 1 1.08 0l5.25 5.5a.75.75 0 1 1-1.08 1.04l-3.96-4.158V16.25A.75.75 0 0 1 10 17Z"
105+
clip-rule="evenodd"
106+
/>
107+
</svg>
108+
3.2%
109+
</div>
110+
<span class="text-xs text-gray-400 dark:text-gray-500"
111+
>vs last month</span
112+
>
113+
</div>
114+
</div>
115+
116+
<div
117+
class="group relative overflow-hidden rounded-2xl border border-gray-200 bg-white p-6 transition-all duration-200 hover:shadow-lg hover:shadow-gray-200/50 dark:border-gray-800 dark:bg-gray-900 dark:hover:border-gray-700 dark:hover:shadow-none"
118+
>
119+
<div class="flex items-center justify-between">
120+
<div class="flex items-center gap-4">
121+
<div
122+
class="flex size-12 items-center justify-center rounded-xl bg-orange-50 text-orange-600 transition-colors group-hover:bg-orange-100 dark:bg-orange-500/10 dark:text-orange-400 dark:group-hover:bg-orange-500/20"
123+
>
124+
<svg
125+
xmlns="http://www.w3.org/2000/svg"
126+
fill="none"
127+
viewBox="0 0 24 24"
128+
stroke-width="1.5"
129+
stroke="currentColor"
130+
class="size-6"
131+
>
132+
<path
133+
stroke-linecap="round"
134+
stroke-linejoin="round"
135+
d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z"
136+
/>
137+
</svg>
138+
</div>
139+
<div>
140+
<p class="text-xs font-semibold uppercase tracking-wider text-gray-500">
141+
Conversion
142+
</p>
143+
<p class="text-3xl font-bold tracking-tight text-gray-900 dark:text-white">
144+
4.8%
145+
</p>
146+
</div>
147+
</div>
148+
</div>
149+
<div class="mt-6 flex items-center gap-2">
150+
<div
151+
class="flex items-center rounded-full bg-emerald-50 px-2 py-0.5 text-xs font-bold text-emerald-600 dark:bg-emerald-500/10 dark:text-emerald-400"
152+
>
153+
<svg
154+
xmlns="http://www.w3.org/2000/svg"
155+
viewBox="0 0 20 20"
156+
fill="currentColor"
157+
class="mr-0.5 size-3.5"
158+
>
159+
<path
160+
fill-rule="evenodd"
161+
d="M10 17a.75.75 0 0 1-.75-.75V5.612L5.29 9.77a.75.75 0 0 1-1.08-1.04l5.25-5.5a.75.75 0 0 1 1.08 0l5.25 5.5a.75.75 0 1 1-1.08 1.04l-3.96-4.158V16.25A.75.75 0 0 1 10 17Z"
162+
clip-rule="evenodd"
163+
/>
164+
</svg>
165+
0.4%
166+
</div>
167+
<span class="text-xs text-gray-400 dark:text-gray-500"
168+
>vs last month</span
169+
>
170+
</div>
171+
</div>
172+
</div>

‎components/dropdowns/minimalist-command-dropdown.html‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<div class="relative inline-block text-left">
2+
<button
3+
type="button"
4+
class="flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-3 py-2 text-sm font-medium text-gray-700 shadow-sm transition-all hover:bg-gray-50 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-200 dark:hover:bg-gray-800"
5+
>
6+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5 text-gray-400">
7+
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
8+
</svg>
9+
<span>Menu</span>
10+
<kbd class="ml-2 hidden rounded bg-gray-100 px-1.5 py-0.5 text-[10px] font-semibold text-gray-500 dark:bg-gray-800 dark:text-gray-400 md:inline-block">⌘K</kbd>
11+
</button>
12+
13+
<div class="absolute right-0 z-50 mt-2 w-56 origin-top-right rounded-xl border border-gray-200 bg-white p-1 shadow-lg dark:border-gray-800 dark:bg-gray-900">
14+
<div class="px-2 py-1.5 text-[10px] font-semibold uppercase tracking-wider text-gray-400">Project</div>
15+
<a href="#" class="group flex items-center gap-3 rounded-lg px-2 py-1.5 text-sm text-gray-600 hover:bg-primary-50 hover:text-primary-600 dark:text-gray-400 dark:hover:bg-primary-900/20 dark:hover:text-primary-400">
16+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5 opacity-60 group-hover:opacity-100">
17+
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
18+
</svg>
19+
New Project
20+
</a>
21+
<a href="#" class="group flex items-center gap-3 rounded-lg px-2 py-1.5 text-sm text-gray-600 hover:bg-primary-50 hover:text-primary-600 dark:text-gray-400 dark:hover:bg-primary-900/20 dark:hover:text-primary-400">
22+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5 opacity-60 group-hover:opacity-100">
23+
<path stroke-linecap="round" stroke-linejoin="round" d="M16.5 3.75V16.5L12 14.25 7.5 16.5V3.75m9 0H18A2.25 2.25 0 0 1 20.25 6v12A2.25 2.25 0 0 1 18 20.25H6A2.25 2.25 0 0 1 3.75 18V6A2.25 2.25 0 0 1 6 3.75h1.5m9 0h-9" />
24+
</svg>
25+
Library
26+
</a>
27+
<div class="my-1 border-t border-gray-100 dark:border-gray-800"></div>
28+
<a href="#" class="group flex items-center gap-3 rounded-lg px-2 py-1.5 text-sm text-red-600 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-900/20">
29+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5 opacity-60 group-hover:opacity-100">
30+
<path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
31+
</svg>
32+
Delete Items
33+
</a>
34+
</div>
35+
</div>

0 commit comments

Comments
 (0)