Skip to content

Commit 4966335

Browse files
chrisbbreuerchrisbbreuer
committed
chore: wip
1 parent b395ef0 commit 4966335

File tree

1 file changed

+72
-74
lines changed

1 file changed

+72
-74
lines changed

‎resources/views/dashboard/packages/index.vue

Lines changed: 72 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -216,7 +216,7 @@ const getPackageUrl = (pkgName: string) => `https://github.com/stacksjs/${pkgNam
216216
<div class="i-heroicons-bug-ant h-6 w-6 text-white" />
217217
</div>
218218
<p class="ml-16 truncate text-sm text-gray-500 font-medium">
219-
Total New Issues
219+
Total Issues
220220
</p>
221221
</dt>
222222
<dd class="ml-16 flex items-baseline pb-6 sm:pb-7">
@@ -229,9 +229,8 @@ const getPackageUrl = (pkgName: string) => `https://github.com/stacksjs/${pkgNam
229229
</div>
230230
</div>
231231

232-
<!-- Packages section -->
232+
<!-- Packages Table section -->
233233
<div class="px-4 pt-12 lg:px-8 sm:px-6">
234-
<!-- Header -->
235234
<div class="sm:flex sm:items-center">
236235
<div class="sm:flex-auto">
237236
<h1 class="text-base text-gray-900 font-semibold leading-6">
@@ -241,82 +240,81 @@ const getPackageUrl = (pkgName: string) => `https://github.com/stacksjs/${pkgNam
241240
A list of all the packages you are tracking.
242241
</p>
243242
</div>
244-
</div>
245-
246-
<!-- Package Grid -->
247-
<div class="mt-8 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
248-
<a v-for="pkg in packages"
249-
:key="pkg.name"
250-
:href="getPackageUrl(pkg.name)"
251-
target="_blank"
252-
rel="noopener"
253-
class="group block overflow-hidden rounded-lg bg-white shadow transition-all hover:shadow-md">
254-
<!-- Card Header with Background Image -->
255-
<div class="relative border-b border-gray-100 bg-gray-50 p-4 group-hover:bg-gray-100">
256-
<div
257-
class="absolute inset-0 bg-cover bg-center opacity-4 blur-sm group-hover:opacity-5 group-hover:blur-none transition-all"
258-
:style="{
259-
backgroundImage: `url('https://repository-images.githubusercontent.com/767342709/66064336-425f-42d4-8c9f-9d6a937cfa98')`
260-
}"
261-
/>
262-
<div class="relative z-10">
263-
<div class="flex items-center justify-between">
264-
<div>
265-
<h3 class="text-lg text-gray-900 font-semibold">{{ pkg.name }}</h3>
266-
<p class="text-sm text-gray-500">
267-
{{ pkg.version }}
268-
<span class="mx-2 text-gray-300">•</span>
269-
{{ pkg.codename }}
270-
</p>
271-
</div>
272-
<div class="i-heroicons-cube h-6 w-6 text-blue-500" />
273-
</div>
274-
<p class="mt-2 text-sm text-gray-600 truncate max-w-[310px]">{{ pkg.description }}</p>
275-
</div>
276-
</div>
277-
278-
<!-- Card Content -->
279-
<div class="p-4">
280-
<!-- Metrics -->
281-
<div class="flex items-center justify-between">
282-
<div class="flex items-center gap-1">
283-
<div class="i-heroicons-arrow-down-tray h-4 w-4 text-gray-400 group-hover:text-blue-500 transition-colors" />
284-
<p class="font-semibold">{{ pkg.downloads.toLocaleString() }}</p>
285-
</div>
286-
287-
<div class="flex items-center gap-1">
288-
<div class="i-heroicons-bug-ant h-4 w-4 text-gray-400 group-hover:text-orange-500 transition-colors" />
289-
<p class="font-semibold">{{ pkg.issues }}</p>
290-
</div>
291243

292-
<div class="flex items-center gap-1">
293-
<div class="i-heroicons-users h-4 w-4 text-gray-400 group-hover:text-green-500 transition-colors" />
294-
<p class="font-semibold">{{ pkg.contributors }}</p>
295-
</div>
244+
<div class="mt-4 sm:ml-16 sm:mt-0 sm:flex-none">
245+
<button type="button" class="block rounded-md bg-blue-600 px-3 py-2 text-center text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600">
246+
Add Package
247+
</button>
248+
</div>
249+
</div>
296250

297-
<div class="flex items-center gap-1">
298-
<div class="i-heroicons-star h-4 w-4 text-gray-400 group-hover:text-yellow-500 transition-colors" />
299-
<p class="font-semibold">{{ pkg.stars.toLocaleString() }}</p>
300-
</div>
301-
</div>
251+
<div class="mt-8 flow-root">
252+
<div class="overflow-x-auto -mx-4 -my-2 lg:-mx-8 sm:-mx-6">
253+
<div class="inline-block min-w-full py-2 align-middle lg:px-8 sm:px-6">
254+
<div class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 sm:rounded-lg">
255+
<table class="min-w-full divide-y divide-gray-300">
256+
<thead class="bg-gray-50">
257+
<tr>
258+
<th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm text-gray-900 font-semibold sm:pl-6">
259+
Package
260+
</th>
261+
<th scope="col" class="px-3 py-3.5 text-left text-sm text-gray-900 font-semibold">
262+
Description
263+
</th>
264+
<th scope="col" class="px-3 py-3.5 text-left text-sm text-gray-900 font-semibold">
265+
Version
266+
</th>
267+
<th scope="col" class="px-3 py-3.5 text-left text-sm text-gray-900 font-semibold">
268+
Downloads
269+
</th>
270+
<th scope="col" class="px-3 py-3.5 text-left text-sm text-gray-900 font-semibold">
271+
Size
272+
</th>
273+
<th scope="col" class="px-3 py-3.5 text-left text-sm text-gray-900 font-semibold">
274+
Created At
275+
</th>
276+
<th scope="col" class="relative py-3.5 pl-3 pr-4 sm:pr-6">
277+
<span class="sr-only">View</span>
278+
</th>
279+
</tr>
280+
</thead>
302281

303-
<!-- Details -->
304-
<div class="mt-4 space-y-2">
305-
<div class="flex items-center justify-between text-sm">
306-
<span class="text-gray-500">Size:</span>
307-
<span class="font-mono">{{ pkg.size }}</span>
308-
</div>
309-
<div class="flex items-center justify-between text-sm">
310-
<span class="text-gray-500">Path:</span>
311-
<span class="font-mono text-right truncate max-w-[240px]" :title="pkg.path">{{ pkg.path }}</span>
312-
</div>
313-
<div class="flex items-center justify-between text-sm">
314-
<span class="text-gray-500">Created:</span>
315-
<span>{{ pkg.createdAt }}</span>
316-
</div>
282+
<tbody class="bg-white divide-y divide-gray-200">
283+
<tr v-for="pkg in packages" :key="pkg.name">
284+
<td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm sm:pl-6">
285+
<div class="flex items-center">
286+
<div>
287+
<div class="font-medium text-gray-900">{{ pkg.name }}</div>
288+
<div class="text-gray-500">{{ pkg.codename }}</div>
289+
</div>
290+
</div>
291+
</td>
292+
<td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 max-w-md truncate">
293+
{{ pkg.description }}
294+
</td>
295+
<td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
296+
{{ pkg.version }}
297+
</td>
298+
<td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
299+
{{ pkg.downloads.toLocaleString() }}
300+
</td>
301+
<td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 font-mono">
302+
{{ pkg.size }}
303+
</td>
304+
<td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
305+
{{ pkg.createdAt }}
306+
</td>
307+
<td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
308+
<a :href="getPackageUrl(pkg.name)" class="text-blue-600 hover:text-blue-900">
309+
View<span class="sr-only">, {{ pkg.name }} package</span>
310+
</a>
311+
</td>
312+
</tr>
313+
</tbody>
314+
</table>
317315
</div>
318316
</div>
319-
</a>
317+
</div>
320318
</div>
321319
</div>
322320
</div>

0 commit comments

Comments
 (0)