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

added storybook

Browse Source
This commit is contained in:
Pedro Cabral
2026-04-21 10:13:07 +02:00
parent 8faa7ab974
commit 3af2939e40
2 changed files with 84 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
resources/views/storybook/index.blade.php Normal file
View File

@@ -0,0 +1,80 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Storybook</title>
@vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body class="bg-background text-text p-10 space-y-12">
<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">
<button class="bg-primary text-text-inverted px-4 py-2 rounded">
Primary
</button>
<button class="bg-secondary text-black px-4 py-2 rounded">
Secondary
</button>
<button class="border border-primary text-primary px-4 py-2 rounded">
Outline
</button>
</div>
<h3 class="text-l font-semibold">Disabled</h3>
<div class="flex gap-4">
<button class="bg-primary text-text-inverted px-4 py-2 rounded" disabled>
Primary
</button>
<button class="bg-secondary text-black px-4 py-2 rounded" disabled>
Secondary
</button>
<button class="border border-primary text-primary px-4 py-2 rounded" disabled>
Outline
</button>
</div>
</section>
<!-- CARDS -->
<section class="space-y-4">
<h2 class="text-xl font-semibold">Cards</h2>
<div class="bg-surface p-6 rounded shadow">
<h3 class="font-semibold">Card title</h3>
<p class="text-text-muted">This is a simple card component.</p>
</div>
</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>
</body>
</html>

4
routes/web.php
View File

@@ -5,3 +5,7 @@ use Illuminate\Support\Facades\Route;
Route::get('/', function () { Route::get('/', function () {
return view('welcome'); return view('welcome');
}); });
Route::get('/storybook', function () {
return view('storybook.index');
})->name('storybook');