filipriec/kompress_eshop
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

penguinui is now in the root dir in penguinui-components/

Browse Source
This commit is contained in:
Priec
2026-06-18 10:21:29 +02:00
parent 0a619517b6
commit ee944ed5ce
181 changed files with 7699 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
penguinui-components/table/default-table.html Normal file
View File

@@ -0,0 +1,32 @@
<div class="overflow-hidden w-full overflow-x-auto rounded-radius border border-outline dark:border-outline-dark">
<table class="w-full text-left text-sm text-on-surface dark:text-on-surface-dark">
<thead class="border-b border-outline bg-surface-alt text-sm text-on-surface-strong dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark-strong">
<tr>
<th scope="col" class="p-4">CustomerID</th>
<th scope="col" class="p-4">Name</th>
<th scope="col" class="p-4">Email</th>
<th scope="col" class="p-4">Membership</th>
</tr>
</thead>
<tbody class="divide-y divide-outline dark:divide-outline-dark">
<tr>
<td class="p-4">2335</td>
<td class="p-4">Alice Brown</td>
<td class="p-4">alice.brown@gmail.com</td>
<td class="p-4">Silver</td>
</tr>
<tr>
<td class="p-4">2338</td>
<td class="p-4">Bob Johnson</td>
<td class="p-4">johnson.bob@outlook.com</td>
<td class="p-4">Gold</td>
</tr>
<tr>
<td class="p-4">2342</td>
<td class="p-4">Sarah Adams</td>
<td class="p-4">s.adams@gmail.com</td>
<td class="p-4">Gold</td>
</tr>
</tbody>
</table>
</div>

50
penguinui-components/table/striped-table.html Normal file
View File

@@ -0,0 +1,50 @@
<div class="overflow-hidden w-full overflow-x-auto rounded-radius border border-outline dark:border-outline-dark">
<table class="w-full text-left text-sm text-on-surface dark:text-on-surface-dark">
<thead class="border-b border-outline bg-surface-alt text-sm text-on-surface-strong dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark-strong">
<tr>
<th scope="col" class="p-4">CustomerID</th>
<th scope="col" class="p-4">Name</th>
<th scope="col" class="p-4">Email</th>
<th scope="col" class="p-4">Membership</th>
</tr>
</thead>
<tbody class="divide-y divide-outline dark:divide-outline-dark">
<tr class="even:bg-primary/5 dark:even:bg-primary-dark/10">
<td class="p-4">2335</td>
<td class="p-4">Alice Brown</td>
<td class="p-4">alice.brown@penguinui.com</td>
<td class="p-4">Silver</td>
</tr>
<tr class="even:bg-primary/5 dark:even:bg-primary-dark/10">
<td class="p-4">2338</td>
<td class="p-4">Bob Johnson</td>
<td class="p-4">johnson.bob@penguinui.com</td>
<td class="p-4">Gold</td>
</tr>
<tr class="even:bg-primary/5 dark:even:bg-primary-dark/10">
<td class="p-4">2342</td>
<td class="p-4">Sarah Adams</td>
<td class="p-4">s.adams@penguinui.com</td>
<td class="p-4">Gold</td>
</tr>
<tr class="even:bg-primary/5 dark:even:bg-primary-dark/10">
<td class="p-4">2345</td>
<td class="p-4">Alex Martinez</td>
<td class="p-4">alex.martinez@penguinui.com</td>
<td class="p-4">Gold</td>
</tr>
<tr class="even:bg-primary/5 dark:even:bg-primary-dark/10">
<td class="p-4">2346</td>
<td class="p-4">Ryan Thompson</td>
<td class="p-4">ryan.thompson@penguinui.com</td>
<td class="p-4">Silver</td>
</tr>
<tr class="even:bg-primary/5 dark:even:bg-primary-dark/10">
<td class="p-4">2349</td>
<td class="p-4">Emily Rodriguez</td>
<td class="p-4">emily.rodriguez@penguinui.com</td>
<td class="p-4">Gold</td>
</tr>
</tbody>
</table>
</div>

32
penguinui-components/table/table-with-action.html Normal file
View File

