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

15
penguinui-components/avatar/avatar-with-border.html Normal file
View File

@@ -0,0 +1,15 @@
<!-- info Border Avatar -->
<img class="size-14 rounded-full border-2 border-info object-cover object-center p-0.5"
src="https://penguinui.s3.amazonaws.com/component-assets/avatar-8.webp" alt="Rounded avatar">
<!-- success Border Avatar -->
<img class="size-14 rounded-full border-2 border-success object-cover object-center p-0.5"
src="https://penguinui.s3.amazonaws.com/component-assets/avatar-8.webp" alt="Rounded avatar">
<!-- warning Border Avatar -->
<img class="size-14 rounded-full border-2 border-warning object-cover object-center p-0.5"
src="https://penguinui.s3.amazonaws.com/component-assets/avatar-8.webp" alt="Rounded avatar">
<!-- danger Border Avatar -->
<img class="size-14 rounded-full border-2 border-danger object-cover object-center p-0.5"
src="https://penguinui.s3.amazonaws.com/component-assets/avatar-8.webp" alt="Rounded avatar">

56
penguinui-components/avatar/avatar-with-icon-placeholder.html Normal file
View File

@@ -0,0 +1,56 @@
<!-- default Avatar -->
<span class="flex size-14 items-center justify-center overflow-hidden rounded-full border border-outline bg-surface-alt text-on-surface/50 dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark/50">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" fill="currentColor" class="w-full h-full mt-3">
<path fill-rule="evenodd" d="M7.5 6a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM3.751 20.105a8.25 8.25 0 0116.498 0 .75.75 0 01-.437.695A18.683 18.683 0 0112 22.5c-2.786 0-5.433-.608-7.812-1.7a.75.75 0 01-.437-.695z" clip-rule="evenodd"/>
</svg>
</span>
<!-- inverse Avatar -->
<span class="flex size-14 items-center justify-center overflow-hidden rounded-full border border-outline-dark bg-surface-dark-alt text-on-surface-dark/50 dark:border-outline dark:bg-surface-alt dark:text-on-surface/50">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" fill="currentColor" class="w-full h-full mt-3">
<path fill-rule="evenodd" d="M7.5 6a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM3.751 20.105a8.25 8.25 0 0116.498 0 .75.75 0 01-.437.695A18.683 18.683 0 0112 22.5c-2.786 0-5.433-.608-7.812-1.7a.75.75 0 01-.437-.695z" clip-rule="evenodd"/>
</svg>
</span>
<!-- primary Avatar -->
<span class="flex size-14 items-center justify-center overflow-hidden rounded-full border border-primary bg-primary text-on-primary/50 dark:border-primary-dark dark:bg-primary-dark dark:text-on-primary/50">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" fill="currentColor" class="w-full h-full mt-3">
<path fill-rule="evenodd" d="M7.5 6a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM3.751 20.105a8.25 8.25 0 0116.498 0 .75.75 0 01-.437.695A18.683 18.683 0 0112 22.5c-2.786 0-5.433-.608-7.812-1.7a.75.75 0 01-.437-.695z" clip-rule="evenodd"/>
</svg>
</span>
<!-- secondary Avatar -->
<span class="flex size-14 items-center justify-center overflow-hidden rounded-full border border-secondary bg-secondary text-on-secondary/50 dark:border-secondary-dark dark:bg-secondary-dark dark:text-on-secondary-dark/50">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" fill="currentColor" class="w-full h-full mt-3">
<path fill-rule="evenodd" d="M7.5 6a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM3.751 20.105a8.25 8.25 0 0116.498 0 .75.75 0 01-.437.695A18.683 18.683 0 0112 22.5c-2.786 0-5.433-.608-7.812-1.7a.75.75 0 01-.437-.695z" clip-rule="evenodd"/>
</svg>
</span>
<!-- info Avatar -->
<span class="flex size-14 items-center justify-center overflow-hidden rounded-full border border-info bg-info text-on-info/50">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" fill="currentColor" class="w-full h-full mt-3">
<path fill-rule="evenodd" d="M7.5 6a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM3.751 20.105a8.25 8.25 0 0116.498 0 .75.75 0 01-.437.695A18.683 18.683 0 0112 22.5c-2.786 0-5.433-.608-7.812-1.7a.75.75 0 01-.437-.695z" clip-rule="evenodd"/>
</svg>
</span>
<!-- success Avatar -->
<span class="flex size-14 items-center justify-center overflow-hidden rounded-full border border-success bg-success text-on-success/50">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" fill="currentColor" class="w-full h-full mt-3">
<path fill-rule="evenodd" d="M7.5 6a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM3.751 20.105a8.25 8.25 0 0116.498 0 .75.75 0 01-.437.695A18.683 18.683 0 0112 22.5c-2.786 0-5.433-.608-7.812-1.7a.75.75 0 01-.437-.695z" clip-rule="evenodd"/>
</svg>
</span>
<!-- warning Avatar -->
<span class="flex size-14 items-center justify-center overflow-hidden rounded-full border border-warning bg-warning text-on-warning/50">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" fill="currentColor" class="w-full h-full mt-3">
<path fill-rule="evenodd" d="M7.5 6a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM3.751 20.105a8.25 8.25 0 0116.498 0 .75.75 0 01-.437.695A18.683 18.683 0 0112 22.5c-2.786 0-5.433-.608-7.812-1.7a.75.75 0 01-.437-.695z" clip-rule="evenodd"/>
</svg>
</span>
<!-- danger Avatar -->
<span class="flex size-14 items-center justify-center overflow-hidden rounded-full border border-danger bg-danger text-on-danger/50">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" fill="currentColor" class="w-full h-full mt-3">
<path fill-rule="evenodd" d="M7.5 6a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM3.751 20.105a8.25 8.25 0 0116.498 0 .75.75 0 01-.437.695A18.683 18.683 0 0112 22.5c-2.786 0-5.433-.608-7.812-1.7a.75.75 0 01-.437-.695z" clip-rule="evenodd"/>
</svg>
</span>

