feat: add form component templates, i18n strings, and Alpine.js utilities

2 files changed, 232 insertions, 0 deletions

diff --git a/themes/danix-xyz-hacker/layouts/partials/form-components.html b/themes/danix-xyz-hacker/layouts/partials/form-components.html
new file mode 100644
index 0000000..9a69d43
--- /dev/null
+++ b/themes/danix-xyz-hacker/layouts/partials/form-components.html
@@ -0,0 +1,219 @@
+{{ define "form-components" }}
+
+<!-- ============================================
+     FORM INPUT EXAMPLES
+     ============================================ -->
+
+<section class="my-12 space-y-8">
+  <h2>Form Components</h2>
+
+  <!-- Basic Form Group -->
+  <div class="form-group">
+    <label for="input-text">Text Input</label>
+    <input type="text" id="input-text" class="form-input" placeholder="Enter text...">
+  </div>
+
+  <!-- Form Group with Error -->
+  <div class="form-group error">
+    <label for="input-email">Email (with error)</label>
+    <input type="email" id="input-email" class="form-input error" value="invalid-email">
+    <div class="form-error">{{ i18n "form_invalid_email" }}</div>
+  </div>
+
+  <!-- Form Group with Help Text -->
+  <div class="form-group">
+    <label for="input-password" class="">Password</label>
+    <input type="password" id="input-password" class="form-input" placeholder="••••••">
+    <div class="form-group-help">{{ i18n "form_password_help" | default "Must be at least 8 characters" }}</div>
+  </div>
+
+  <!-- Disabled Input -->
+  <div class="form-group">
+    <label for="input-disabled">Disabled Input</label>
+    <input type="text" id="input-disabled" class="form-input" value="Cannot edit" disabled>
+  </div>
+
+  <!-- ============================================
+       TEXTAREA EXAMPLES
+       ============================================ -->
+
+  <div class="form-group">
+    <label for="textarea-message">Message</label>
+    <textarea id="textarea-message" class="form-textarea" placeholder="Enter your message..."></textarea>
+  </div>
+
+  <!-- ============================================
+       SELECT EXAMPLES
+       ============================================ -->
+
+  <div class="form-group">
+    <label for="select-option">Select an option</label>
+    <select id="select-option" class="form-select">
+      <option>Choose...</option>
+      <option>Option 1</option>
+      <option>Option 2</option>
+      <option>Option 3</option>
+    </select>
+  </div>
+
+  <!-- ============================================
+       CHECKBOX EXAMPLES
+       ============================================ -->
+
+  <div class="form-group">
+    <label class="flex items-center gap-3 cursor-pointer">
+      <input type="checkbox" class="form-checkbox">
+      <span>{{ i18n "form_agree_terms" | default "I agree to the terms" }}</span>
+    </label>
+  </div>
+
+  <!-- Multiple Checkboxes -->
+  <div class="form-group space-y-2">
+    <p class="font-semibold">{{ i18n "form_select_interests" | default "Select your interests" }}</p>
+    <label class="flex items-center gap-3 cursor-pointer">
+      <input type="checkbox" class="form-checkbox" name="interests">
+      <span>{{ i18n "form_interest_tech" | default "Technology" }}</span>
+    </label>
+    <label class="flex items-center gap-3 cursor-pointer">
+      <input type="checkbox" class="form-checkbox" name="interests">
+      <span>{{ i18n "form_interest_design" | default "Design" }}</span>
+    </label>
+  </div>
+
+  <!-- ============================================
+       RADIO BUTTON EXAMPLES
+       ============================================ -->
+
+  <div class="form-group space-y-2">
+    <p class="font-semibold">{{ i18n "form_select_preference" | default "Select a preference" }}</p>
+    <label class="flex items-center gap-3 cursor-pointer">
+      <input type="radio" name="preference" class="form-radio">
+      <span>{{ i18n "form_option_a" | default "Option A" }}</span>
+    </label>
+    <label class="flex items-center gap-3 cursor-pointer">
+      <input type="radio" name="preference" class="form-radio">
+      <span>{{ i18n "form_option_b" | default "Option B" }}</span>
+    </label>
+  </div>
+
+  <!-- ============================================
+       FORM ROWS (MULTI-COLUMN)
+       ============================================ -->
+
+  <div class="form-row">
+    <div class="form-group">
+      <label for="first-name">{{ i18n "form_first_name" | default "First Name" }}</label>
+      <input type="text" id="first-name" class="form-input" placeholder="John">
+    </div>
+    <div class="form-group">
+      <label for="last-name">{{ i18n "form_last_name" | default "Last Name" }}</label>
+      <input type="text" id="last-name" class="form-input" placeholder="Doe">
+    </div>
+  </div>
+
+  <!-- ============================================
+       INLINE FORMS
+       ============================================ -->
+
+  <div class="form-inline">
+    <div class="form-group">
+      <label for="search-input">{{ i18n "form_search" | default "Search" }}</label>
+      <input type="text" id="search-input" class="form-input" placeholder="Type to search...">
+    </div>
+    <button class="btn btn-primary">{{ i18n "form_search_btn" | default "Search" }}</button>
+  </div>
+
+  <!-- ============================================
+       MODALS (DEMO BUTTONS)
+       ============================================ -->
+
+  <div class="space-y-3 mt-8">
+    <h3>Modal Examples</h3>
+    <button class="btn btn-primary" @click="showAlertModal = true">{{ i18n "form_open_alert" | default "Open Alert Modal" }}</button>
+    <button class="btn btn-secondary" @click="showConfirmModal = true">{{ i18n "form_open_confirm" | default "Open Confirm Modal" }}</button>
+    <button class="btn btn-outline" @click="showContentModal = true">{{ i18n "form_open_content" | default "Open Content Modal" }}</button>
+  </div>
+
+  <!-- ============================================
+       NOTIFICATIONS (DEMO BUTTONS)
+       ============================================ -->
+
+  <div class="space-y-3 mt-8">
+    <h3>Notifications</h3>
+    <button class="btn btn-primary btn-sm" @click="showToast('success')">Success Toast</button>
+    <button class="btn btn-secondary btn-sm" @click="showToast('error')">Error Toast</button>
+    <button class="btn btn-sm" style="background-color: #3b82f6; color: white;" @click="showToast('info')">Info Toast</button>
+    <button class="btn btn-sm" style="background-color: #f59e0b; color: white;" @click="showToast('warning')">Warning Toast</button>
+  </div>
+
+</section>
+
+<!-- ============================================
+     ALERT MODAL
+     ============================================ -->
+
+<div class="modal" :class="{ active: showAlertModal }" x-show="showAlertModal">
+  <div class="modal-backdrop" @click="showAlertModal = false"></div>
+  <div class="modal-content modal-sm">
+    <div class="modal-header">
+      <h3 class="modal-title">{{ i18n "form_alert_title" | default "Alert" }}</h3>
+      <div class="modal-close" @click="showAlertModal = false"></div>
+    </div>
+    <div class="modal-body">
+      <p>{{ i18n "form_alert_message" | default "This is an alert modal. Click OK to dismiss." }}</p>
+    </div>
+    <div class="modal-footer">
+      <button class="btn btn-primary" @click="showAlertModal = false">{{ i18n "form_ok" | default "OK" }}</button>
+    </div>
+  </div>
+</div>
+
+<!-- ============================================
+     CONFIRM MODAL
+     ============================================ -->
+
+<div class="modal" :class="{ active: showConfirmModal }" x-show="showConfirmModal">
+  <div class="modal-backdrop" @click="showConfirmModal = false"></div>
+  <div class="modal-content modal-sm">
+    <div class="modal-header">
+      <h3 class="modal-title">{{ i18n "form_confirm_title" | default "Confirm Action" }}</h3>
+      <div class="modal-close" @click="showConfirmModal = false"></div>
+    </div>
+    <div class="modal-body">
+      <p>{{ i18n "form_confirm_message" | default "Are you sure you want to continue?" }}</p>
+    </div>
+    <div class="modal-footer">
+      <button class="btn btn-outline" @click="showConfirmModal = false">{{ i18n "form_cancel" | default "Cancel" }}</button>
+      <button class="btn btn-primary" @click="handleConfirm()">{{ i18n "form_confirm" | default "Confirm" }}</button>
+    </div>
+  </div>
+</div>
+
+<!-- ============================================
+     CONTENT MODAL
+     ============================================ -->
+
+<div class="modal" :class="{ active: showContentModal }" x-show="showContentModal">
+  <div class="modal-backdrop" @click="showContentModal = false"></div>
+  <div class="modal-content modal-md">
+    <div class="modal-header">
+      <h3 class="modal-title">{{ i18n "form_content_title" | default "Modal with Content" }}</h3>
+      <div class="modal-close" @click="showContentModal = false"></div>
+    </div>
+    <div class="modal-body">
+      <p>{{ i18n "form_content_message" | default "This modal contains detailed content. You can add forms, lists, or any HTML here." }}</p>
+      <div class="mt-4">
+        <div class="form-group">
+          <label for="modal-input">Input in Modal</label>
+          <input type="text" id="modal-input" class="form-input" placeholder="Type here...">
+        </div>
+      </div>
+    </div>
+    <div class="modal-footer">
+      <button class="btn btn-outline" @click="showContentModal = false">{{ i18n "form_close" | default "Close" }}</button>
+      <button class="btn btn-primary">{{ i18n "form_save" | default "Save" }}</button>
+    </div>
+  </div>
+</div>
+
+{{ end }}
diff --git a/themes/danix-xyz-hacker/layouts/partials/toast-container.html b/themes/danix-xyz-hacker/layouts/partials/toast-container.html
new file mode 100644
index 0000000..1c5fbf2
--- /dev/null
+++ b/themes/danix-xyz-hacker/layouts/partials/toast-container.html
@@ -0,0 +1,13 @@
+{{ define "toast-container" }}
+
+<!-- Toast notification container with Alpine.js integration -->
+<div class="toast-container" x-data="formComponentsData()">
+  <template x-for="toast in toasts" :key="toast.id">
+    <div class="toast" :class="`toast-${toast.type}`" x-show="toasts.length > 0">
+      <span x-text="toast.message"></span>
+      <div class="toast-close" @click="removeToast(toast.id)"></div>
+    </div>
+  </template>
+</div>
+
+{{ end }}