pcabral/kazi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: pcabral:main
Branches Tags
pcabral:main pcabral:feature/setup
...
compare: pcabral:d55620f70a737a18d4c0f6930b34a671bf6b28ed
Branches Tags
pcabral:feature/setup pcabral:main

2 Commits
main ... d55620f70a

Author SHA1 Message Date
Pedro Cabral
d55620f70a WIP: added button component 
improve disabled and hover states
 2026-04-21 14:33:46 +02:00
Pedro Cabral
3af2939e40 added storybook 2026-04-21 10:13:07 +02:00
4 changed files with 131 additions and 0 deletions
Expand all files Collapse all files

43
app/View/Components/Button.php Normal file
View 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
resources/views/components/button.blade.php Normal file
View File

@@ -0,0 +1,8 @@
<button
{{ $attributes
->merge(['class' => $classes()])
->merge(['disabled' => $disabled])
}}
>
{{ $slot }}
</button>

76
resources/views/storybook/index.blade.php Normal file
View 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>

4
routes/web.php
View File

@@ -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');