setting up front 1

2026-07-31 17:41:55 +03:00
parent b88fde739c
commit bf8b9219fc
48 changed files with 2250 additions and 11 deletions
@@ -0,0 +1,38 @@
+@props(['name' => 'quantity', 'value' => 1, 'min' => 1])
+
+<div
+    data-controller="quantity"
+    data-quantity-min-value="{{ $min }}"
+    class="inline-flex items-stretch gap-2"
+    role="group"
+    aria-label="Quantity"
+>
+    <input
+        type="number"
+        name="{{ $name }}"
+        id="{{ $name }}"
+        value="{{ $value }}"
+        min="{{ $min }}"
+        data-quantity-target="input"
+        data-action="change->quantity#clamp"
+        class="w-10 border border-black bg-transparent text-center font-display text-[19px] font-bold [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none focus:outline-none"
+        aria-label="Quantity"
+        {{ $attributes }}
+    >
+
+    <div class="flex flex-col -ml-px gap-2 justify-between">
+        <button
+            type="button"
+            data-action="click->quantity#increment"
+            class="w-10 aspect-square border border-black flex items-center justify-center leading-none font-bold text-xl hover:bg-black hover:text-neutral-200 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-black"
+            aria-label="Increase quantity"
+        >+</button>
+        <button
+            type="button"
+            data-action="click->quantity#decrement"
+            data-quantity-target="decrement"
+            class="aspect-square w-10 border border-black -mt-px flex items-center justify-center leading-none font-bold text-xl hover:bg-black hover:text-neutral-200 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-black disabled:opacity-30 disabled:cursor-not-allowed disabled:hover:bg-transparent disabled:hover:text-black"
+            aria-label="Decrease quantity"
+        >−</button>
+    </div>
+</div>