24
penguinui-components/avatar/avatar-with-initials.html Normal file
View File

@@ -0,0 +1,24 @@
<!-- default Avatar -->
<span class="flex size-14 items-center justify-center overflow-hidden rounded-full border border-outline bg-surface-alt text-2xl font-bold tracking-wider text-on-surface/80 dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark/80">JS</span>
<!-- inverse Avatar -->
<span class="flex size-14 items-center justify-center overflow-hidden rounded-full border border-outline-dark bg-surface-dark-alt text-2xl font-bold tracking-wider text-on-surface-dark/80 dark:border-outline dark:bg-surface-alt dark:text-on-surface/80">JS</span>
<!-- primary Avatar -->
<span class="flex size-14 items-center justify-center overflow-hidden rounded-full border border-primary bg-primary text-2xl font-bold tracking-wider text-on-primary/80 dark:border-primary-dark dark:bg-primary-dark dark:text-on-primary/80">JS</span>
<!-- secondary Avatar -->
<span class="flex size-14 items-center justify-center overflow-hidden rounded-full border border-secondary bg-secondary text-2xl font-bold tracking-wider text-on-secondary/80 dark:border-secondary-dark dark:bg-secondary-dark dark:text-on-secondary-dark/80">JS</span>
<!-- info Avatar -->
<span class="flex size-14 items-center justify-center overflow-hidden rounded-full border border-info bg-info text-2xl font-bold tracking-wider text-on-info/80">JS</span>
<!-- success Avatar -->
<span class="flex size-14 items-center justify-center overflow-hidden rounded-full border border-success bg-success text-2xl font-bold tracking-wider text-on-success/80">JS</span>
<!-- warning Avatar -->
<span class="flex size-14 items-center justify-center overflow-hidden rounded-full border border-warning bg-warning text-2xl font-bold tracking-wider text-on-warning/80">JS</span>
<!-- danger Avatar -->
<span class="flex size-14 items-center justify-center overflow-hidden rounded-full border border-danger bg-danger text-2xl font-bold tracking-wider text-on-danger/80">JS</span>

