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 {
|
@theme {
|
||||||
--font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
|
--font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
|
||||||
'Segoe UI Symbol', 'Noto Color 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 () {
|
Route::get('/', function () {
|
||||||
return view('welcome');
|
return view('welcome');
|
||||||
});
|
});
|
||||||
|
|
||||||
|
Route::get('/storybook', function () {
|
||||||
|
return view('storybook.index');
|
||||||
|
})->name('storybook');
|
||||||
|
|||||||
Reference in New Issue
Block a user