pcabral/kazi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feature/setup #2

Merged
pcabral merged 4 commits from feature/setup into main 2026-07-02 12:02:41 +02:00
Conversation 0 Commits 4 Files Changed 13 +288
13 changed files with 288 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 9c7098106f - Show all commits

72
resources/views/storybook/index.blade.php
View File

@@ -10,72 +10,10 @@
<h1 class="text-3xl font-bold">Storybook</h1>
<!-- COLOURS -->
<section class="space-y-4">
<h2 class="text-xl font-semibold">Colors</h2>
<div class="grid grid-cols-3 gap-4">
<div class="p-4 bg-primary text-text-inverted rounded">Primary</div>
<div class="p-4 bg-secondary text-black rounded">Secondary</div>
<div class="p-4 bg-surface border rounded">Surface</div>
</div>
</section>
<!-- BUTTONS -->
<section class="space-y-4">
<h2 class="text-xl font-semibold">Buttons</h2>
<h3 class="text-l font-semibold">Enabled</h3>
<div class="flex gap-4">
<x-button onclick="alert('Default was clicked!')">Default</x-button>
<x-button variant="primary" onclick="alert('Primary was clicked!')">Primary</x-button>
<x-button variant="secondary" onclick="alert('Secondary was clicked!')">Secondary</x-button>
<x-button variant="outline" onclick="alert('Outline was clicked!')">Outline</x-button>
</div>
<h3 class="text-l font-semibold">Disabled</h3>
<div class="flex gap-4">
<x-button disabled>Default</x-button>
<x-button variant="primary" disabled>Primary</x-button>
<x-button variant="secondary" disabled>Secondary</x-button>
<x-button variant="outline" disabled>Outline</x-button>
</div>
</section>
<!-- CARDS -->
<section class="space-y-4">
<h2 class="text-xl font-semibold">Cards</h2>
<h3 class="text-l font-semibold">With Header</h3>
<x-card header="Card Header">
<p class="text-text-muted">This is a card component with header.</p>
</x-card>
<h3 class="text-l font-semibold">Without Header</h3>
<x-card>
<p class="text-text-muted">This is a card component without header.</p>
</x-card>
</section>
<!-- TYPOGRAPHY -->
<section class="space-y-2">
<h2 class="text-xl font-semibold">Typography</h2>
<p class="text-text">Default text</p>
<p class="text-text-muted">Muted text</p>
<p class="text-primary">Primary text</p>
</section>
@include('storybook.sections.colours')
@include('storybook.sections.buttons')
@include('storybook.sections.cards')
@include('storybook.sections.typography')
</body>
</html>
</html>

30
resources/views/storybook/sections/buttons.blade.php Normal file
View File

@@ -0,0 +1,30 @@
<section class="space-y-4">
<h2 class="text-xl font-semibold">Buttons</h2>
<h3 class="text-l font-semibold">Enabled</h3>
<div class="flex gap-4">
<x-button onclick="alert('Default was clicked!')">Default</x-button>
<x-button variant="primary" onclick="alert('Primary was clicked!')">Primary</x-button>
<x-button variant="secondary" onclick="alert('Secondary was clicked!')">Secondary</x-button>
<x-button variant="outline" onclick="alert('Outline was clicked!')">Outline</x-button>
</div>
<h3 class="text-l font-semibold">Disabled</h3>
<div class="flex gap-4">
<x-button disabled>Default</x-button>
<x-button variant="primary" disabled>Primary</x-button>
<x-button variant="secondary" disabled>Secondary</x-button>
<x-button variant="outline" disabled>Outline</x-button>
</div>
</section>

13
resources/views/storybook/sections/cards.blade.php Normal file
View File

@@ -0,0 +1,13 @@
<section class="space-y-4">
<h2 class="text-xl font-semibold">Cards</h2>
<h3 class="text-l font-semibold">With Header</h3>
<x-card header="Card Header">
<p class="text-text-muted">This is a card component with header.</p>
</x-card>
<h3 class="text-l font-semibold">Without Header</h3>
<x-card>
<p class="text-text-muted">This is a card component without header.</p>
</x-card>
</section>

9
resources/views/storybook/sections/colours.blade.php Normal file
View File

@@ -0,0 +1,9 @@
<section class="space-y-4">
<h2 class="text-xl font-semibold">Colors</h2>
<div class="grid grid-cols-3 gap-4">
<div class="p-4 bg-primary text-text-inverted rounded">Primary</div>
<div class="p-4 bg-secondary text-black rounded">Secondary</div>
<div class="p-4 bg-surface border rounded">Surface</div>
</div>
</section>

7
resources/views/storybook/sections/typography.blade.php Normal file
View File

@@ -0,0 +1,7 @@
<section class="space-y-2">
<h2 class="text-xl font-semibold">Typography</h2>
<p class="text-text">Default text</p>
<p class="text-text-muted">Muted text</p>
<p class="text-primary">Primary text</p>
</section>