@@ -0,0 +1,32 @@
<div class="overflow-hidden w-full overflow-x-auto rounded-radius border border-outline dark:border-outline-dark">
<table class="w-full text-left text-sm text-on-surface dark:text-on-surface-dark">
<thead class="border-b border-outline bg-surface-alt text-sm text-on-surface-strong dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark-strong">
<tr>
<th scope="col" class="p-4">CustomerID</th>
<th scope="col" class="p-4">Name</th>
<th scope="col" class="p-4">Email</th>
<th scope="col" class="p-4">Membership</th>
</tr>
</thead>
<tbody class="divide-y divide-outline dark:divide-outline-dark">
<tr>
<td class="p-4">2335</td>
<td class="p-4">Alice Brown</td>
<td class="p-4">alice.brown@gmail.com</td>
<td class="p-4"><button type="button" class="whitespace-nowrap rounded-radius bg-transparent p-0.5 font-semibold text-primary outline-primary hover:opacity-75 focus-visible:outline-2 focus-visible:outline-offset-2 active:opacity-100 active:outline-offset-0 dark:text-primary-dark dark:outline-primary-dark">Edit</button></td>
</tr>
<tr>
<td class="p-4">2338</td>
<td class="p-4">Bob Johnson</td>
<td class="p-4">johnson.bob@outlook.com</td>
<td class="p-4"><button type="button" class="whitespace-nowrap rounded-radius bg-transparent p-0.5 font-semibold text-primary outline-primary hover:opacity-75 focus-visible:outline-2 focus-visible:outline-offset-2 active:opacity-100 active:outline-offset-0 dark:text-primary-dark dark:outline-primary-dark">Edit</button></td>
</tr>
<tr>
<td class="p-4">2342</td>
<td class="p-4">Sarah Adams</td>
<td class="p-4">s.adams@gmail.com</td>
<td class="p-4"><button type="button" class="whitespace-nowrap rounded-radius bg-transparent p-0.5 font-semibold text-primary outline-primary hover:opacity-75 focus-visible:outline-2 focus-visible:outline-offset-2 active:opacity-100 active:outline-offset-0 dark:text-primary-dark dark:outline-primary-dark">Edit</button></td>
</tr>
</tbody>
</table>
</div>

72
penguinui-components/table/table-with-checkbox.html Normal file
View File

@@ -0,0 +1,72 @@
<div x-data="{ checkAll : false }" class="overflow-hidden w-full overflow-x-auto rounded-radius border border-outline dark:border-outline-dark">
<table class="w-full text-left text-sm text-on-surface dark:text-on-surface-dark">
<thead class="border-b border-outline bg-surface-alt text-on-surface-strong dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark-strong">
<tr>
<th scope="col" class="p-4">
<label for="checkAll" class="flex items-center text-on-surface dark:text-on-surface-dark ">
<div class="relative flex items-center">
<input type="checkbox" x-model="checkAll" id="checkAll" class="before:content[''] peer relative size-4 appearance-none overflow-hidden rounded border border-outline bg-surface before:absolute before:inset-0 checked:border-primary checked:before:bg-primary focus:outline-2 focus:outline-offset-2 focus:outline-outline-strong checked:focus:outline-primary active:outline-offset-0 dark:border-outline-dark dark:bg-surface-dark-alt dark:checked:border-primary-dark dark:checked:before:bg-primary-dark dark:focus:outline-outline-dark-strong dark:checked:focus:outline-primary-dark" />
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="4" class="pointer-events-none invisible absolute left-1/2 top-1/2 size-3 -translate-x-1/2 -translate-y-1/2 text-on-primary peer-checked:visible dark:text-on-primary-dark">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
</svg>
</div>
</label>
</th>
<th scope="col" class="p-4">CustomerID</th>
<th scope="col" class="p-4">Name</th>
<th scope="col" class="p-4">Email</th>
<th scope="col" class="p-4">Membership</th>
</tr>
</thead>
<tbody class="divide-y divide-outline dark:divide-outline-dark">
<tr>
<td class="p-4">
<label for="user2335" class="flex items-center text-on-surface dark:text-on-surface-dark ">
<div class="relative flex items-center">
<input type="checkbox" id="user2335" class="before:content[''] peer relative size-4 appearance-none overflow-hidden rounded border border-outline bg-surface before:absolute before:inset-0 checked:border-primary checked:before:bg-primary focus:outline-2 focus:outline-offset-2 focus:outline-outline-strong checked:focus:outline-primary active:outline-offset-0 dark:border-outline-dark dark:bg-surface-dark-alt dark:checked:border-primary-dark dark:checked:before:bg-primary-dark dark:focus:outline-outline-dark-strong dark:checked:focus:outline-primary-dark" :checked="checkAll" />
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="4" class="pointer-events-none invisible absolute left-1/2 top-1/2 size-3 -translate-x-1/2 -translate-y-1/2 text-on-primary peer-checked:visible dark:text-on-primary-dark">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
</svg>
</div>
</label>
</td>
<td class="p-4">2335</td>
<td class="p-4">Alice Brown</td>
<td class="p-4">alice.brown@gmail.com</td>
<td class="p-4"><button type="button" class="cursor-pointer whitespace-nowrap rounded-radius bg-transparent p-0.5 font-semibold text-primary outline-primary hover:opacity-75 focus-visible:outline-2 focus-visible:outline-offset-2 active:opacity-100 active:outline-offset-0 dark:text-primary-dark dark:outline-primary-dark">Edit</button></td>
</tr>
<tr>
<td class="p-4">
<label for="user2338" class="flex items-center text-on-surface dark:text-on-surface-dark ">
<div class="relative flex items-center">
<input type="checkbox" id="user2338" class="before:content[''] peer relative size-4 appearance-none overflow-hidden rounded border border-outline bg-surface before:absolute before:inset-0 checked:border-primary checked:before:bg-primary focus:outline-2 focus:outline-offset-2 focus:outline-outline-strong checked:focus:outline-primary active:outline-offset-0 dark:border-outline-dark dark:bg-surface-dark-alt dark:checked:border-primary-dark dark:checked:before:bg-primary-dark dark:focus:outline-outline-dark-strong dark:checked:focus:outline-primary-dark" :checked="checkAll" />
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="4" class="pointer-events-none invisible absolute left-1/2 top-1/2 size-3 -translate-x-1/2 -translate-y-1/2 text-on-primary peer-checked:visible dark:text-on-primary-dark">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
</svg>
</div>
</label>
</td>
<td class="p-4">2338</td>
<td class="p-4">Bob Johnson</td>
<td class="p-4">johnson.bob@outlook.com</td>
<td class="p-4"><button type="button" class="cursor-pointer whitespace-nowrap rounded-radius bg-transparent p-0.5 font-semibold text-primary outline-primary hover:opacity-75 focus-visible:outline-2 focus-visible:outline-offset-2 active:opacity-100 active:outline-offset-0 dark:text-primary-dark dark:outline-primary-dark">Edit</button></td>
</tr>
<tr>
<td class="p-4">
<label for="user2342" class="flex items-center text-on-surface dark:text-on-surface-dark ">
<div class="relative flex items-center">
<input type="checkbox" id="user2342" class="before:content[''] peer relative size-4 appearance-none overflow-hidden rounded border border-outline bg-surface before:absolute before:inset-0 checked:border-primary checked:before:bg-primary focus:outline-2 focus:outline-offset-2 focus:outline-outline-strong checked:focus:outline-primary active:outline-offset-0 dark:border-outline-dark dark:bg-surface-dark-alt dark:checked:border-primary-dark dark:checked:before:bg-primary-dark dark:focus:outline-outline-dark-strong dark:checked:focus:outline-primary-dark" :checked="checkAll" />
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="4" class="pointer-events-none invisible absolute left-1/2 top-1/2 size-3 -translate-x-1/2 -translate-y-1/2 text-on-primary peer-checked:visible dark:text-on-primary-dark">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
</svg>
</div>
</label>
</td>
<td class="p-4">2342</td>
<td class="p-4">Sarah Adams</td>
<td class="p-4">s.adams@gmail.com</td>
<td class="p-4"><button type="button" class="cursor-pointer whitespace-nowrap rounded-radius bg-transparent p-0.5 font-semibold text-primary outline-primary hover:opacity-75 focus-visible:outline-2 focus-visible:outline-offset-2 active:opacity-100 active:outline-offset-0 dark:text-primary-dark dark:outline-primary-dark">Edit</button></td>
</tr>
</tbody>
</table>
</div>

