Initial Commit

resources/views/components/button.blade.php

@@ -0,0 +1,33 @@
+@props(['href' => false, 'type' => 'default'])
+
+@php
+
+switch($type) {
+case 'info':
+    $color = 'bg-blue-400 hover:bg-blue-500';
+    break;
+case 'success':
+    $color = 'bg-green-400 hover:bg-green-500';
+    break;
+case 'warning':
+    $color = 'bg-yellow-400 hover:bg-yellow-500';
+    break;
+case 'danger':
+    $color = 'bg-red-400 hover:bg-red-500';
+    break;
+default:
+    $color = 'bg-gray-400 hover:bg-gray-500';
+}
+
+if ($href) {
+    $element = 'a';
+    $attributes = $attributes->merge([ 'href' => $href ]);
+} else {
+    $element = 'button';
+}
+
+@endphp
+
+<{{$element}} {{ $attributes->merge(['class' => "inline-block px-4 py-2 rounded $color"]) }}>
+    {{ $slot }}
+</{{$element}}>

resources/views/components/card.blade.php

@@ -0,0 +1,37 @@
+@php
+$size = 'h-32 md:h-44 lg:h-52';
+
+$main_class = 'cursor-pointer relative transform-style-3d transition duration-500';
+$base_class = "absolute backface-hidden flex items-center justify-center border w-full $size transition duration-500 px-4 py-2";
+$frontface_class = "$base_class z-10 bg-gray-100 hover:bg-gray-200 rotate-y-0 transform hover:scale-105";
+$backface_class = "$base_class rotate-y-180";
+
+if ($flipped) {
+    $main_class .= ' rotate-y-180';
+}
+
+if ($win) {
+    $backface_class .= ' bg-green-300 hover:bg-green-400';
+} else {
+    $backface_class .= ' bg-blue-300 hover:bg-blue-400';
+}
+
+@endphp
+
+<div class="{{ $size }} perspective">
+    <div {!! $attributes->merge(['class' => $main_class]) !!}>
+
+        {{-- Card frontface --}}
+        <div class="{{ $frontface_class }}">
+            <h2 class="absolute top-1 left-2 text-xl text-gray-600">#{{ $number }}</h2>
+            <p>
+                <x-card-text :card="$card" />
+            </p>
+        </div>
+
+        {{-- Card backface --}}
+        <div class="{{ $backface_class }}">
+            <img src="{{ url('img/logo.png') }}" />
+        </div>
+    </div>
+</div>

resources/views/components/form-section.blade.php

@@ -0,0 +1,3 @@
+<div {!! $attributes->merge(['class' => "px-4 py-2 border rounded"]) !!}>
+    {{ $slot }}
+</div>

resources/views/components/modal.blade.php

@@ -0,0 +1,22 @@
+@props(['opacity' => '75'])
+
+@php
+switch($opacity) {
+case 'light':
+    $opacity = "opacity-25";
+    break;
+case 'medium':
+    $opacity = "opacity-50";
+    break;
+case 'full':
+default:
+    $opacity = "opacity-75";
+}
+@endphp
+
+<div {{ $attributes->merge(['class' => 'fixed top-0 left-0 w-screen h-screen flex justify-center items-center z-50']) }}>
+    <div class="absolute h-full w-full bg-black {{ $opacity }}"></div>
+    <div class="relative p-12 bg-white rounded flex flex-col justify-center z-9999">
+        {{ $slot }}
+    </div>
+</div>