81 lines
2.6 KiB
PHP
81 lines
2.6 KiB
PHP
<!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">
|
|
<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>
|
|
|
|
</body>
|
|
</html> |