90
penguinui-components/table/users-table.html Normal file
View File

@@ -0,0 +1,90 @@
<div class="overflow-hidden w-full overflow-x-auto rounded-radius border border-outline dark:border-outline-dark">
<table class="w-full text-left text-sm text-on-surface dark:text-on-surface-dark">
<thead class="border-b border-outline bg-surface-alt text-sm text-on-surface-strong dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark-strong">
<tr>
<th scope="col" class="p-4">User</th>
<th scope="col" class="p-4">ID</th>
<th scope="col" class="p-4">Member Since</th>
<th scope="col" class="p-4">Status</th>
<th scope="col" class="p-4">Action</th>
</tr>
</thead>
<tbody class="divide-y divide-outline dark:divide-outline-dark">
<tr>
<td class="p-4">
<div class="flex w-max items-center gap-2">
<img class="size-10 rounded-full object-cover" src="https://penguinui.s3.amazonaws.com/component-assets/avatar-8.webp" alt="user avatar" />
<div class="flex flex-col">
<span class="text-neutral-900 dark:text-white">Alice Brown</span>
<span class="text-sm text-neutral-600 opacity-85 dark:text-neutral-300">alice.brown@gmail.com</span>
</div>
</div>
</td>
<td class="p-4">2335</td>
<td class="p-4">Nov 14, 2021</td>
<td class="p-4"><span class="inline-flex overflow-hidden rounded-radius border-success px-1 py-0.5 text-xs font-medium text-success bg-success/10">Active</span></td>
<td class="p-4"><button type="button" class="whitespace-nowrap rounded-radius bg-transparent p-0.5 font-semibold text-primary outline-primary hover:opacity-75 focus-visible:outline-2 focus-visible:outline-offset-2 active:opacity-100 active:outline-offset-0 dark:text-primary-dark dark:outline-primary-dark">Edit</button></td>
</tr>
<tr>
<td class="p-4">
<div class="flex w-max items-center gap-2">
<img class="size-10 rounded-full object-cover" src="https://penguinui.s3.amazonaws.com/component-assets/avatar-1.webp" alt="user avatar" />
<div class="flex flex-col">
<span class="text-neutral-900 dark:text-white">Bob Johnson</span>
<span class="text-sm text-neutral-600 opacity-85 dark:text-neutral-300">johnson.bob@penguinui.com</span>
</div>
</div>
</td>
<td class="p-4">2338</td>
<td class="p-4">Aug 20, 2020</td>
<td class="p-4"><span class="inline-flex overflow-hidden rounded-radius border-success px-1 py-0.5 text-xs font-medium text-success bg-success/10">Active</span></td>
<td class="p-4"><button type="button" class="whitespace-nowrap rounded-radius bg-transparent p-0.5 font-semibold text-primary outline-primary hover:opacity-75 focus-visible:outline-2 focus-visible:outline-offset-2 active:opacity-100 active:outline-offset-0 dark:text-primary-dark dark:outline-primary-dark">Edit</button></td>
</tr>
<tr>
<td class="p-4">
<div class="flex w-max items-center gap-2">
<img class="size-10 rounded-full object-cover" src="https://penguinui.s3.amazonaws.com/component-assets/avatar-2.webp" alt="user avatar" />
<div class="flex flex-col">
<span class="text-neutral-900 dark:text-white">Ryan Thompson</span>
<span class="text-sm text-neutral-600 opacity-85 dark:text-neutral-300">ryan.thompson@penguinui.com</span>
</div>
</div>
</td>
<td class="p-4">2346</td>
<td class="p-4">Feb 5, 2022</td>
<td class="p-4"><span class="inline-flex overflow-hidden rounded-radius border-danger px-1 py-0.5 text-xs font-medium text-danger bg-danger/10">Canceled</span></td>
<td class="p-4"><button type="button" class="whitespace-nowrap rounded-radius bg-transparent p-0.5 font-semibold text-primary outline-primary hover:opacity-75 focus-visible:outline-2 focus-visible:outline-offset-2 active:opacity-100 active:outline-offset-0 dark:text-primary-dark dark:outline-primary-dark">Edit</button></td>
</tr>
<tr>
<td class="p-4">
<div class="flex w-max items-center gap-2">
<img class="size-10 rounded-full object-cover" src="https://penguinui.s3.amazonaws.com/component-assets/avatar-4.webp" alt="user avatar" />
<div class="flex flex-col">
<span class="text-neutral-900 dark:text-white">Emily Rodriguez</span>
<span class="text-sm text-neutral-600 opacity-85 dark:text-neutral-300">emily.rodriguez@penguinui.com</span>
</div>
</div>
</td>
<td class="p-4">2349</td>
<td class="p-4">Jun 14, 2022</td>
<td class="p-4"><span class="inline-flex overflow-hidden rounded-radius border-success px-1 py-0.5 text-xs font-medium text-success bg-success/10">Active</span></td>
<td class="p-4"><button type="button" class="whitespace-nowrap rounded-radius bg-transparent p-0.5 font-semibold text-primary outline-primary hover:opacity-75 focus-visible:outline-2 focus-visible:outline-offset-2 active:opacity-100 active:outline-offset-0 dark:text-primary-dark dark:outline-primary-dark">Edit</button></td>
</tr>
<tr>
<td class="p-4">
<div class="flex w-max items-center gap-2">
<img class="size-10 rounded-full object-cover" src="https://penguinui.s3.amazonaws.com/component-assets/avatar-7.webp" alt="user avatar" />
<div class="flex flex-col">
<span class="text-neutral-900 dark:text-white">Alex Martinez</span>
<span class="text-sm text-neutral-600 opacity-85 dark:text-neutral-300">alex.martinez@penguinui.com</span>
</div>
</div>
</td>
<td class="p-4">2345</td>
<td class="p-4">Sep 17, 2018</td>
<td class="p-4"><span class="inline-flex overflow-hidden rounded-radius border-success px-1 py-0.5 text-xs font-medium text-success bg-success/10">Active</span></td>
<td class="p-4"><button type="button" class="whitespace-nowrap rounded-radius bg-transparent p-0.5 font-semibold text-primary outline-primary hover:opacity-75 focus-visible:outline-2 focus-visible:outline-offset-2 active:opacity-100 active:outline-offset-0 dark:text-primary-dark dark:outline-primary-dark">Edit</button></td>
</tr>
</tbody>
</table>
</div>