Compare commits
3 Commits
1bc3e5f885
...
9e9f05abdf
| Author | SHA1 | Date | |
|---|---|---|---|
|
9e9f05abdf | ||
|
|
5ae25db82f | ||
|
|
cad935f64b |
58
app/View/Components/Button.php
Normal file
58
app/View/Components/Button.php
Normal file
@@ -0,0 +1,58 @@
|
||||
<?php
|
||||
|
||||
namespace App\View\Components;
|
||||
|
||||
use Closure;
|
||||
use Illuminate\Contracts\View\View;
|
||||
use Illuminate\View\Component;
|
||||
|
||||
class Button extends Component
|
||||
{
|
||||
|
||||
public function __construct(public string $variant = 'primary', public bool $disabled = false)
|
||||
{
|
||||
//
|
||||
}
|
||||
|
||||
public function classes(): string
|
||||
{
|
||||
$base = 'inline-flex items-center justify-center px-4 py-2 rounded-md text-sm font-medium transition ' .
|
||||
'duration-150 ease-in-out';
|
||||
|
||||
$classes = match ($this->variant) {
|
||||
'secondary' => [
|
||||
'base' => 'bg-secondary text-text',
|
||||
'hover' => 'hover:bg-secondary-dark',
|
||||
'disabled' => 'disabled:bg-secondary',
|
||||
],
|
||||
'outline' => [
|
||||
'base' => 'bg-outline border border-primary text-primary',
|
||||
'hover' => 'hover:bg-primary hover:text-text-inverted',
|
||||
'disabled' => 'disabled:bg-outline disabled:text-primary',
|
||||
],
|
||||
default => [
|
||||
'base' => 'bg-primary text-text-inverted',
|
||||
'hover' => 'hover:bg-primary-dark',
|
||||
'disabled' => 'disabled:bg-primary'
|
||||
]
|
||||
};
|
||||
|
||||
$baseDisabled = 'disabled:cursor-not-allowed disabled:opacity-60';
|
||||
|
||||
return trim(
|
||||
$base . ' ' .
|
||||
$classes['base'] . ' ' .
|
||||
$classes['hover'] . ' ' .
|
||||
$baseDisabled . ' ' .
|
||||
$classes['disabled']
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the view / contents that represent the component.
|
||||
*/
|
||||
public function render(): View|Closure|string
|
||||
{
|
||||
return view('components.button');
|
||||
}
|
||||
}
|
||||
@@ -8,4 +8,35 @@
|
||||
@theme {
|
||||
--font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
|
||||
'Segoe UI Symbol', 'Noto Color Emoji';
|
||||
|
||||
/* PRIMARY */
|
||||
--color-primary: #0F172A;
|
||||
--color-primary-light: #1E293B;
|
||||
--color-primary-dark: #020617;
|
||||
|
||||
/* SECONDARY */
|
||||
--color-secondary: #F59E0B;
|
||||
--color-secondary-light: #FCD34D;
|
||||
--color-secondary-dark: #B45309;
|
||||
|
||||
/* OUTLINE */
|
||||
--color-outline: rgba(0, 0, 0 ,0);
|
||||
|
||||
/* BACKGROUND */
|
||||
--color-background: #F8FAFC;
|
||||
--color-background-dark: #E2E8F0;
|
||||
|
||||
/* SURFACE */
|
||||
--color-surface: #FFFFFF;
|
||||
--color-surface-muted: #F1F5F9;
|
||||
|
||||
/* TEXT */
|
||||
--color-text: #0F172A;
|
||||
--color-text-muted: #64748B;
|
||||
--color-text-inverted: #FFFFFF;
|
||||
|
||||
/* STATES */
|
||||
--color-success: #22C55E;
|
||||
--color-warning: #F97316;
|
||||
--color-error: #EF4444;
|
||||
}
|
||||
|
||||
8
resources/views/components/button.blade.php
Normal file
8
resources/views/components/button.blade.php
Normal file
@@ -0,0 +1,8 @@
|
||||
<button
|
||||
{{ $attributes
|
||||
->merge(['class' => $classes()])
|
||||
->merge(['disabled' => $disabled])
|
||||
}}
|
||||
>
|
||||
{{ $slot }}
|
||||
</button>
|
||||
76
resources/views/storybook/index.blade.php
Normal file
76
resources/views/storybook/index.blade.php
Normal file
@@ -0,0 +1,76 @@
|
||||
<!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>Default</x-button>
|
||||
|
||||
<x-button variant="primary">Primary</x-button>
|
||||
|
||||
|
||||
<x-button variant="secondary">Secondary</x-button>
|
||||
|
||||
|
||||
<x-button variant="outline">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>
|
||||
|
||||
<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>
|
||||
@@ -5,3 +5,7 @@ use Illuminate\Support\Facades\Route;
|
||||
Route::get('/', function () {
|
||||
return view('welcome');
|
||||
});
|
||||
|
||||
Route::get('/storybook', function () {
|
||||
return view('storybook.index');
|
||||
})->name('storybook');
|
||||
|
||||
Reference in New Issue
Block a user