Compare commits
3 Commits
feature/se
...
d55620f70a
| Author | SHA1 | Date | |
|---|---|---|---|
|
d55620f70a | ||
|
|
3af2939e40 | ||
|
|
8faa7ab974 |
43
app/View/Components/Button.php
Normal file
43
app/View/Components/Button.php
Normal file
@@ -0,0 +1,43 @@
|
||||
<?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';
|
||||
|
||||
$variants = [
|
||||
'primary' => 'bg-primary text-text-inverted hover:bg-blue-700',
|
||||
'secondary' => 'bg-secondary text-text hover:bg-gray-300',
|
||||
'outline' => 'border border-primary text-primary hover:bg-red-700',
|
||||
];
|
||||
|
||||
$disabled = 'disabled:bg-gray-300 disabled:text-gray-500 disabled:cursor-not-allowed disabled:opacity-60';
|
||||
|
||||
return trim(
|
||||
$base . ' ' .
|
||||
($variants[$this->variant] ?? $variants['primary']) . ' ' .
|
||||
$disabled
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the view / contents that represent the component.
|
||||
*/
|
||||
public function render(): View|Closure|string
|
||||
{
|
||||
return view('components.button');
|
||||
}
|
||||
}
|
||||
@@ -8,4 +8,32 @@
|
||||
@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;
|
||||
|
||||
/* 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