Compare commits
3 Commits
main
...
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');
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -19,6 +19,9 @@
|
|||||||
--color-secondary-light: #FCD34D;
|
--color-secondary-light: #FCD34D;
|
||||||
--color-secondary-dark: #B45309;
|
--color-secondary-dark: #B45309;
|
||||||
|
|
||||||
|
/* OUTLINE */
|
||||||
|
--color-outline: rgba(0, 0, 0 ,0);
|
||||||
|
|
||||||
/* BACKGROUND */
|
/* BACKGROUND */
|
||||||
--color-background: #F8FAFC;
|
--color-background: #F8FAFC;
|
||||||
--color-background-dark: #E2E8F0;
|
--color-background-dark: #E2E8F0;
|
||||||
|
|||||||
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