35
penguinui-components/avatar/avatar-with-status.html Normal file
View File

@@ -0,0 +1,35 @@
<!-- Avatar - offline Status -->
<div class="relative w-fit">
<img class="size-14 rounded-full object-cover object-center" src="https://penguinui.s3.amazonaws.com/component-assets/avatar-8.webp" alt="Rounded avatar">
<span class="absolute size-4 bottom-0.5 end-0 rounded-full border-2 border-surface dark:border-surface-dark bg-outline dark:bg-outline-dark">
</span>
</div>
<!-- Avatar - info Status -->
<div class="relative w-fit">
<img class="size-14 rounded-full object-cover object-center" src="https://penguinui.s3.amazonaws.com/component-assets/avatar-8.webp" alt="Rounded avatar">
<span class="absolute size-4 bottom-0.5 end-0 rounded-full border-2 border-surface dark:border-surface-dark bg-info">
</span>
</div>
<!-- Avatar - success Status -->
<div class="relative w-fit">
<img class="size-14 rounded-full object-cover object-center" src="https://penguinui.s3.amazonaws.com/component-assets/avatar-8.webp" alt="Rounded avatar">
<span class="absolute size-4 bottom-0.5 end-0 rounded-full border-2 border-surface dark:border-surface-dark bg-success">
</span>
</div>
<!-- Avatar - warning Status -->
<div class="relative w-fit">
<img class="size-14 rounded-full object-cover object-center" src="https://penguinui.s3.amazonaws.com/component-assets/avatar-8.webp" alt="Rounded avatar">
<span class="absolute size-4 bottom-0.5 end-0 rounded-full border-2 border-surface dark:border-surface-dark bg-warning">
</span>
</div>
<!-- Avatar - danger Status -->
<div class="relative w-fit">
<img class="size-14 rounded-full object-cover object-center" src="https://penguinui.s3.amazonaws.com/component-assets/avatar-8.webp" alt="Rounded avatar">
<span class="absolute size-4 bottom-0.5 end-0 rounded-full border-2 border-surface dark:border-surface-dark bg-danger">
</span>
</div>

1
penguinui-components/avatar/default-avatar.html Normal file
View File

@@ -0,0 +1 @@
<img class="size-14 rounded-full object-cover" src="https://penguinui.s3.amazonaws.com/component-assets/avatar-8.webp" alt="Rounded avatar">

1
penguinui-components/avatar/square-avatar.html Normal file
View File

@@ -0,0 +1 @@
<img class="size-14 rounded-md object-cover" src="https://penguinui.s3.amazonaws.com/component-assets/avatar-8.webp" alt="Rounded avatar">

6
penguinui-components/avatar/stacked-avatars.html Normal file
View File

@@ -0,0 +1,6 @@
<div class="flex items-center -space-x-4">
<img class="size-14 rounded-full border-2 border-white object-cover dark:border-neutral-950" src="https://penguinui.s3.amazonaws.com/component-assets/avatar-8.webp" alt="Rounded avatar">
<img class="size-14 rounded-full border-2 border-white object-cover dark:border-neutral-950" src="https://penguinui.s3.amazonaws.com/component-assets/avatar-3.webp" alt="Rounded avatar">
<img class="size-14 rounded-full border-2 border-white object-cover dark:border-neutral-950" src="https://penguinui.s3.amazonaws.com/component-assets/avatar-5.webp" alt="Rounded avatar">
<img class="size-14 rounded-full border-2 border-white object-cover dark:border-neutral-950" src="https://penguinui.s3.amazonaws.com/component-assets/avatar-1.webp" alt="Rounded avatar">
</div>