431d533635
**Screenshot from story** **Light** <img width="949" alt="image" src="https://github.com/user-attachments/assets/b4a61e64-7c1d-408a-9009-13fa1ad43b67"> **Dark** <img width="949" alt="image" src="https://github.com/user-attachments/assets/21496540-aea5-4ca6-a92d-e7935b5e03d1">
37 lines
1.0 KiB
Vue
37 lines
1.0 KiB
Vue
<script setup>
|
|
import Avatar from './Avatar.vue';
|
|
</script>
|
|
|
|
<template>
|
|
<Story title="Components/Avatar" :layout="{ type: 'grid', width: '400' }">
|
|
<Variant title="Default">
|
|
<div class="p-4 bg-white dark:bg-slate-900">
|
|
<Avatar
|
|
src="https://api.dicebear.com/9.x/avataaars/svg?seed=Amaya"
|
|
class="bg-ruby-300 dark:bg-ruby-900"
|
|
/>
|
|
</div>
|
|
</Variant>
|
|
|
|
<Variant title="Different Sizes">
|
|
<div class="flex flex-wrap gap-4 p-4 bg-white dark:bg-slate-900">
|
|
<Avatar
|
|
src="https://api.dicebear.com/9.x/avataaars/svg?seed=Felix"
|
|
:size="48"
|
|
class="bg-green-300 dark:bg-green-900"
|
|
/>
|
|
<Avatar
|
|
:size="72"
|
|
src="https://api.dicebear.com/9.x/avataaars/svg?seed=Jade"
|
|
class="bg-indigo-300 dark:bg-indigo-900"
|
|
/>
|
|
<Avatar
|
|
src="https://api.dicebear.com/9.x/avataaars/svg?seed=Emery"
|
|
:size="96"
|
|
class="bg-woot-300 dark:bg-woot-900"
|
|
/>
|
|
</div>
|
|
</Variant>
|
|
</Story>
|
|
</template>
|