Samir Boulahtit
2bac4dfc90
Store code snippets as JS variables in components.js and reference them in the template. This avoids multi-line template literals in HTML attributes while still providing copy functionality. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
3161 lines
223 KiB
HTML
3161 lines
223 KiB
HTML
{# app/templates/admin/components.html #}
|
|
{% extends "admin/base.html" %}
|
|
|
|
{% block title %}UI Components{% endblock %}
|
|
|
|
{# ✅ CRITICAL: Link to Alpine.js component #}
|
|
{% block alpine_data %}adminComponents(){% endblock %}
|
|
|
|
{% block extra_head %}
|
|
{# Chart.js for charts section #}
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.css" />
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js" defer></script>
|
|
<style>
|
|
/* Add smooth scrolling */
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<!-- Page Header -->
|
|
<div class="flex items-center justify-between my-6">
|
|
<h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-200">
|
|
UI Components Library
|
|
</h2>
|
|
<a href="/admin/dashboard" class="flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 dark:text-gray-300 dark:bg-gray-800 dark:border-gray-600 dark:hover:bg-gray-700">
|
|
<span x-html="$icon('arrow-left', 'w-4 h-4 mr-2')"></span>
|
|
Back to Dashboard
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Introduction -->
|
|
<div class="mb-8 p-6 bg-gradient-to-r from-purple-600 to-indigo-600 rounded-lg shadow-lg">
|
|
<div class="flex items-start">
|
|
<span x-html="$icon('collection', 'w-10 h-10 mr-4 flex-shrink-0 text-white')"></span>
|
|
<div>
|
|
<h3 class="text-xl font-bold mb-2 text-white">Quick Reference Library</h3>
|
|
<p class="text-white opacity-90">
|
|
Copy-paste ready UI components for your admin pages. All components support dark mode and are fully accessible.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Layout: Sidebar + Content -->
|
|
<div class="flex gap-6 items-start">
|
|
|
|
<!-- Sticky Navigation Sidebar -->
|
|
<aside class="w-64 flex-shrink-0 sticky top-6 max-h-[calc(100vh-3rem)] overflow-y-auto">
|
|
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4">
|
|
<h3 class="text-sm font-semibold text-gray-600 dark:text-gray-400 uppercase mb-3">Sections</h3>
|
|
<nav class="space-y-1">
|
|
<template x-for="section in sections" :key="section.id">
|
|
<a
|
|
:href="'#' + section.id"
|
|
@click.prevent="goToSection(section.id)"
|
|
class="flex items-center px-3 py-2 text-sm rounded-lg transition-colors"
|
|
:class="isSectionActive(section.id)
|
|
? 'bg-purple-100 text-purple-700 dark:bg-purple-900 dark:text-purple-200 font-medium'
|
|
: 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700'"
|
|
>
|
|
<span x-html="$icon(section.icon, 'w-4 h-4 mr-2')"></span>
|
|
<span x-text="section.name"></span>
|
|
</a>
|
|
</template>
|
|
</nav>
|
|
</div>
|
|
|
|
<!-- Quick Tips -->
|
|
<div class="mt-4 bg-blue-50 dark:bg-gray-800 border border-blue-200 dark:border-gray-700 rounded-lg p-4">
|
|
<div class="flex items-start">
|
|
<span x-html="$icon('light-bulb', 'w-5 h-5 text-blue-600 dark:text-blue-400 mr-2 flex-shrink-0')"></span>
|
|
<div>
|
|
<p class="text-xs font-semibold text-blue-900 dark:text-blue-200 mb-1">Pro Tip</p>
|
|
<p class="text-xs text-blue-800 dark:text-blue-300">
|
|
Click any code block to copy it to your clipboard!
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- Main Content - WIDELY SPACED SECTIONS -->
|
|
<div class="flex-1 space-y-32">
|
|
|
|
<!-- E-COMMERCE SECTION -->
|
|
<section id="ecommerce" class="scroll-mt-24">
|
|
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
|
|
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-6 flex items-center">
|
|
<span x-html="$icon('shopping-cart', 'w-6 h-6 mr-2 text-purple-600 dark:text-purple-400')"></span>
|
|
E-commerce Components
|
|
</h2>
|
|
|
|
<div class="mb-6 p-4 bg-green-50 dark:bg-gray-700 border border-green-200 dark:border-gray-600 rounded-lg">
|
|
<div class="flex items-start">
|
|
<span x-html="$icon('information-circle', 'w-5 h-5 text-green-600 dark:text-green-400 mr-2 flex-shrink-0 mt-0.5')"></span>
|
|
<div>
|
|
<p class="text-sm text-green-800 dark:text-gray-200">
|
|
<strong>Shop Components:</strong> Reusable e-commerce components from <code class="bg-green-100 dark:bg-gray-600 px-1 rounded">shared/macros/shop/</code>. These support vendor theming via CSS variables and are designed for the shop frontend.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Available Shop Macros -->
|
|
<div class="mb-8">
|
|
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-4">Available Shop Macro Files</h3>
|
|
<div class="grid gap-4 md:grid-cols-2">
|
|
<div class="p-4 bg-gray-50 dark:bg-gray-900 rounded-lg">
|
|
<h4 class="font-semibold text-gray-800 dark:text-gray-200 mb-2 flex items-center">
|
|
<span x-html="$icon('cube', 'w-4 h-4 mr-2 text-purple-600 dark:text-purple-400')"></span>
|
|
product-card.html
|
|
</h4>
|
|
<p class="text-sm text-gray-600 dark:text-gray-400 mb-2">Product cards with badges, ratings, wishlist</p>
|
|
<code class="text-xs bg-gray-200 dark:bg-gray-700 px-2 py-1 rounded">product_card(), product_badge()</code>
|
|
</div>
|
|
<div class="p-4 bg-gray-50 dark:bg-gray-900 rounded-lg">
|
|
<h4 class="font-semibold text-gray-800 dark:text-gray-200 mb-2 flex items-center">
|
|
<span x-html="$icon('view-grid', 'w-4 h-4 mr-2 text-purple-600 dark:text-purple-400')"></span>
|
|
product-grid.html
|
|
</h4>
|
|
<p class="text-sm text-gray-600 dark:text-gray-400 mb-2">Responsive product grid with loading states</p>
|
|
<code class="text-xs bg-gray-200 dark:bg-gray-700 px-2 py-1 rounded">product_grid(), product_skeleton()</code>
|
|
</div>
|
|
<div class="p-4 bg-gray-50 dark:bg-gray-900 rounded-lg">
|
|
<h4 class="font-semibold text-gray-800 dark:text-gray-200 mb-2 flex items-center">
|
|
<span x-html="$icon('shopping-bag', 'w-4 h-4 mr-2 text-purple-600 dark:text-purple-400')"></span>
|
|
add-to-cart.html
|
|
</h4>
|
|
<p class="text-sm text-gray-600 dark:text-gray-400 mb-2">Add to cart buttons and forms</p>
|
|
<code class="text-xs bg-gray-200 dark:bg-gray-700 px-2 py-1 rounded">add_to_cart_button(), add_to_cart_form()</code>
|
|
</div>
|
|
<div class="p-4 bg-gray-50 dark:bg-gray-900 rounded-lg">
|
|
<h4 class="font-semibold text-gray-800 dark:text-gray-200 mb-2 flex items-center">
|
|
<span x-html="$icon('shopping-cart', 'w-4 h-4 mr-2 text-purple-600 dark:text-purple-400')"></span>
|
|
mini-cart.html
|
|
</h4>
|
|
<p class="text-sm text-gray-600 dark:text-gray-400 mb-2">Cart dropdown, cart items, summary</p>
|
|
<code class="text-xs bg-gray-200 dark:bg-gray-700 px-2 py-1 rounded">mini_cart(), cart_item(), cart_summary()</code>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Product Card Demo -->
|
|
<div class="mb-8 pt-8 border-t border-gray-200 dark:border-gray-700">
|
|
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-3">Product Cards</h3>
|
|
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
|
|
Versatile product cards with badges, ratings, wishlist, and quick-add functionality. Supports <code class="bg-gray-100 dark:bg-gray-700 px-1 rounded">sm</code>, <code class="bg-gray-100 dark:bg-gray-700 px-1 rounded">md</code>, and <code class="bg-gray-100 dark:bg-gray-700 px-1 rounded">lg</code> sizes.
|
|
</p>
|
|
<div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-6 mb-4">
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
<template x-for="product in demoProducts" :key="product.id">
|
|
<div class="group relative bg-white dark:bg-gray-800 rounded-lg shadow-sm hover:shadow-md transition-shadow duration-200 overflow-hidden max-w-[280px] mx-auto">
|
|
<div class="relative h-48 overflow-hidden bg-gray-100 dark:bg-gray-700">
|
|
<a :href="product.url">
|
|
<img :src="product.image_url" :alt="product.name" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" loading="lazy">
|
|
</a>
|
|
<div class="absolute top-2 left-2 flex flex-col gap-1">
|
|
<span x-show="product.sale_price" class="text-xs px-2 py-1 font-semibold text-white bg-red-500 rounded" x-text="'-' + Math.round((1 - product.sale_price / product.price) * 100) + '%'"></span>
|
|
<span x-show="product.is_new" class="text-xs px-2 py-1 font-semibold text-white bg-green-500 rounded">New</span>
|
|
</div>
|
|
<button type="button" @click.prevent="demoToggleWishlist(product)" class="absolute top-2 right-2 p-1.5 rounded-full bg-white/80 dark:bg-gray-800/80 hover:bg-white dark:hover:bg-gray-800 transition-colors opacity-0 group-hover:opacity-100" :class="product.in_wishlist ? 'text-red-500' : 'text-gray-400 hover:text-red-500'">
|
|
<span x-html="$icon('heart', 'w-5 h-5')" :class="product.in_wishlist && 'fill-current'"></span>
|
|
</button>
|
|
<div x-show="product.stock === 0" class="absolute inset-0 bg-black/50 flex items-center justify-center">
|
|
<span class="text-white font-semibold text-xs px-2 py-1 bg-gray-900 rounded">Out of Stock</span>
|
|
</div>
|
|
</div>
|
|
<div class="p-3">
|
|
<h3 class="text-base font-medium text-gray-900 dark:text-gray-100 mb-1 line-clamp-2">
|
|
<a :href="product.url" class="hover:text-purple-600 dark:hover:text-purple-400" x-text="product.name"></a>
|
|
</h3>
|
|
<div class="flex items-center gap-1 mb-2" x-show="product.rating">
|
|
<div class="flex">
|
|
<template x-for="i in 5" :key="i">
|
|
<span x-html="$icon('star', 'w-4 h-4')" :class="i <= Math.round(product.rating) ? 'text-yellow-400 fill-current' : 'text-gray-300 dark:text-gray-600'"></span>
|
|
</template>
|
|
</div>
|
|
<span class="text-xs text-gray-500 dark:text-gray-400" x-text="'(' + product.review_count + ')'"></span>
|
|
</div>
|
|
<div class="flex items-center gap-2 mb-3">
|
|
<span class="text-base font-bold" :class="product.sale_price ? 'text-red-600 dark:text-red-400' : 'text-gray-900 dark:text-gray-100'" x-text="'€' + (product.sale_price || product.price).toFixed(2)"></span>
|
|
<span x-show="product.sale_price" class="text-sm text-gray-400 line-through" x-text="'€' + product.price.toFixed(2)"></span>
|
|
</div>
|
|
<button type="button" @click="demoAddToCart(product)" :disabled="product.stock === 0 || addingToCart" class="w-full text-sm px-3 py-2 font-medium text-white bg-purple-600 hover:bg-purple-700 dark:bg-purple-500 dark:hover:bg-purple-600 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2">
|
|
<span x-show="addingToCart" x-html="$icon('spinner', 'w-5 h-5')"></span>
|
|
<span x-show="!addingToCart" x-html="$icon('shopping-cart', 'w-5 h-5')"></span>
|
|
<span x-text="product.stock === 0 ? 'Out of Stock' : 'Add to Cart'"></span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
<button @click="copyCode(`{% raw %}{% from 'shared/macros/shop/product-card.html' import product_card %}
|
|
|
|
<template x-for="product in products" :key="product.id">
|
|
{{ product_card() }}
|
|
</template>
|
|
|
|
{# With options #}
|
|
{{ product_card(size='lg', show_vendor=true, show_wishlist=false) }}{% endraw %}`)" class="text-sm text-purple-600 hover:text-purple-700 dark:text-purple-400 flex items-center">
|
|
<span x-html="$icon('duplicate', 'w-4 h-4 mr-1')"></span>
|
|
Copy Code
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Mini Cart Demo -->
|
|
<div class="mb-8 pt-8 border-t border-gray-200 dark:border-gray-700">
|
|
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-3">Mini Cart</h3>
|
|
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
|
|
Cart icon button with badge and dropdown preview. Click the cart icon to see the dropdown.
|
|
</p>
|
|
<div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-6 mb-4">
|
|
<div class="flex justify-center">
|
|
<div class="relative inline-block">
|
|
<button type="button" @click="showDemoCart = !showDemoCart" class="relative p-2 text-gray-600 dark:text-gray-300 hover:text-purple-600 dark:hover:text-purple-400 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
|
|
<span x-html="$icon('shopping-cart', 'w-6 h-6')"></span>
|
|
<span x-show="demoCart.item_count > 0" x-text="demoCart.item_count" class="absolute w-5 h-5 text-xs -top-1.5 -right-1.5 flex items-center justify-center font-bold text-white bg-purple-600 dark:bg-purple-500 rounded-full"></span>
|
|
</button>
|
|
<div x-show="showDemoCart" x-transition @click.away="showDemoCart = false" class="absolute right-0 top-full mt-2 w-80 bg-white dark:bg-gray-800 rounded-lg shadow-xl border border-gray-200 dark:border-gray-700 z-50">
|
|
<div class="px-4 py-3 border-b border-gray-200 dark:border-gray-700">
|
|
<h3 class="text-sm font-semibold text-gray-900 dark:text-gray-100">Shopping Cart</h3>
|
|
<p class="text-xs text-gray-500 dark:text-gray-400" x-text="demoCart.item_count + ' item' + (demoCart.item_count !== 1 ? 's' : '')"></p>
|
|
</div>
|
|
<div x-show="demoCart.items.length === 0" class="px-4 py-8 text-center">
|
|
<div class="w-12 h-12 mx-auto mb-3 text-gray-300 dark:text-gray-600">
|
|
<span x-html="$icon('shopping-cart', 'w-full h-full')"></span>
|
|
</div>
|
|
<p class="text-sm text-gray-500 dark:text-gray-400">Your cart is empty</p>
|
|
</div>
|
|
<div x-show="demoCart.items.length > 0" class="max-h-64 overflow-y-auto">
|
|
<template x-for="item in demoCart.items" :key="item.id">
|
|
<div class="flex gap-3 px-4 py-3 hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors">
|
|
<img :src="item.image_url" :alt="item.name" class="w-14 h-14 object-cover rounded-lg" loading="lazy">
|
|
<div class="flex-1 min-w-0">
|
|
<h4 class="text-sm font-medium text-gray-900 dark:text-gray-100 truncate" x-text="item.name"></h4>
|
|
<p class="text-xs text-gray-500 dark:text-gray-400" x-text="item.variant_name"></p>
|
|
<div class="flex items-center justify-between mt-1">
|
|
<span class="text-xs text-gray-500 dark:text-gray-400" x-text="'Qty: ' + item.quantity"></span>
|
|
<span class="text-sm font-medium text-gray-900 dark:text-gray-100" x-text="'€' + (item.price * item.quantity).toFixed(2)"></span>
|
|
</div>
|
|
</div>
|
|
<button type="button" @click="demoRemoveFromCart(item.id)" class="flex-shrink-0 p-1 text-gray-400 hover:text-red-500 dark:hover:text-red-400 transition-colors">
|
|
<span x-html="$icon('x', 'w-4 h-4')"></span>
|
|
</button>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
<div x-show="demoCart.items.length > 0" class="px-4 py-3 border-t border-gray-200 dark:border-gray-700">
|
|
<div class="flex justify-between items-center mb-3">
|
|
<span class="text-sm text-gray-600 dark:text-gray-400">Subtotal</span>
|
|
<span class="text-lg font-bold text-gray-900 dark:text-gray-100" x-text="'€' + demoCart.subtotal.toFixed(2)"></span>
|
|
</div>
|
|
<div class="space-y-2">
|
|
<a href="#" class="block w-full px-4 py-2 text-center text-sm font-medium text-purple-600 dark:text-purple-400 bg-purple-50 dark:bg-purple-900/30 hover:bg-purple-100 dark:hover:bg-purple-900/50 rounded-lg transition-colors">View Cart</a>
|
|
<a href="#" class="block w-full px-4 py-2 text-center text-sm font-medium text-white bg-purple-600 hover:bg-purple-700 dark:bg-purple-500 dark:hover:bg-purple-600 rounded-lg transition-colors">Checkout</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button @click="copyCode(`{% raw %}{% from 'shared/macros/shop/mini-cart.html' import cart_icon_button, mini_cart %}
|
|
|
|
<div class="relative">
|
|
{{ cart_icon_button(cart_count_var='cart.item_count', toggle_action='showCart = !showCart') }}
|
|
{{ mini_cart(cart_var='cart', show_var='showCart') }}
|
|
</div>{% endraw %}`)" class="text-sm text-purple-600 hover:text-purple-700 dark:text-purple-400 flex items-center">
|
|
<span x-html="$icon('duplicate', 'w-4 h-4 mr-1')"></span>
|
|
Copy Code
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Add to Cart Demo -->
|
|
<div class="pt-8 border-t border-gray-200 dark:border-gray-700">
|
|
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-3">Add to Cart Button</h3>
|
|
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
|
|
Standardized add to cart buttons with loading states. Integrates with <code class="bg-gray-100 dark:bg-gray-700 px-1 rounded">number_stepper</code> for quantity selection.
|
|
</p>
|
|
<div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-6 mb-4">
|
|
<div class="flex flex-wrap items-end gap-6">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Quantity</label>
|
|
<div class="flex" role="group" aria-label="Quantity">
|
|
<button type="button" @click="demoQuantity = Math.max(1, demoQuantity - 1)" :disabled="demoQuantity <= 1" class="px-3 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-600 border border-gray-300 dark:border-gray-600 border-r-0 rounded-l-md hover:bg-gray-200 dark:hover:bg-gray-500 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed transition-colors">
|
|
<span x-html="$icon('minus', 'w-4 h-4')"></span>
|
|
</button>
|
|
<input type="number" x-model.number="demoQuantity" min="1" max="99" class="no-spinner px-3 py-2 text-sm w-16 text-center text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border-y border-gray-300 dark:border-gray-600 focus:border-purple-400 focus:outline-none" />
|
|
<button type="button" @click="demoQuantity = Math.min(99, demoQuantity + 1)" :disabled="demoQuantity >= 99" class="px-3 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-600 border border-gray-300 dark:border-gray-600 border-l-0 rounded-r-md hover:bg-gray-200 dark:hover:bg-gray-500 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed transition-colors">
|
|
<span x-html="$icon('plus', 'w-4 h-4')"></span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<button type="button" @click="demoAddToCart({})" :disabled="addingToCart" class="px-6 py-2.5 text-base font-medium text-white bg-purple-600 hover:bg-purple-700 dark:bg-purple-500 dark:hover:bg-purple-600 rounded-lg transition-colors disabled:opacity-50 flex items-center gap-2">
|
|
<span x-show="addingToCart" x-html="$icon('spinner', 'w-5 h-5')"></span>
|
|
<span x-show="!addingToCart" x-html="$icon('shopping-cart', 'w-5 h-5')"></span>
|
|
<span x-text="addingToCart ? 'Adding...' : 'Add to Cart'"></span>
|
|
</button>
|
|
</div>
|
|
<div x-show="addedToCart" x-transition class="mt-4 flex items-center gap-2 text-green-600 dark:text-green-400 text-sm">
|
|
<span x-html="$icon('check-circle', 'w-5 h-5')"></span>
|
|
<span>Added to cart!</span>
|
|
</div>
|
|
</div>
|
|
<button @click="copyCode(`{% raw %}{% from 'shared/macros/shop/add-to-cart.html' import add_to_cart_button, add_to_cart_form %}
|
|
|
|
{# Simple button #}
|
|
{{ add_to_cart_button(action='addToCart()') }}
|
|
|
|
{# Full form with quantity selector #}
|
|
{{ add_to_cart_form(product_var='product', quantity_var='quantity') }}{% endraw %}`)" class="text-sm text-purple-600 hover:text-purple-700 dark:text-purple-400 flex items-center">
|
|
<span x-html="$icon('duplicate', 'w-4 h-4 mr-1')"></span>
|
|
Copy Code
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Product Gallery Demo (Priority 3) -->
|
|
<div class="mb-8 pt-8 border-t border-gray-200 dark:border-gray-700">
|
|
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-3">Product Gallery</h3>
|
|
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
|
|
Image gallery with thumbnails, navigation, zoom on hover, and fullscreen lightbox.
|
|
</p>
|
|
<div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-6 mb-4">
|
|
<div class="max-w-lg mx-auto">
|
|
<div class="space-y-4">
|
|
{# Main Image #}
|
|
<div class="relative group">
|
|
<div class="relative aspect-square bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden cursor-crosshair">
|
|
<img
|
|
:src="demoProductDetail.images[selectedImage]?.url"
|
|
:alt="demoProductDetail.images[selectedImage]?.alt"
|
|
class="absolute inset-0 w-full h-full object-contain"
|
|
/>
|
|
<div class="absolute bottom-3 left-3 bg-black/50 text-white text-xs px-2 py-1 rounded">
|
|
<span x-text="(selectedImage + 1) + ' / ' + demoProductDetail.images.length"></span>
|
|
</div>
|
|
</div>
|
|
{# Navigation Arrows #}
|
|
<button
|
|
type="button"
|
|
@click="selectedImage = selectedImage > 0 ? selectedImage - 1 : demoProductDetail.images.length - 1"
|
|
class="absolute left-2 top-1/2 -translate-y-1/2 p-2 bg-white/80 dark:bg-gray-800/80 rounded-full shadow-md opacity-0 group-hover:opacity-100 transition-opacity hover:bg-white dark:hover:bg-gray-800"
|
|
>
|
|
<span x-html="$icon('chevron-left', 'w-5 h-5 text-gray-700 dark:text-gray-300')"></span>
|
|
</button>
|
|
<button
|
|
type="button"
|
|
@click="selectedImage = selectedImage < demoProductDetail.images.length - 1 ? selectedImage + 1 : 0"
|
|
class="absolute right-2 top-1/2 -translate-y-1/2 p-2 bg-white/80 dark:bg-gray-800/80 rounded-full shadow-md opacity-0 group-hover:opacity-100 transition-opacity hover:bg-white dark:hover:bg-gray-800"
|
|
>
|
|
<span x-html="$icon('chevron-right', 'w-5 h-5 text-gray-700 dark:text-gray-300')"></span>
|
|
</button>
|
|
</div>
|
|
{# Thumbnails #}
|
|
<div class="flex gap-2 overflow-x-auto pb-2">
|
|
<template x-for="(image, index) in demoProductDetail.images" :key="image.id">
|
|
<button
|
|
type="button"
|
|
@click="selectedImage = index"
|
|
class="flex-shrink-0 w-16 h-16 rounded-lg overflow-hidden border-2 transition-all"
|
|
:class="selectedImage === index
|
|
? 'border-purple-500 dark:border-purple-400 ring-2 ring-purple-500/30'
|
|
: 'border-gray-200 dark:border-gray-600 hover:border-gray-300 dark:hover:border-gray-500'"
|
|
>
|
|
<img :src="image.url" :alt="image.alt" class="w-full h-full object-cover" />
|
|
</button>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button @click="copyCode(`{% raw %}{% from 'shared/macros/shop/product-gallery.html' import product_gallery %}
|
|
|
|
{{ product_gallery(images_var='product.images', enable_zoom=true, enable_lightbox=true) }}{% endraw %}`)" class="text-sm text-purple-600 hover:text-purple-700 dark:text-purple-400 flex items-center">
|
|
<span x-html="$icon('duplicate', 'w-4 h-4 mr-1')"></span>
|
|
Copy Code
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Variant Selector Demo (Priority 3) -->
|
|
<div class="mb-8 pt-8 border-t border-gray-200 dark:border-gray-700">
|
|
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-3">Variant Selector</h3>
|
|
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
|
|
Product variant selection with button groups and color swatches. Supports out-of-stock indicators.
|
|
</p>
|
|
<div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-6 mb-4">
|
|
<div class="max-w-md mx-auto space-y-6">
|
|
{# Size Selector #}
|
|
<div class="space-y-2">
|
|
<div class="flex items-center justify-between">
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Size</label>
|
|
<span x-show="selectedSize" class="text-sm text-gray-600 dark:text-gray-400" x-text="selectedSize?.name"></span>
|
|
</div>
|
|
<div class="flex flex-wrap gap-2">
|
|
<template x-for="size in demoProductDetail.sizes" :key="size.id">
|
|
<button
|
|
type="button"
|
|
@click="selectedSize = size"
|
|
:disabled="size.stock === 0"
|
|
class="px-4 py-2 text-sm font-medium rounded-lg border-2 transition-all"
|
|
:class="{
|
|
'border-purple-500 dark:border-purple-400 bg-purple-50 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300': selectedSize?.id === size.id,
|
|
'border-gray-200 dark:border-gray-600 hover:border-gray-300 dark:hover:border-gray-500 text-gray-700 dark:text-gray-300': selectedSize?.id !== size.id && size.stock > 0,
|
|
'border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 text-gray-400 dark:text-gray-500 cursor-not-allowed line-through': size.stock === 0
|
|
}"
|
|
>
|
|
<span x-text="size.name"></span>
|
|
</button>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
{# Color Swatches #}
|
|
<div class="space-y-2">
|
|
<div class="flex items-center justify-between">
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Color</label>
|
|
<span x-show="selectedColor" class="text-sm text-gray-600 dark:text-gray-400" x-text="selectedColor?.name"></span>
|
|
</div>
|
|
<div class="flex flex-wrap gap-3">
|
|
<template x-for="color in demoProductDetail.colors" :key="color.id">
|
|
<button
|
|
type="button"
|
|
@click="selectedColor = color"
|
|
:disabled="color.stock === 0"
|
|
:title="color.name + (color.stock === 0 ? ' - Out of stock' : '')"
|
|
class="relative w-10 h-10 rounded-full border-2 transition-all shadow-sm"
|
|
:class="{
|
|
'ring-2 ring-offset-2 ring-purple-500 dark:ring-offset-gray-800 border-gray-300': selectedColor?.id === color.id,
|
|
'border-gray-300 dark:border-gray-600 hover:border-gray-400 dark:hover:border-gray-500': selectedColor?.id !== color.id && color.stock > 0,
|
|
'opacity-40 cursor-not-allowed': color.stock === 0
|
|
}"
|
|
:style="'background-color: ' + color.color_hex"
|
|
>
|
|
<span x-show="color.stock === 0" class="absolute inset-0 flex items-center justify-center">
|
|
<span class="w-full h-0.5 bg-gray-600 rotate-45 absolute"></span>
|
|
</span>
|
|
<span x-show="selectedColor?.id === color.id" class="absolute inset-0 flex items-center justify-center">
|
|
<span x-html="$icon('check', 'w-5 h-5 text-white')"></span>
|
|
</span>
|
|
</button>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button @click="copyCode(`{% raw %}{% from 'shared/macros/shop/variant-selector.html' import size_selector, color_swatches %}
|
|
|
|
{{ size_selector(sizes_var='product.sizes', selected_var='selectedSize') }}
|
|
|
|
{{ color_swatches(colors_var='product.colors', selected_var='selectedColor') }}{% endraw %}`)" class="text-sm text-purple-600 hover:text-purple-700 dark:text-purple-400 flex items-center">
|
|
<span x-html="$icon('duplicate', 'w-4 h-4 mr-1')"></span>
|
|
Copy Code
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Product Info Demo (Priority 3) -->
|
|
<div class="mb-8 pt-8 border-t border-gray-200 dark:border-gray-700">
|
|
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-3">Product Info</h3>
|
|
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
|
|
Product details section with title, price, rating, stock status, and description.
|
|
</p>
|
|
<div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-6 mb-4">
|
|
<div class="max-w-lg mx-auto space-y-4">
|
|
{# Category / Vendor #}
|
|
<div class="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400">
|
|
<a :href="demoProductDetail.category.url" class="hover:text-purple-600 dark:hover:text-purple-400" x-text="demoProductDetail.category.name"></a>
|
|
<span>•</span>
|
|
<span>Sold by <a :href="demoProductDetail.vendor.url" class="font-medium hover:text-purple-600 dark:hover:text-purple-400" x-text="demoProductDetail.vendor.name"></a></span>
|
|
</div>
|
|
{# Title #}
|
|
<h1 class="text-2xl font-bold text-gray-900 dark:text-white" x-text="demoProductDetail.name"></h1>
|
|
{# Rating #}
|
|
<div class="flex items-center gap-3">
|
|
<div class="flex items-center">
|
|
<template x-for="i in 5" :key="i">
|
|
<span x-html="$icon('star', 'w-5 h-5')" :class="i <= Math.round(demoProductDetail.rating) ? 'text-yellow-400 fill-current' : 'text-gray-300 dark:text-gray-600'"></span>
|
|
</template>
|
|
</div>
|
|
<span class="text-sm font-medium text-gray-700 dark:text-gray-300" x-text="demoProductDetail.rating.toFixed(1)"></span>
|
|
<span class="text-sm text-gray-500 dark:text-gray-400">(<span x-text="demoProductDetail.review_count"></span> reviews)</span>
|
|
</div>
|
|
{# Price #}
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-2xl font-bold text-red-600 dark:text-red-400" x-text="'$' + demoProductDetail.sale_price.toFixed(2)"></span>
|
|
<span class="text-lg text-gray-500 dark:text-gray-400 line-through" x-text="'$' + demoProductDetail.price.toFixed(2)"></span>
|
|
<span class="px-2 py-1 text-sm bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400 rounded-full font-medium" x-text="'-' + Math.round((1 - demoProductDetail.sale_price / demoProductDetail.price) * 100) + '%'"></span>
|
|
</div>
|
|
{# Description #}
|
|
<p class="text-gray-600 dark:text-gray-400" x-text="demoProductDetail.short_description"></p>
|
|
{# Stock Status #}
|
|
<div class="flex items-center gap-1.5 text-green-600 dark:text-green-400">
|
|
<span x-html="$icon('check-circle', 'w-5 h-5')"></span>
|
|
<span class="text-sm font-medium">In Stock</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button @click="copyCode(`{% raw %}{% from 'shared/macros/shop/product-info.html' import product_info, product_price, product_rating %}
|
|
|
|
{{ product_info(product_var='product', show_vendor=true, show_rating=true) }}
|
|
|
|
{# Or use individual components #}
|
|
{{ product_price(product_var='product', size='lg') }}
|
|
{{ product_rating(product_var='product', clickable=true) }}{% endraw %}`)" class="text-sm text-purple-600 hover:text-purple-700 dark:text-purple-400 flex items-center">
|
|
<span x-html="$icon('duplicate', 'w-4 h-4 mr-1')"></span>
|
|
Copy Code
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Product Tabs Demo (Priority 3) -->
|
|
<div class="mb-8 pt-8 border-t border-gray-200 dark:border-gray-700">
|
|
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-3">Product Tabs</h3>
|
|
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
|
|
Tabbed content for product description, specifications, reviews, and shipping info.
|
|
</p>
|
|
<div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-6 mb-4">
|
|
<div class="max-w-2xl mx-auto">
|
|
{# Tab Navigation #}
|
|
<div class="border-b border-gray-200 dark:border-gray-700">
|
|
<nav class="flex gap-4 -mb-px">
|
|
<button type="button" @click="activeProductTab = 'description'" class="flex items-center gap-2 px-4 py-3 text-sm font-medium border-b-2 transition-colors" :class="activeProductTab === 'description' ? 'border-purple-500 text-purple-600 dark:text-purple-400' : 'border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400'">
|
|
<span x-html="$icon('document-text', 'w-5 h-5')"></span>
|
|
Description
|
|
</button>
|
|
<button type="button" @click="activeProductTab = 'specifications'" class="flex items-center gap-2 px-4 py-3 text-sm font-medium border-b-2 transition-colors" :class="activeProductTab === 'specifications' ? 'border-purple-500 text-purple-600 dark:text-purple-400' : 'border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400'">
|
|
<span x-html="$icon('clipboard-list', 'w-5 h-5')"></span>
|
|
Specifications
|
|
</button>
|
|
<button type="button" @click="activeProductTab = 'reviews'" class="flex items-center gap-2 px-4 py-3 text-sm font-medium border-b-2 transition-colors" :class="activeProductTab === 'reviews' ? 'border-purple-500 text-purple-600 dark:text-purple-400' : 'border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400'">
|
|
<span x-html="$icon('star', 'w-5 h-5')"></span>
|
|
Reviews
|
|
<span class="px-2 py-0.5 text-xs rounded-full" :class="activeProductTab === 'reviews' ? 'bg-purple-100 dark:bg-purple-900/30 text-purple-600' : 'bg-gray-100 dark:bg-gray-700 text-gray-600'" x-text="demoProductDetail.review_count"></span>
|
|
</button>
|
|
</nav>
|
|
</div>
|
|
{# Tab Content #}
|
|
<div class="py-6">
|
|
{# Description Tab #}
|
|
<div x-show="activeProductTab === 'description'" x-transition>
|
|
<div class="prose prose-gray dark:prose-invert max-w-none" x-html="demoProductDetail.description"></div>
|
|
<div class="mt-6">
|
|
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Key Features</h3>
|
|
<ul class="space-y-2">
|
|
<template x-for="feature in demoProductDetail.features" :key="feature">
|
|
<li class="flex items-start gap-2">
|
|
<span x-html="$icon('check', 'w-5 h-5 text-green-500 flex-shrink-0 mt-0.5')"></span>
|
|
<span class="text-gray-600 dark:text-gray-400" x-text="feature"></span>
|
|
</li>
|
|
</template>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
{# Specifications Tab #}
|
|
<div x-show="activeProductTab === 'specifications'" x-transition>
|
|
<div class="overflow-hidden rounded-lg border border-gray-200 dark:border-gray-700">
|
|
<table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
|
|
<tbody class="divide-y divide-gray-200 dark:divide-gray-700">
|
|
<template x-for="(spec, index) in demoProductDetail.specifications" :key="spec.name">
|
|
<tr :class="index % 2 === 0 ? 'bg-gray-50 dark:bg-gray-800/50' : 'bg-white dark:bg-gray-800'">
|
|
<td class="px-4 py-3 text-sm font-medium text-gray-900 dark:text-white w-1/3" x-text="spec.name"></td>
|
|
<td class="px-4 py-3 text-sm text-gray-600 dark:text-gray-400" x-text="spec.value"></td>
|
|
</tr>
|
|
</template>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
{# Reviews Tab #}
|
|
<div x-show="activeProductTab === 'reviews'" x-transition>
|
|
<div class="flex flex-col md:flex-row gap-8 mb-8 pb-8 border-b border-gray-200 dark:border-gray-700">
|
|
<div class="text-center md:text-left">
|
|
<div class="text-5xl font-bold text-gray-900 dark:text-white" x-text="demoProductDetail.rating.toFixed(1)"></div>
|
|
<div class="flex items-center justify-center md:justify-start gap-1 mt-2">
|
|
<template x-for="i in 5" :key="i">
|
|
<span x-html="$icon('star', 'w-5 h-5')" :class="i <= Math.round(demoProductDetail.rating) ? 'text-yellow-400 fill-current' : 'text-gray-300 dark:text-gray-600'"></span>
|
|
</template>
|
|
</div>
|
|
<div class="mt-1 text-sm text-gray-600 dark:text-gray-400" x-text="demoProductDetail.review_count + ' reviews'"></div>
|
|
</div>
|
|
</div>
|
|
<div class="space-y-6">
|
|
<template x-for="review in demoProductDetail.reviews" :key="review.id">
|
|
<div class="border-b border-gray-200 dark:border-gray-700 pb-6 last:border-0">
|
|
<div class="flex items-start justify-between mb-3">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-10 h-10 rounded-full bg-purple-100 dark:bg-purple-900/30 flex items-center justify-center">
|
|
<span class="text-sm font-medium text-purple-600 dark:text-purple-400" x-text="review.author_name.charAt(0)"></span>
|
|
</div>
|
|
<div>
|
|
<div class="flex items-center gap-2">
|
|
<span class="font-medium text-gray-900 dark:text-white" x-text="review.author_name"></span>
|
|
<span x-show="review.verified" class="inline-flex items-center gap-1 px-2 py-0.5 text-xs font-medium text-green-700 dark:text-green-400 bg-green-100 dark:bg-green-900/30 rounded">
|
|
<span x-html="$icon('badge-check', 'w-3 h-3')"></span>
|
|
Verified
|
|
</span>
|
|
</div>
|
|
<div class="text-xs text-gray-500 dark:text-gray-400" x-text="review.created_at"></div>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<template x-for="i in 5" :key="i">
|
|
<span x-html="$icon('star', 'w-4 h-4')" :class="i <= review.rating ? 'text-yellow-400 fill-current' : 'text-gray-300 dark:text-gray-600'"></span>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
<h4 class="font-medium text-gray-900 dark:text-white mb-2" x-text="review.title"></h4>
|
|
<p class="text-gray-600 dark:text-gray-400" x-text="review.content"></p>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button @click="copyCode(`{% raw %}{% from 'shared/macros/shop/product-tabs.html' import product_tabs %}
|
|
|
|
{{ product_tabs(product_var='product', tabs=['description', 'specifications', 'reviews', 'shipping']) }}{% endraw %}`)" class="text-sm text-purple-600 hover:text-purple-700 dark:text-purple-400 flex items-center">
|
|
<span x-html="$icon('duplicate', 'w-4 h-4 mr-1')"></span>
|
|
Copy Code
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Category Navigation Demo (Priority 4) -->
|
|
<div class="mb-8 pt-8 border-t border-gray-200 dark:border-gray-700">
|
|
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-3">Category Navigation</h3>
|
|
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
|
|
Sidebar navigation with nested categories, collapsible sections, and active state tracking.
|
|
</p>
|
|
<div class="grid lg:grid-cols-2 gap-6">
|
|
{# Sidebar Navigation #}
|
|
<div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-4">
|
|
<h4 class="text-sm font-medium text-gray-600 dark:text-gray-400 mb-3">Sidebar Navigation</h4>
|
|
<nav
|
|
x-data="{
|
|
expandedCategories: new Set([1, 11]),
|
|
toggleCategory(id) {
|
|
if (this.expandedCategories.has(id)) {
|
|
this.expandedCategories.delete(id);
|
|
} else {
|
|
this.expandedCategories.add(id);
|
|
}
|
|
},
|
|
isExpanded(id) {
|
|
return this.expandedCategories.has(id);
|
|
},
|
|
isActive(category) {
|
|
return currentCategory?.id === category.id;
|
|
}
|
|
}"
|
|
class="space-y-1"
|
|
>
|
|
<template x-for="category in demoCategories" :key="category.id">
|
|
<div>
|
|
<div class="flex items-center">
|
|
<a
|
|
:href="category.url"
|
|
class="flex-1 flex items-center justify-between px-3 py-2 text-sm rounded-lg transition-colors"
|
|
:class="{
|
|
'bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300 font-medium': isActive(category),
|
|
'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700': !isActive(category)
|
|
}"
|
|
@click.prevent
|
|
>
|
|
<span x-text="category.name"></span>
|
|
<span class="text-xs text-gray-500 dark:text-gray-400" x-text="'(' + category.product_count + ')'"></span>
|
|
</a>
|
|
<button
|
|
x-show="category.children?.length"
|
|
type="button"
|
|
@click="toggleCategory(category.id)"
|
|
class="p-2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
|
|
>
|
|
<span x-html="$icon('chevron-right', 'w-4 h-4 transition-transform')" :class="isExpanded(category.id) && 'rotate-90'"></span>
|
|
</button>
|
|
</div>
|
|
<div x-show="isExpanded(category.id) && category.children?.length" x-transition class="ml-4 mt-1 space-y-1">
|
|
<template x-for="child in category.children" :key="child.id">
|
|
<a
|
|
:href="child.url"
|
|
class="flex items-center justify-between px-3 py-2 text-sm rounded-lg transition-colors"
|
|
:class="{
|
|
'bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300 font-medium': isActive(child),
|
|
'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700': !isActive(child)
|
|
}"
|
|
@click.prevent
|
|
>
|
|
<span x-text="child.name"></span>
|
|
<span class="text-xs text-gray-500 dark:text-gray-400" x-text="'(' + child.product_count + ')'"></span>
|
|
</a>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</nav>
|
|
</div>
|
|
{# Horizontal Category Menu #}
|
|
<div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-4">
|
|
<h4 class="text-sm font-medium text-gray-600 dark:text-gray-400 mb-3">Horizontal Pills</h4>
|
|
<nav class="flex flex-wrap gap-2">
|
|
<template x-for="category in demoCategories" :key="category.id">
|
|
<a
|
|
:href="category.url"
|
|
class="px-4 py-2 rounded-full text-sm font-medium transition-colors"
|
|
:class="currentCategory?.id === category.id ? 'bg-purple-600 text-white' : 'bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600'"
|
|
@click.prevent
|
|
>
|
|
<span x-text="category.name"></span>
|
|
<span class="ml-1 text-xs opacity-75" x-text="'(' + category.product_count + ')'"></span>
|
|
</a>
|
|
</template>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
<button @click="copyCode(`{% raw %}{% from 'shared/macros/shop/category-nav.html' import category_nav, category_tree %}
|
|
|
|
{# Sidebar with nested categories #}
|
|
{{ category_nav(categories_var='categories', current_var='currentCategory', show_count=true) }}
|
|
|
|
{# Horizontal pills #}
|
|
{{ category_tree(categories_var='categories', layout='horizontal') }}{% endraw %}`)" class="mt-4 text-sm text-purple-600 hover:text-purple-700 dark:text-purple-400 flex items-center">
|
|
<span x-html="$icon('duplicate', 'w-4 h-4 mr-1')"></span>
|
|
Copy Code
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Breadcrumbs Demo (Priority 4) -->
|
|
<div class="mb-8 pt-8 border-t border-gray-200 dark:border-gray-700">
|
|
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-3">Breadcrumbs</h3>
|
|
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
|
|
Navigation trail showing category hierarchy with home link, separator icons, and current page indicator.
|
|
</p>
|
|
<div class="space-y-6">
|
|
{# Standard Breadcrumbs #}
|
|
<div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-4">
|
|
<h4 class="text-sm font-medium text-gray-600 dark:text-gray-400 mb-3">Standard Breadcrumbs</h4>
|
|
<nav aria-label="Breadcrumb" class="flex items-center text-sm">
|
|
<ol class="flex items-center flex-wrap gap-1">
|
|
<li class="flex items-center">
|
|
<a href="#" class="flex items-center gap-1 text-gray-500 dark:text-gray-400 hover:text-purple-600 dark:hover:text-purple-400 transition-colors" @click.prevent>
|
|
<span x-html="$icon('home', 'w-4 h-4')"></span>
|
|
<span class="sr-only sm:not-sr-only">Home</span>
|
|
</a>
|
|
</li>
|
|
<li class="flex items-center text-gray-400 dark:text-gray-500">
|
|
<span x-html="$icon('chevron-right', 'w-4 h-4')"></span>
|
|
</li>
|
|
<template x-for="(item, index) in demoBreadcrumbs" :key="index">
|
|
<li class="flex items-center">
|
|
<template x-if="item.url && index < demoBreadcrumbs.length - 1">
|
|
<a :href="item.url" class="text-gray-500 dark:text-gray-400 hover:text-purple-600 dark:hover:text-purple-400 transition-colors" x-text="item.label" @click.prevent></a>
|
|
</template>
|
|
<template x-if="!item.url || index === demoBreadcrumbs.length - 1">
|
|
<span class="text-gray-900 dark:text-white font-medium" x-text="item.label"></span>
|
|
</template>
|
|
<span x-show="index < demoBreadcrumbs.length - 1" class="mx-2 text-gray-400 dark:text-gray-500" x-html="$icon('chevron-right', 'w-4 h-4')"></span>
|
|
</li>
|
|
</template>
|
|
</ol>
|
|
</nav>
|
|
</div>
|
|
{# Compact Breadcrumbs #}
|
|
<div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-4">
|
|
<h4 class="text-sm font-medium text-gray-600 dark:text-gray-400 mb-3">Compact (Mobile-friendly)</h4>
|
|
<nav aria-label="Breadcrumb" class="flex items-center text-sm">
|
|
<a href="#" class="flex items-center gap-1 text-gray-500 dark:text-gray-400 hover:text-purple-600 dark:hover:text-purple-400 transition-colors" @click.prevent>
|
|
<span x-html="$icon('arrow-left', 'w-4 h-4')"></span>
|
|
<span>Audio</span>
|
|
</a>
|
|
<span class="mx-2 text-gray-400 dark:text-gray-500">/</span>
|
|
<span class="text-gray-900 dark:text-white font-medium">Headphones</span>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
<button @click="copyCode(`{% raw %}{% from 'shared/macros/shop/breadcrumbs.html' import shop_breadcrumbs, compact_breadcrumbs %}
|
|
|
|
{# Static breadcrumbs #}
|
|
{{ shop_breadcrumbs(items=[
|
|
{'label': 'Electronics', 'url': '/category/electronics'},
|
|
{'label': 'Audio', 'url': '/category/audio'},
|
|
{'label': 'Headphones'}
|
|
]) }}
|
|
|
|
{# Dynamic from Alpine.js #}
|
|
{{ shop_breadcrumbs(items_var='breadcrumbs') }}
|
|
|
|
{# Compact for mobile #}
|
|
{{ compact_breadcrumbs(parent={'label': 'Audio', 'url': '/audio'}, current='Headphones') }}{% endraw %}`)" class="mt-4 text-sm text-purple-600 hover:text-purple-700 dark:text-purple-400 flex items-center">
|
|
<span x-html="$icon('duplicate', 'w-4 h-4 mr-1')"></span>
|
|
Copy Code
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Search Bar Demo (Priority 4) -->
|
|
<div class="mb-8 pt-8 border-t border-gray-200 dark:border-gray-700">
|
|
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-3">Search Bar</h3>
|
|
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
|
|
Product search with autocomplete, recent searches, popular suggestions, and mobile-optimized full-screen search.
|
|
</p>
|
|
<div class="grid lg:grid-cols-2 gap-6">
|
|
{# Basic Search #}
|
|
<div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-4">
|
|
<h4 class="text-sm font-medium text-gray-600 dark:text-gray-400 mb-3">Basic Search</h4>
|
|
<form class="relative flex items-center gap-2" @submit.prevent>
|
|
<div class="relative flex-1">
|
|
<span class="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400 pointer-events-none">
|
|
<span x-html="$icon('search', 'w-full h-full')"></span>
|
|
</span>
|
|
<input
|
|
type="search"
|
|
placeholder="Search products..."
|
|
class="w-full py-2.5 pl-10 pr-4 text-sm bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 focus:border-purple-500 dark:focus:border-purple-400 focus:ring-2 focus:ring-purple-500/20 outline-none transition-colors"
|
|
>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
{# Search with Button #}
|
|
<div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-4">
|
|
<h4 class="text-sm font-medium text-gray-600 dark:text-gray-400 mb-3">With Search Button</h4>
|
|
<form class="relative flex items-center gap-2" @submit.prevent>
|
|
<div class="relative flex-1">
|
|
<span class="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400 pointer-events-none">
|
|
<span x-html="$icon('search', 'w-full h-full')"></span>
|
|
</span>
|
|
<input
|
|
type="search"
|
|
placeholder="What are you looking for?"
|
|
class="w-full py-2.5 pl-10 pr-4 text-sm bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 focus:border-purple-500 dark:focus:border-purple-400 focus:ring-2 focus:ring-purple-500/20 outline-none transition-colors"
|
|
>
|
|
</div>
|
|
<button type="submit" class="px-4 py-2.5 text-sm bg-purple-600 hover:bg-purple-700 text-white font-medium rounded-lg transition-colors">
|
|
Search
|
|
</button>
|
|
</form>
|
|
</div>
|
|
{# Autocomplete Search #}
|
|
<div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-4 lg:col-span-2">
|
|
<h4 class="text-sm font-medium text-gray-600 dark:text-gray-400 mb-3">With Autocomplete Dropdown</h4>
|
|
<div
|
|
x-data="{
|
|
query: '',
|
|
isOpen: false,
|
|
recentSearches: ['Wireless headphones', 'Smart watch', 'Bluetooth speaker'],
|
|
popularSearches: ['Electronics', 'Clothing', 'Home & Garden', 'Sports']
|
|
}"
|
|
class="relative max-w-xl"
|
|
@click.away="isOpen = false"
|
|
>
|
|
<form @submit.prevent>
|
|
<div class="relative">
|
|
<span class="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400 pointer-events-none">
|
|
<span x-html="$icon('search', 'w-full h-full')"></span>
|
|
</span>
|
|
<input
|
|
type="search"
|
|
x-model="query"
|
|
@focus="isOpen = true"
|
|
placeholder="Search products..."
|
|
autocomplete="off"
|
|
class="w-full py-2.5 pl-10 pr-10 text-sm bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 focus:border-purple-500 dark:focus:border-purple-400 focus:ring-2 focus:ring-purple-500/20 outline-none transition-colors"
|
|
>
|
|
<button
|
|
type="button"
|
|
x-show="query.length > 0"
|
|
@click="query = ''"
|
|
class="absolute right-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
|
|
>
|
|
<span x-html="$icon('x', 'w-full h-full')"></span>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
<div
|
|
x-show="isOpen && query.length < 2"
|
|
x-transition
|
|
class="absolute left-0 right-0 mt-2 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 overflow-hidden z-50"
|
|
>
|
|
<div class="py-2">
|
|
<div class="flex items-center justify-between px-4 py-2">
|
|
<span class="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Recent Searches</span>
|
|
<button type="button" class="text-xs text-purple-600 dark:text-purple-400 hover:underline">Clear</button>
|
|
</div>
|
|
<template x-for="term in recentSearches" :key="term">
|
|
<button type="button" @click="query = term" class="w-full flex items-center gap-3 px-4 py-2 text-left text-sm hover:bg-gray-50 dark:hover:bg-gray-700/50 text-gray-700 dark:text-gray-300">
|
|
<span x-html="$icon('clock', 'w-4 h-4 text-gray-400 flex-shrink-0')"></span>
|
|
<span x-text="term"></span>
|
|
</button>
|
|
</template>
|
|
<div class="border-t border-gray-200 dark:border-gray-700 mt-2 pt-2">
|
|
<div class="px-4 py-2">
|
|
<span class="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Popular Searches</span>
|
|
</div>
|
|
<template x-for="term in popularSearches" :key="term">
|
|
<button type="button" @click="query = term" class="w-full flex items-center gap-3 px-4 py-2 text-left text-sm hover:bg-gray-50 dark:hover:bg-gray-700/50 text-gray-700 dark:text-gray-300">
|
|
<span x-html="$icon('trending-up', 'w-4 h-4 text-gray-400 flex-shrink-0')"></span>
|
|
<span x-text="term"></span>
|
|
</button>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button @click="copyCode(`{% raw %}{% from 'shared/macros/shop/search-bar.html' import search_bar, search_autocomplete %}
|
|
|
|
{# Basic search #}
|
|
{{ search_bar(placeholder='Search products...') }}
|
|
|
|
{# With search button #}
|
|
{{ search_bar(placeholder='What are you looking for?', show_button=true) }}
|
|
|
|
{# With autocomplete dropdown #}
|
|
{{ search_autocomplete(search_endpoint='/api/products/search', show_recent=true, show_popular=true) }}{% endraw %}`)" class="mt-4 text-sm text-purple-600 hover:text-purple-700 dark:text-purple-400 flex items-center">
|
|
<span x-html="$icon('duplicate', 'w-4 h-4 mr-1')"></span>
|
|
Copy Code
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Filter Sidebar Demo (Priority 4) -->
|
|
<div class="mb-8 pt-8 border-t border-gray-200 dark:border-gray-700">
|
|
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-3">Filter Sidebar</h3>
|
|
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
|
|
Product filtering with price range, categories, brands, colors, sizes, ratings, and availability.
|
|
</p>
|
|
<div class="grid lg:grid-cols-3 gap-6">
|
|
{# Filter Sidebar #}
|
|
<div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-4">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<h4 class="text-sm font-semibold text-gray-900 dark:text-white">Filters</h4>
|
|
<button type="button" x-show="demoActiveFilters.categories?.length > 0 || demoActiveFilters.brands?.length > 0" @click="demoActiveFilters = {categories: [], brands: [], priceMin: undefined, priceMax: undefined, rating: undefined, attributes: {}, inStock: false}" class="text-xs text-purple-600 dark:text-purple-400 hover:underline">Clear all</button>
|
|
</div>
|
|
{# Categories #}
|
|
<div class="border-t border-gray-200 dark:border-gray-700 pt-4 mb-4">
|
|
<h5 class="text-sm font-medium text-gray-900 dark:text-white mb-3">Categories</h5>
|
|
<div class="space-y-2">
|
|
<template x-for="cat in demoFilters.categories" :key="cat.id">
|
|
<label class="flex items-center gap-3 cursor-pointer group">
|
|
<input type="checkbox" :value="cat.id" :checked="demoActiveFilters.categories?.includes(cat.id)" @change="demoActiveFilters.categories?.includes(cat.id) ? demoActiveFilters.categories = demoActiveFilters.categories.filter(c => c !== cat.id) : demoActiveFilters.categories = [...(demoActiveFilters.categories || []), cat.id]" class="w-4 h-4 rounded border-gray-300 dark:border-gray-600 text-purple-600 focus:ring-purple-500">
|
|
<span class="flex-1 text-sm text-gray-700 dark:text-gray-300" x-text="cat.name"></span>
|
|
<span class="text-xs text-gray-400" x-text="'(' + cat.count + ')'"></span>
|
|
</label>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
{# Price Range #}
|
|
<div class="border-t border-gray-200 dark:border-gray-700 pt-4 mb-4">
|
|
<h5 class="text-sm font-medium text-gray-900 dark:text-white mb-3">Price Range</h5>
|
|
<div class="flex items-center gap-3">
|
|
<div class="flex-1">
|
|
<div class="relative">
|
|
<span class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 text-sm">$</span>
|
|
<input type="number" x-model.number="demoActiveFilters.priceMin" placeholder="Min" class="w-full pl-7 pr-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white">
|
|
</div>
|
|
</div>
|
|
<span class="text-gray-400">-</span>
|
|
<div class="flex-1">
|
|
<div class="relative">
|
|
<span class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 text-sm">$</span>
|
|
<input type="number" x-model.number="demoActiveFilters.priceMax" placeholder="Max" class="w-full pl-7 pr-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{# Availability #}
|
|
<div class="border-t border-gray-200 dark:border-gray-700 pt-4">
|
|
<label class="flex items-center gap-3 cursor-pointer">
|
|
<input type="checkbox" x-model="demoActiveFilters.inStock" class="w-4 h-4 rounded border-gray-300 dark:border-gray-600 text-purple-600 focus:ring-purple-500">
|
|
<span class="text-sm text-gray-700 dark:text-gray-300">In Stock Only</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
{# Color & Size Filters #}
|
|
<div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-4">
|
|
<h4 class="text-sm font-semibold text-gray-900 dark:text-white mb-4">Attribute Filters</h4>
|
|
{# Colors #}
|
|
<div class="mb-4">
|
|
<h5 class="text-sm font-medium text-gray-900 dark:text-white mb-3">Color</h5>
|
|
<div class="flex flex-wrap gap-2">
|
|
<template x-for="color in demoFilters.attributes.color" :key="color.value">
|
|
<button type="button" @click="!demoActiveFilters.attributes.color ? demoActiveFilters.attributes.color = [color.value] : (demoActiveFilters.attributes.color.includes(color.value) ? demoActiveFilters.attributes.color = demoActiveFilters.attributes.color.filter(c => c !== color.value) : demoActiveFilters.attributes.color.push(color.value))" class="w-8 h-8 rounded-full border-2 transition-all" :class="demoActiveFilters.attributes.color?.includes(color.value) ? 'border-purple-500 ring-2 ring-purple-500/30' : 'border-gray-300 dark:border-gray-600 hover:border-gray-400'" :style="'background-color: ' + color.hex" :title="color.label">
|
|
<span class="sr-only" x-text="color.label"></span>
|
|
<span x-show="demoActiveFilters.attributes.color?.includes(color.value)" x-html="$icon('check', 'w-4 h-4 mx-auto')" :class="color.value === 'white' ? 'text-gray-800' : 'text-white'"></span>
|
|
</button>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
{# Sizes #}
|
|
<div>
|
|
<h5 class="text-sm font-medium text-gray-900 dark:text-white mb-3">Size</h5>
|
|
<div class="flex flex-wrap gap-2">
|
|
<template x-for="size in demoFilters.attributes.size" :key="size.value">
|
|
<button type="button" @click="!demoActiveFilters.attributes.size ? demoActiveFilters.attributes.size = [size.value] : (demoActiveFilters.attributes.size.includes(size.value) ? demoActiveFilters.attributes.size = demoActiveFilters.attributes.size.filter(s => s !== size.value) : demoActiveFilters.attributes.size.push(size.value))" class="px-3 py-1.5 text-sm border rounded-lg transition-colors" :class="demoActiveFilters.attributes.size?.includes(size.value) ? 'bg-purple-600 text-white border-purple-600' : 'bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border-gray-300 dark:border-gray-600 hover:border-purple-500'">
|
|
<span x-text="size.label"></span>
|
|
</button>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{# Rating & Sort #}
|
|
<div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-4">
|
|
<h4 class="text-sm font-semibold text-gray-900 dark:text-white mb-4">Rating & Sort</h4>
|
|
{# Rating Filter #}
|
|
<div class="mb-4">
|
|
<h5 class="text-sm font-medium text-gray-900 dark:text-white mb-3">Rating</h5>
|
|
<div class="space-y-2">
|
|
<template x-for="rating in demoFilters.ratings.slice(0, 4)" :key="rating.value">
|
|
<label class="flex items-center gap-3 cursor-pointer">
|
|
<input type="radio" name="demo-rating" :value="rating.value" :checked="demoActiveFilters.rating === rating.value" @change="demoActiveFilters.rating = rating.value" class="w-4 h-4 border-gray-300 dark:border-gray-600 text-purple-600 focus:ring-purple-500">
|
|
<span class="flex items-center gap-0.5">
|
|
<template x-for="i in 5" :key="i">
|
|
<span x-html="$icon('star', 'w-4 h-4')" :class="i <= rating.value ? 'text-yellow-400' : 'text-gray-300 dark:text-gray-600'"></span>
|
|
</template>
|
|
<span class="text-sm text-gray-500 dark:text-gray-400 ml-1">& up</span>
|
|
</span>
|
|
</label>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
{# Sort Dropdown #}
|
|
<div>
|
|
<h5 class="text-sm font-medium text-gray-900 dark:text-white mb-3">Sort By</h5>
|
|
<div x-data="{ open: false }" class="relative" @click.away="open = false">
|
|
<button type="button" @click="open = !open" class="w-full flex items-center justify-between px-4 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg text-sm text-gray-700 dark:text-gray-300">
|
|
<span x-text="[{value: 'relevance', label: 'Relevance'}, {value: 'price_asc', label: 'Price: Low to High'}, {value: 'price_desc', label: 'Price: High to Low'}, {value: 'newest', label: 'Newest First'}].find(o => o.value === demoSortBy)?.label || 'Relevance'"></span>
|
|
<span x-html="$icon('chevron-down', 'w-4 h-4 text-gray-400')"></span>
|
|
</button>
|
|
<div x-show="open" x-transition class="absolute left-0 right-0 mt-2 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 py-1 z-50">
|
|
<button type="button" @click="demoSortBy = 'relevance'; open = false" class="w-full px-4 py-2 text-left text-sm hover:bg-gray-100 dark:hover:bg-gray-700" :class="demoSortBy === 'relevance' ? 'text-purple-600 dark:text-purple-400 font-medium' : 'text-gray-700 dark:text-gray-300'">Relevance</button>
|
|
<button type="button" @click="demoSortBy = 'price_asc'; open = false" class="w-full px-4 py-2 text-left text-sm hover:bg-gray-100 dark:hover:bg-gray-700" :class="demoSortBy === 'price_asc' ? 'text-purple-600 dark:text-purple-400 font-medium' : 'text-gray-700 dark:text-gray-300'">Price: Low to High</button>
|
|
<button type="button" @click="demoSortBy = 'price_desc'; open = false" class="w-full px-4 py-2 text-left text-sm hover:bg-gray-100 dark:hover:bg-gray-700" :class="demoSortBy === 'price_desc' ? 'text-purple-600 dark:text-purple-400 font-medium' : 'text-gray-700 dark:text-gray-300'">Price: High to Low</button>
|
|
<button type="button" @click="demoSortBy = 'newest'; open = false" class="w-full px-4 py-2 text-left text-sm hover:bg-gray-100 dark:hover:bg-gray-700" :class="demoSortBy === 'newest' ? 'text-purple-600 dark:text-purple-400 font-medium' : 'text-gray-700 dark:text-gray-300'">Newest First</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button @click="copyCode(`{% raw %}{% from 'shared/macros/shop/filter-sidebar.html' import filter_sidebar, price_filter, rating_filter, sort_dropdown %}
|
|
|
|
{# Complete filter sidebar #}
|
|
{{ filter_sidebar(filters_var='filters', active_filters_var='activeFilters', on_change='filterProducts()') }}
|
|
|
|
{# Standalone price filter #}
|
|
{{ price_filter(min=0, max=500, on_change='updateFilters()') }}
|
|
|
|
{# Rating filter #}
|
|
{{ rating_filter(value_var='minRating', on_change='filterByRating()') }}
|
|
|
|
{# Sort dropdown #}
|
|
{{ sort_dropdown(value_var='sortBy', on_change='sortProducts()') }}{% endraw %}`)" class="mt-4 text-sm text-purple-600 hover:text-purple-700 dark:text-purple-400 flex items-center">
|
|
<span x-html="$icon('duplicate', 'w-4 h-4 mr-1')"></span>
|
|
Copy Code
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- PRIORITY 5: SOCIAL PROOF & TRUST -->
|
|
|
|
<!-- Star Rating -->
|
|
<section id="star-rating" class="scroll-mt-24">
|
|
{% from 'shared/macros/shop/star-rating.html' import star_rating, rating_input, rating_summary, compact_rating %}
|
|
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
|
|
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-6 flex items-center">
|
|
<span x-html="$icon('star', 'w-6 h-6 mr-2 text-yellow-400')"></span>
|
|
Star Rating
|
|
</h2>
|
|
<p class="text-gray-600 dark:text-gray-400 mb-6">
|
|
Flexible star rating components for displaying and collecting ratings.
|
|
</p>
|
|
|
|
<div class="space-y-8">
|
|
<!-- Static Star Ratings -->
|
|
<div>
|
|
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-4">Static Ratings</h3>
|
|
<div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
|
|
<div class="p-4 bg-gray-50 dark:bg-gray-900 rounded-lg">
|
|
<p class="text-sm text-gray-500 dark:text-gray-400 mb-2">Full Stars</p>
|
|
{{ star_rating(rating=4) }}
|
|
</div>
|
|
<div class="p-4 bg-gray-50 dark:bg-gray-900 rounded-lg">
|
|
<p class="text-sm text-gray-500 dark:text-gray-400 mb-2">Half Stars</p>
|
|
{{ star_rating(rating=4.5) }}
|
|
</div>
|
|
<div class="p-4 bg-gray-50 dark:bg-gray-900 rounded-lg">
|
|
<p class="text-sm text-gray-500 dark:text-gray-400 mb-2">Exact Precision</p>
|
|
{{ star_rating(rating=3.7, precision='exact') }}
|
|
</div>
|
|
<div class="p-4 bg-gray-50 dark:bg-gray-900 rounded-lg">
|
|
<p class="text-sm text-gray-500 dark:text-gray-400 mb-2">With Value</p>
|
|
{{ star_rating(rating=4.5, show_value=true) }}
|
|
</div>
|
|
<div class="p-4 bg-gray-50 dark:bg-gray-900 rounded-lg">
|
|
<p class="text-sm text-gray-500 dark:text-gray-400 mb-2">With Count</p>
|
|
{{ star_rating(rating=4.5, show_count=true, count=127) }}
|
|
</div>
|
|
<div class="p-4 bg-gray-50 dark:bg-gray-900 rounded-lg">
|
|
<p class="text-sm text-gray-500 dark:text-gray-400 mb-2">Sizes</p>
|
|
<div class="space-y-2">
|
|
{{ star_rating(rating=4, size='xs') }}
|
|
{{ star_rating(rating=4, size='sm') }}
|
|
{{ star_rating(rating=4, size='md') }}
|
|
{{ star_rating(rating=4, size='lg') }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Dynamic Rating -->
|
|
<div>
|
|
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-4">Dynamic Rating (Alpine.js)</h3>
|
|
<div class="p-4 bg-gray-50 dark:bg-gray-900 rounded-lg">
|
|
<div class="flex items-center gap-4 mb-4">
|
|
<span class="text-sm text-gray-500 dark:text-gray-400">Adjust rating:</span>
|
|
<input type="range" min="0" max="5" step="0.5" x-model.number="demoRating" class="w-48">
|
|
<span class="text-sm font-medium text-gray-900 dark:text-white" x-text="demoRating"></span>
|
|
</div>
|
|
{{ star_rating(rating_var='demoRating', show_value=true, show_count=true, count_var='demoReviewCount') }}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Compact Rating -->
|
|
<div>
|
|
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-4">Compact Rating</h3>
|
|
<div class="grid gap-4 md:grid-cols-3">
|
|
<div class="p-4 bg-gray-50 dark:bg-gray-900 rounded-lg">
|
|
<p class="text-sm text-gray-500 dark:text-gray-400 mb-2">Extra Small</p>
|
|
{{ compact_rating(rating=4.5, count=127, size='xs') }}
|
|
</div>
|
|
<div class="p-4 bg-gray-50 dark:bg-gray-900 rounded-lg">
|
|
<p class="text-sm text-gray-500 dark:text-gray-400 mb-2">Small</p>
|
|
{{ compact_rating(rating=4.5, count=127, size='sm') }}
|
|
</div>
|
|
<div class="p-4 bg-gray-50 dark:bg-gray-900 rounded-lg">
|
|
<p class="text-sm text-gray-500 dark:text-gray-400 mb-2">Medium</p>
|
|
{{ compact_rating(rating=4.5, count=127, size='md') }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Rating Input -->
|
|
<div>
|
|
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-4">Interactive Rating Input</h3>
|
|
<div class="grid gap-6 md:grid-cols-2">
|
|
<div class="p-4 bg-gray-50 dark:bg-gray-900 rounded-lg">
|
|
<p class="text-sm text-gray-500 dark:text-gray-400 mb-2">Standard Input</p>
|
|
{{ rating_input(model='demoUserRating', size='md') }}
|
|
</div>
|
|
<div class="p-4 bg-gray-50 dark:bg-gray-900 rounded-lg">
|
|
<p class="text-sm text-gray-500 dark:text-gray-400 mb-2">Large with Half Stars</p>
|
|
{{ rating_input(model='demoUserRating', size='lg', allow_half=true) }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Rating Summary -->
|
|
<div>
|
|
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-4">Rating Summary</h3>
|
|
<div class="p-4 bg-gray-50 dark:bg-gray-900 rounded-lg">
|
|
{{ rating_summary(rating_var='demoRating', count_var='demoReviewCount', distribution_var='demoRatingDistribution') }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<button @click="copyCode(`{% raw %}{% from 'shared/macros/shop/star-rating.html' import star_rating, rating_input, rating_summary, compact_rating %}
|
|
|
|
{# Static star rating #}
|
|
{{ star_rating(rating=4.5) }}
|
|
{{ star_rating(rating=4.5, show_value=true, show_count=true, count=127) }}
|
|
|
|
{# Dynamic rating from Alpine.js #}
|
|
{{ star_rating(rating_var='product.rating', show_count=true, count_var='product.review_count') }}
|
|
|
|
{# Compact rating for lists #}
|
|
{{ compact_rating(rating=4.5, count=127, size='sm') }}
|
|
|
|
{# Interactive rating input #}
|
|
{{ rating_input(model='userRating', size='lg', allow_half=true) }}
|
|
|
|
{# Rating summary with distribution #}
|
|
{{ rating_summary(rating_var='rating', count_var='reviewCount', distribution_var='ratingDistribution') }}{% endraw %}`)" class="mt-4 text-sm text-purple-600 hover:text-purple-700 dark:text-purple-400 flex items-center">
|
|
<span x-html="$icon('duplicate', 'w-4 h-4 mr-1')"></span>
|
|
Copy Code
|
|
</button>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Reviews -->
|
|
<section id="reviews" class="scroll-mt-24">
|
|
{% from 'shared/macros/shop/reviews.html' import review_card, review_list, review_form, review_summary_section %}
|
|
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
|
|
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-6 flex items-center">
|
|
<span x-html="$icon('chat', 'w-6 h-6 mr-2 text-purple-600 dark:text-purple-400')"></span>
|
|
Reviews
|
|
</h2>
|
|
<p class="text-gray-600 dark:text-gray-400 mb-6">
|
|
Complete review system with cards, lists, forms, and summary sections.
|
|
</p>
|
|
|
|
<div class="space-y-8">
|
|
<!-- Review Card -->
|
|
<div>
|
|
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-4">Review Card</h3>
|
|
<div class="p-4 bg-gray-50 dark:bg-gray-900 rounded-lg">
|
|
<template x-for="review in demoReviews.slice(0, 2)" :key="review.id">
|
|
<div class="mb-4 last:mb-0">
|
|
{{ review_card(review_var='review', on_helpful='demoMarkHelpful(review.id)') }}
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Review Summary Section -->
|
|
<div>
|
|
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-4">Review Summary Section</h3>
|
|
<div class="p-4 bg-gray-50 dark:bg-gray-900 rounded-lg">
|
|
{{ review_summary_section(
|
|
rating_var='demoRating',
|
|
count_var='demoReviewCount',
|
|
distribution_var='demoRatingDistribution',
|
|
on_write='showReviewForm = true'
|
|
) }}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Review Form -->
|
|
<div>
|
|
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-4">Review Form</h3>
|
|
<div class="p-4 bg-gray-50 dark:bg-gray-900 rounded-lg">
|
|
{{ review_form(
|
|
rating_model='demoNewReview.rating',
|
|
title_model='demoNewReview.title',
|
|
content_model='demoNewReview.content',
|
|
images_model='demoNewReview.images',
|
|
on_submit='demoSubmitReview()',
|
|
submitting_var='submittingReview'
|
|
) }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<button @click="copyCode(`{% raw %}{% from 'shared/macros/shop/reviews.html' import review_card, review_list, review_form, review_summary_section %}
|
|
|
|
{# Single review card #}
|
|
{{ review_card(review_var='review', on_helpful='markHelpful(review.id)') }}
|
|
|
|
{# Review list with sorting #}
|
|
{{ review_list(reviews_var='reviews', sort_var='reviewSort', on_helpful='markHelpful') }}
|
|
|
|
{# Review submission form #}
|
|
{{ review_form(
|
|
rating_model='newReview.rating',
|
|
title_model='newReview.title',
|
|
content_model='newReview.content',
|
|
on_submit='submitReview()',
|
|
submitting_var='submitting'
|
|
) }}
|
|
|
|
{# Complete review summary section #}
|
|
{{ review_summary_section(
|
|
rating_var='product.rating',
|
|
count_var='product.review_count',
|
|
distribution_var='product.rating_distribution',
|
|
on_write='openReviewForm()'
|
|
) }}{% endraw %}`)" class="mt-4 text-sm text-purple-600 hover:text-purple-700 dark:text-purple-400 flex items-center">
|
|
<span x-html="$icon('duplicate', 'w-4 h-4 mr-1')"></span>
|
|
Copy Code
|
|
</button>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Trust Badges -->
|
|
<section id="trust-badges" class="scroll-mt-24">
|
|
{% from 'shared/macros/shop/trust-badges.html' import trust_badges, trust_banner, payment_icons, guarantee_badge, security_seals, checkout_trust_section %}
|
|
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
|
|
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-6 flex items-center">
|
|
<span x-html="$icon('shield-check', 'w-6 h-6 mr-2 text-green-600 dark:text-green-400')"></span>
|
|
Trust Badges
|
|
</h2>
|
|
<p class="text-gray-600 dark:text-gray-400 mb-6">
|
|
Trust signals and security indicators to build customer confidence.
|
|
</p>
|
|
|
|
<div class="space-y-8">
|
|
<!-- Trust Badges Grid -->
|
|
<div>
|
|
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-4">Trust Badges</h3>
|
|
<div class="p-4 bg-gray-50 dark:bg-gray-900 rounded-lg">
|
|
{{ trust_badges(badges=['secure_payment', 'free_shipping', 'easy_returns', 'support_24_7'], layout='grid', size='md') }}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Trust Banner -->
|
|
<div>
|
|
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-4">Trust Banner</h3>
|
|
<div class="p-4 bg-gray-50 dark:bg-gray-900 rounded-lg">
|
|
{{ trust_banner(variant='detailed') }}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Payment Icons -->
|
|
<div>
|
|
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-4">Payment Icons</h3>
|
|
<div class="grid gap-4 md:grid-cols-2">
|
|
<div class="p-4 bg-gray-50 dark:bg-gray-900 rounded-lg">
|
|
<p class="text-sm text-gray-500 dark:text-gray-400 mb-2">All Methods</p>
|
|
{{ payment_icons(methods=['visa', 'mastercard', 'paypal', 'apple_pay', 'google_pay', 'amex']) }}
|
|
</div>
|
|
<div class="p-4 bg-gray-50 dark:bg-gray-900 rounded-lg">
|
|
<p class="text-sm text-gray-500 dark:text-gray-400 mb-2">With Label</p>
|
|
{{ payment_icons(methods=['visa', 'mastercard', 'paypal'], size='lg') }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Guarantee Badge -->
|
|
<div>
|
|
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-4">Guarantee Badges</h3>
|
|
<div class="grid gap-4 md:grid-cols-2">
|
|
<div class="p-4 bg-gray-50 dark:bg-gray-900 rounded-lg">
|
|
<p class="text-sm text-gray-500 dark:text-gray-400 mb-2">Money Back</p>
|
|
{{ guarantee_badge(type='money_back', days=30) }}
|
|
</div>
|
|
<div class="p-4 bg-gray-50 dark:bg-gray-900 rounded-lg">
|
|
<p class="text-sm text-gray-500 dark:text-gray-400 mb-2">Satisfaction</p>
|
|
{{ guarantee_badge(type='satisfaction', variant='filled') }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Security Seals -->
|
|
<div>
|
|
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-4">Security Seals</h3>
|
|
<div class="p-4 bg-gray-50 dark:bg-gray-900 rounded-lg">
|
|
{{ security_seals(seals=['ssl', 'secure_checkout', 'verified']) }}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Checkout Trust Section -->
|
|
<div>
|
|
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-4">Checkout Trust Section</h3>
|
|
<div class="p-4 bg-gray-50 dark:bg-gray-900 rounded-lg">
|
|
{{ checkout_trust_section() }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<button @click="copyCode(`{% raw %}{% from 'shared/macros/shop/trust-badges.html' import trust_badges, trust_banner, payment_icons, guarantee_badge, security_seals, checkout_trust_section %}
|
|
|
|
{# Trust badges grid #}
|
|
{{ trust_badges(badges=['secure_payment', 'free_shipping', 'easy_returns', 'support_24_7'], layout='grid') }}
|
|
|
|
{# Trust banner variants #}
|
|
{{ trust_banner() }}
|
|
{{ trust_banner(variant='compact') }}
|
|
{{ trust_banner(variant='detailed') }}
|
|
|
|
{# Payment method icons #}
|
|
{{ payment_icons(methods=['visa', 'mastercard', 'paypal', 'apple_pay']) }}
|
|
{{ payment_icons(methods=['visa', 'mastercard'], size='lg') }}
|
|
|
|
{# Guarantee badges #}
|
|
{{ guarantee_badge(type='money_back', days=30) }}
|
|
{{ guarantee_badge(type='satisfaction', variant='filled') }}
|
|
|
|
{# Security seals #}
|
|
{{ security_seals(seals=['ssl', 'verified']) }}
|
|
|
|
{# Complete checkout trust section #}
|
|
{{ checkout_trust_section() }}
|
|
{{ checkout_trust_section(show_guarantee=true, show_payment=true, show_security=false) }}{% endraw %}`)" class="mt-4 text-sm text-purple-600 hover:text-purple-700 dark:text-purple-400 flex items-center">
|
|
<span x-html="$icon('duplicate', 'w-4 h-4 mr-1')"></span>
|
|
Copy Code
|
|
</button>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- MACROS SECTION -->
|
|
<section id="macros" class="scroll-mt-24">
|
|
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
|
|
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-6 flex items-center">
|
|
<span x-html="$icon('template', 'w-6 h-6 mr-2 text-purple-600 dark:text-purple-400')"></span>
|
|
Jinja Macros
|
|
</h2>
|
|
|
|
<div class="mb-6 p-4 bg-blue-50 dark:bg-gray-700 border border-blue-200 dark:border-gray-600 rounded-lg">
|
|
<div class="flex items-start">
|
|
<span x-html="$icon('information-circle', 'w-5 h-5 text-blue-600 dark:text-blue-400 mr-2 flex-shrink-0 mt-0.5')"></span>
|
|
<div>
|
|
<p class="text-sm text-blue-800 dark:text-gray-200">
|
|
<strong>Reusable Components:</strong> Use Jinja macros from <code class="bg-blue-100 dark:bg-gray-600 px-1 rounded">shared/macros/</code> instead of copy-pasting HTML. This ensures consistency and makes updates easier.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Available Macros -->
|
|
<div class="mb-8">
|
|
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-4">Available Macro Files</h3>
|
|
<div class="grid gap-4 md:grid-cols-2">
|
|
<div class="p-4 bg-gray-50 dark:bg-gray-900 rounded-lg">
|
|
<h4 class="font-semibold text-gray-800 dark:text-gray-200 mb-2 flex items-center">
|
|
<span x-html="$icon('dots-horizontal', 'w-4 h-4 mr-2 text-purple-600 dark:text-purple-400')"></span>
|
|
pagination.html
|
|
</h4>
|
|
<p class="text-sm text-gray-600 dark:text-gray-400 mb-2">Table pagination with page numbers</p>
|
|
<code class="text-xs bg-gray-200 dark:bg-gray-700 px-2 py-1 rounded">pagination(), pagination_simple()</code>
|
|
</div>
|
|
<div class="p-4 bg-gray-50 dark:bg-gray-900 rounded-lg">
|
|
<h4 class="font-semibold text-gray-800 dark:text-gray-200 mb-2 flex items-center">
|
|
<span x-html="$icon('exclamation', 'w-4 h-4 mr-2 text-purple-600 dark:text-purple-400')"></span>
|
|
alerts.html
|
|
</h4>
|
|
<p class="text-sm text-gray-600 dark:text-gray-400 mb-2">Alerts, loading states, toasts</p>
|
|
<code class="text-xs bg-gray-200 dark:bg-gray-700 px-2 py-1 rounded">loading_state(), error_state(), alert(), toast()</code>
|
|
</div>
|
|
<div class="p-4 bg-gray-50 dark:bg-gray-900 rounded-lg">
|
|
<h4 class="font-semibold text-gray-800 dark:text-gray-200 mb-2 flex items-center">
|
|
<span x-html="$icon('tag', 'w-4 h-4 mr-2 text-purple-600 dark:text-purple-400')"></span>
|
|
badges.html
|
|
</h4>
|
|
<p class="text-sm text-gray-600 dark:text-gray-400 mb-2">Status badges and indicators</p>
|
|
<code class="text-xs bg-gray-200 dark:bg-gray-700 px-2 py-1 rounded">badge(), status_badge(), verification_badge(), role_badge()</code>
|
|
</div>
|
|
<div class="p-4 bg-gray-50 dark:bg-gray-900 rounded-lg">
|
|
<h4 class="font-semibold text-gray-800 dark:text-gray-200 mb-2 flex items-center">
|
|
<span x-html="$icon('cursor-click', 'w-4 h-4 mr-2 text-purple-600 dark:text-purple-400')"></span>
|
|
buttons.html
|
|
</h4>
|
|
<p class="text-sm text-gray-600 dark:text-gray-400 mb-2">Button variants and action buttons</p>
|
|
<code class="text-xs bg-gray-200 dark:bg-gray-700 px-2 py-1 rounded">btn_primary(), btn_secondary(), action_button()</code>
|
|
</div>
|
|
<div class="p-4 bg-gray-50 dark:bg-gray-900 rounded-lg">
|
|
<h4 class="font-semibold text-gray-800 dark:text-gray-200 mb-2 flex items-center">
|
|
<span x-html="$icon('clipboard-list', 'w-4 h-4 mr-2 text-purple-600 dark:text-purple-400')"></span>
|
|
forms.html
|
|
</h4>
|
|
<p class="text-sm text-gray-600 dark:text-gray-400 mb-2">Form inputs with validation</p>
|
|
<code class="text-xs bg-gray-200 dark:bg-gray-700 px-2 py-1 rounded">form_input(), form_select(), form_textarea()</code>
|
|
</div>
|
|
<div class="p-4 bg-gray-50 dark:bg-gray-900 rounded-lg">
|
|
<h4 class="font-semibold text-gray-800 dark:text-gray-200 mb-2 flex items-center">
|
|
<span x-html="$icon('table', 'w-4 h-4 mr-2 text-purple-600 dark:text-purple-400')"></span>
|
|
tables.html
|
|
</h4>
|
|
<p class="text-sm text-gray-600 dark:text-gray-400 mb-2">Table components and empty states</p>
|
|
<code class="text-xs bg-gray-200 dark:bg-gray-700 px-2 py-1 rounded">table_wrapper(), table_header(), table_empty_state()</code>
|
|
</div>
|
|
<div class="p-4 bg-gray-50 dark:bg-gray-900 rounded-lg">
|
|
<h4 class="font-semibold text-gray-800 dark:text-gray-200 mb-2 flex items-center">
|
|
<span x-html="$icon('collection', 'w-4 h-4 mr-2 text-purple-600 dark:text-purple-400')"></span>
|
|
cards.html
|
|
</h4>
|
|
<p class="text-sm text-gray-600 dark:text-gray-400 mb-2">Stat cards and info cards</p>
|
|
<code class="text-xs bg-gray-200 dark:bg-gray-700 px-2 py-1 rounded">stat_card(), card(), info_card(), coming_soon_card()</code>
|
|
</div>
|
|
<div class="p-4 bg-gray-50 dark:bg-gray-900 rounded-lg">
|
|
<h4 class="font-semibold text-gray-800 dark:text-gray-200 mb-2 flex items-center">
|
|
<span x-html="$icon('menu-alt-2', 'w-4 h-4 mr-2 text-purple-600 dark:text-purple-400')"></span>
|
|
headers.html
|
|
</h4>
|
|
<p class="text-sm text-gray-600 dark:text-gray-400 mb-2">Page headers and breadcrumbs</p>
|
|
<code class="text-xs bg-gray-200 dark:bg-gray-700 px-2 py-1 rounded">page_header(), section_header(), breadcrumbs()</code>
|
|
</div>
|
|
<div class="p-4 bg-gray-50 dark:bg-gray-900 rounded-lg">
|
|
<h4 class="font-semibold text-gray-800 dark:text-gray-200 mb-2 flex items-center">
|
|
<span x-html="$icon('view-boards', 'w-4 h-4 mr-2 text-purple-600 dark:text-purple-400')"></span>
|
|
tabs.html
|
|
</h4>
|
|
<p class="text-sm text-gray-600 dark:text-gray-400 mb-2">Tab navigation components</p>
|
|
<code class="text-xs bg-gray-200 dark:bg-gray-700 px-2 py-1 rounded">tabs_nav(), tabs_inline(), tab_button()</code>
|
|
</div>
|
|
<div class="p-4 bg-gray-50 dark:bg-gray-900 rounded-lg">
|
|
<h4 class="font-semibold text-gray-800 dark:text-gray-200 mb-2 flex items-center">
|
|
<span x-html="$icon('adjustments', 'w-4 h-4 mr-2 text-purple-600 dark:text-purple-400')"></span>
|
|
inputs.html
|
|
</h4>
|
|
<p class="text-sm text-gray-600 dark:text-gray-400 mb-2">Specialized input components</p>
|
|
<code class="text-xs bg-gray-200 dark:bg-gray-700 px-2 py-1 rounded">search_autocomplete(), number_stepper()</code>
|
|
</div>
|
|
<div class="p-4 bg-gray-50 dark:bg-gray-900 rounded-lg">
|
|
<h4 class="font-semibold text-gray-800 dark:text-gray-200 mb-2 flex items-center">
|
|
<span x-html="$icon('translate', 'w-4 h-4 mr-2 text-purple-600 dark:text-purple-400')"></span>
|
|
language_selector.html
|
|
</h4>
|
|
<p class="text-sm text-gray-600 dark:text-gray-400 mb-2">Language/i18n components</p>
|
|
<code class="text-xs bg-gray-200 dark:bg-gray-700 px-2 py-1 rounded">language_selector(), language_selector_compact(), language_toggle()</code>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Usage Example -->
|
|
<div>
|
|
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-3">Usage Example</h3>
|
|
<div class="bg-gray-900 rounded-lg p-4 mb-3 overflow-x-auto">
|
|
<pre class="text-sm text-gray-100"><code>{# Import at the top of your template #}
|
|
{% raw %}{% from 'shared/macros/pagination.html' import pagination %}
|
|
{% from 'shared/macros/alerts.html' import loading_state, error_state %}
|
|
{% from 'shared/macros/badges.html' import status_badge, verification_badge %}
|
|
{% from 'shared/macros/buttons.html' import btn_primary, action_button %}
|
|
{% from 'shared/macros/cards.html' import stat_card %}
|
|
{% from 'shared/macros/headers.html' import page_header %}
|
|
|
|
{# Then use in your template #}
|
|
{{ page_header('User Management', action_label='Create User', action_url='/users/create') }}
|
|
|
|
{{ loading_state('Loading users...') }}
|
|
{{ error_state('Error loading users') }}
|
|
|
|
{# In your table #}
|
|
{{ pagination() }}{% endraw %}</code></pre>
|
|
</div>
|
|
<button @click="copyCode(`{% raw %}{% from 'shared/macros/pagination.html' import pagination %}
|
|
{% from 'shared/macros/alerts.html' import loading_state, error_state %}
|
|
{% from 'shared/macros/badges.html' import status_badge, verification_badge %}
|
|
|
|
{{ page_header('Page Title', action_label='Action', action_url='/action') }}
|
|
{{ loading_state('Loading...') }}
|
|
{{ pagination() }}{% endraw %}`)" class="text-sm text-purple-600 hover:text-purple-700 dark:text-purple-400 flex items-center">
|
|
<span x-html="$icon('duplicate', 'w-4 h-4 mr-1')"></span>
|
|
Copy Code
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Number Stepper Component -->
|
|
<div class="mt-8 pt-8 border-t border-gray-200 dark:border-gray-700">
|
|
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-3">Number Stepper</h3>
|
|
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
|
|
A number input with +/- buttons. Use <code class="bg-gray-100 dark:bg-gray-700 px-1 rounded">number_stepper()</code> from <code class="bg-gray-100 dark:bg-gray-700 px-1 rounded">inputs.html</code>. Supports size variants and min/max bounds.
|
|
</p>
|
|
<div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-4 mb-3">
|
|
<!-- Live Demo -->
|
|
<div class="space-y-6">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">Small Size</label>
|
|
<div class="flex" role="group" aria-label="Quantity">
|
|
<button type="button" @click="demoQuantitySm = Math.max(1, demoQuantitySm - 1)" :disabled="demoQuantitySm <= 1" class="px-2 py-1 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-600 border border-gray-300 dark:border-gray-600 border-r-0 rounded-l-md hover:bg-gray-200 dark:hover:bg-gray-500 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed transition-colors">
|
|
<span x-html="$icon('minus', 'w-3 h-3')"></span>
|
|
</button>
|
|
<input type="number" x-model.number="demoQuantitySm" min="1" max="10" class="no-spinner px-2 py-1 text-xs w-12 text-center text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border-y border-gray-300 dark:border-gray-600 focus:border-purple-400 focus:outline-none" />
|
|
<button type="button" @click="demoQuantitySm = Math.min(10, demoQuantitySm + 1)" :disabled="demoQuantitySm >= 10" class="px-2 py-1 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-600 border border-gray-300 dark:border-gray-600 border-l-0 rounded-r-md hover:bg-gray-200 dark:hover:bg-gray-500 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed transition-colors">
|
|
<span x-html="$icon('plus', 'w-3 h-3')"></span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">Medium Size (default)</label>
|
|
<div class="flex" role="group" aria-label="Quantity">
|
|
<button type="button" @click="demoQuantityMd = Math.max(1, demoQuantityMd - 1)" :disabled="demoQuantityMd <= 1" class="px-3 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-600 border border-gray-300 dark:border-gray-600 border-r-0 rounded-l-md hover:bg-gray-200 dark:hover:bg-gray-500 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed transition-colors">
|
|
<span x-html="$icon('minus', 'w-4 h-4')"></span>
|
|
</button>
|
|
<input type="number" x-model.number="demoQuantityMd" min="1" max="99" class="no-spinner px-3 py-2 text-sm w-16 text-center text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border-y border-gray-300 dark:border-gray-600 focus:border-purple-400 focus:outline-none" />
|
|
<button type="button" @click="demoQuantityMd = Math.min(99, demoQuantityMd + 1)" :disabled="demoQuantityMd >= 99" class="px-3 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-600 border border-gray-300 dark:border-gray-600 border-l-0 rounded-r-md hover:bg-gray-200 dark:hover:bg-gray-500 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed transition-colors">
|
|
<span x-html="$icon('plus', 'w-4 h-4')"></span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">Large Size (step: 100)</label>
|
|
<div class="flex" role="group" aria-label="Batch Size">
|
|
<button type="button" @click="demoQuantityLg = Math.max(100, demoQuantityLg - 100)" :disabled="demoQuantityLg <= 100" class="px-4 py-3 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-600 border border-gray-300 dark:border-gray-600 border-r-0 rounded-l-md hover:bg-gray-200 dark:hover:bg-gray-500 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed transition-colors">
|
|
<span x-html="$icon('minus', 'w-5 h-5')"></span>
|
|
</button>
|
|
<input type="number" x-model.number="demoQuantityLg" min="100" max="5000" step="100" class="no-spinner px-4 py-3 text-base w-20 text-center text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border-y border-gray-300 dark:border-gray-600 focus:border-purple-400 focus:outline-none" />
|
|
<button type="button" @click="demoQuantityLg = Math.min(5000, demoQuantityLg + 100)" :disabled="demoQuantityLg >= 5000" class="px-4 py-3 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-600 border border-gray-300 dark:border-gray-600 border-l-0 rounded-r-md hover:bg-gray-200 dark:hover:bg-gray-500 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed transition-colors">
|
|
<span x-html="$icon('plus', 'w-5 h-5')"></span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button @click="copyCode(`{% raw %}{% from 'shared/macros/inputs.html' import number_stepper %}
|
|
|
|
{# Basic usage - cart quantity #}
|
|
{{ number_stepper(model='quantity', min=1, max=99) }}
|
|
|
|
{# Small size - compact for tables #}
|
|
{{ number_stepper(model='item.qty', min=1, max='item.stock', size='sm') }}
|
|
|
|
{# Large size with custom step #}
|
|
{{ number_stepper(model='batchSize', min=100, max=5000, step=100, size='lg', label='Batch Size') }}
|
|
|
|
{# With disabled state #}
|
|
{{ number_stepper(model='qty', min=1, disabled_var='isLoading') }}{% endraw %}`)" class="text-sm text-purple-600 hover:text-purple-700 dark:text-purple-400 flex items-center">
|
|
<span x-html="$icon('duplicate', 'w-4 h-4 mr-1')"></span>
|
|
Copy Code
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Language Selector Component -->
|
|
<div class="mt-8 pt-8 border-t border-gray-200 dark:border-gray-700">
|
|
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-3">Language Selector</h3>
|
|
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
|
|
Language selector components for multi-language support. Use macros from <code class="bg-gray-100 dark:bg-gray-700 px-1 rounded">language_selector.html</code>. Supports dropdown, compact (icon-only), and toggle variants.
|
|
</p>
|
|
<div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-4 mb-3">
|
|
<!-- Live Demo -->
|
|
<div class="space-y-6">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">Full Selector (with labels)</label>
|
|
{% from 'shared/macros/language_selector.html' import language_selector %}
|
|
{{ language_selector(current_language='fr', enabled_languages=['en', 'fr', 'de', 'lb'], position='left') }}
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">Compact Selector (flag only)</label>
|
|
{% from 'shared/macros/language_selector.html' import language_selector_compact %}
|
|
{{ language_selector_compact(current_language='de', enabled_languages=['en', 'fr', 'de'], position='left') }}
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">Toggle (2 languages)</label>
|
|
{% from 'shared/macros/language_selector.html' import language_toggle %}
|
|
{{ language_toggle(current_language='fr', enabled_languages=['fr', 'de']) }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bg-gray-900 rounded-lg p-4 mb-3 overflow-x-auto">
|
|
<pre class="text-sm text-gray-100"><code>{% raw %}{% from 'shared/macros/language_selector.html' import language_selector, language_selector_compact, language_toggle %}
|
|
|
|
{# Full dropdown with labels #}
|
|
{{ language_selector(
|
|
current_language='fr',
|
|
enabled_languages=['en', 'fr', 'de', 'lb'],
|
|
position='right'
|
|
) }}
|
|
|
|
{# Compact (flag icon only) - good for headers #}
|
|
{{ language_selector_compact(
|
|
current_language='fr',
|
|
enabled_languages=['en', 'fr', 'de'],
|
|
position='right'
|
|
) }}
|
|
|
|
{# Toggle for 2 languages #}
|
|
{{ language_toggle(
|
|
current_language='fr',
|
|
enabled_languages=['fr', 'de']
|
|
) }}{% endraw %}</code></pre>
|
|
</div>
|
|
<button @click="copyCode(`{% raw %}{% from 'shared/macros/language_selector.html' import language_selector, language_selector_compact, language_toggle %}
|
|
|
|
{# Full dropdown with labels #}
|
|
{{ language_selector(current_language='fr', enabled_languages=['en', 'fr', 'de', 'lb'], position='right') }}
|
|
|
|
{# Compact (flag icon only) #}
|
|
{{ language_selector_compact(current_language='fr', enabled_languages=['en', 'fr', 'de'], position='right') }}
|
|
|
|
{# Toggle for 2 languages #}
|
|
{{ language_toggle(current_language='fr', enabled_languages=['fr', 'de']) }}{% endraw %}`)" class="text-sm text-purple-600 hover:text-purple-700 dark:text-purple-400 flex items-center">
|
|
<span x-html="$icon('duplicate', 'w-4 h-4 mr-1')"></span>
|
|
Copy Code
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- PAGINATION SECTION -->
|
|
<section id="pagination" class="scroll-mt-24">
|
|
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
|
|
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-6 flex items-center">
|
|
<span x-html="$icon('dots-horizontal', 'w-6 h-6 mr-2 text-purple-600 dark:text-purple-400')"></span>
|
|
Pagination
|
|
</h2>
|
|
|
|
<!-- Full Pagination -->
|
|
<div class="mb-8">
|
|
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-3">Full Pagination (with page numbers)</h3>
|
|
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
|
|
Use the <code class="bg-gray-100 dark:bg-gray-700 px-1 rounded">pagination()</code> macro. Requires Alpine.js properties: <code class="bg-gray-100 dark:bg-gray-700 px-1 rounded">pagination</code>, <code class="bg-gray-100 dark:bg-gray-700 px-1 rounded">startIndex</code>, <code class="bg-gray-100 dark:bg-gray-700 px-1 rounded">endIndex</code>, <code class="bg-gray-100 dark:bg-gray-700 px-1 rounded">totalPages</code>, <code class="bg-gray-100 dark:bg-gray-700 px-1 rounded">pageNumbers</code>.
|
|
</p>
|
|
<div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-4 mb-3">
|
|
<!-- Live example of pagination -->
|
|
<div class="grid px-4 py-3 text-xs font-semibold tracking-wide text-gray-500 uppercase border dark:border-gray-700 bg-gray-50 sm:grid-cols-9 dark:text-gray-400 dark:bg-gray-800 rounded-lg">
|
|
<span class="flex items-center col-span-3">
|
|
Showing <span class="mx-1 font-bold">1</span>-<span class="mx-1 font-bold">10</span> of <span class="mx-1 font-bold">97</span>
|
|
</span>
|
|
<span class="col-span-2"></span>
|
|
<span class="flex col-span-4 mt-2 sm:mt-auto sm:justify-end">
|
|
<nav aria-label="Table navigation">
|
|
<ul class="inline-flex items-center">
|
|
<li>
|
|
<button class="px-3 py-1 rounded-md rounded-l-lg focus:outline-none opacity-50 cursor-not-allowed" disabled>
|
|
<svg class="w-4 h-4 fill-current" viewBox="0 0 20 20"><path d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" fill-rule="evenodd"></path></svg>
|
|
</button>
|
|
</li>
|
|
<li><button class="px-3 py-1 rounded-md text-white bg-purple-600 border border-purple-600">1</button></li>
|
|
<li><button class="px-3 py-1 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700">2</button></li>
|
|
<li><button class="px-3 py-1 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700">3</button></li>
|
|
<li><span class="px-3 py-1">...</span></li>
|
|
<li><button class="px-3 py-1 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700">10</button></li>
|
|
<li>
|
|
<button class="px-3 py-1 rounded-md rounded-r-lg hover:bg-gray-100 dark:hover:bg-gray-700">
|
|
<svg class="w-4 h-4 fill-current" viewBox="0 0 20 20"><path d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" fill-rule="evenodd"></path></svg>
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<button @click="copyCode(`{% raw %}{% from 'shared/macros/pagination.html' import pagination %}
|
|
|
|
{# In your template (inside the table wrapper) #}
|
|
{{ pagination() }}{% endraw %}
|
|
|
|
{# Required JS properties in your Alpine component: #}
|
|
pagination: { page: 1, per_page: 10, total: 0, pages: 0 },
|
|
|
|
get totalPages() { return this.pagination.pages; },
|
|
get startIndex() { return this.pagination.total === 0 ? 0 : (this.pagination.page - 1) * this.pagination.per_page + 1; },
|
|
get endIndex() { return Math.min(this.pagination.page * this.pagination.per_page, this.pagination.total); },
|
|
get pageNumbers() {
|
|
const pages = [];
|
|
const totalPages = this.totalPages;
|
|
const current = this.pagination.page;
|
|
if (totalPages <= 7) {
|
|
for (let i = 1; i <= totalPages; i++) pages.push(i);
|
|
} else {
|
|
pages.push(1);
|
|
if (current > 3) pages.push('...');
|
|
for (let i = Math.max(2, current - 1); i <= Math.min(totalPages - 1, current + 1); i++) pages.push(i);
|
|
if (current < totalPages - 2) pages.push('...');
|
|
pages.push(totalPages);
|
|
}
|
|
return pages;
|
|
},
|
|
previousPage() { if (this.pagination.page > 1) { this.pagination.page--; this.load(); } },
|
|
nextPage() { if (this.pagination.page < this.totalPages) { this.pagination.page++; this.load(); } },
|
|
goToPage(n) { if (n !== '...' && n >= 1 && n <= this.totalPages) { this.pagination.page = n; this.load(); } }`)" class="text-sm text-purple-600 hover:text-purple-700 dark:text-purple-400 flex items-center">
|
|
<span x-html="$icon('duplicate', 'w-4 h-4 mr-1')"></span>
|
|
Copy Code
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Simple Pagination -->
|
|
<div>
|
|
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-3">Simple Pagination (prev/next only)</h3>
|
|
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
|
|
Use <code class="bg-gray-100 dark:bg-gray-700 px-1 rounded">pagination_simple()</code> for a simpler prev/next navigation.
|
|
</p>
|
|
<div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-4 mb-3">
|
|
<div class="flex items-center justify-between px-4 py-3 bg-white border dark:border-gray-700 dark:bg-gray-800 rounded-lg">
|
|
<span class="text-sm text-gray-700 dark:text-gray-400">
|
|
Showing <span class="font-semibold">1</span>-<span class="font-semibold">10</span> of <span class="font-semibold">97</span> results
|
|
</span>
|
|
<div class="flex items-center space-x-2">
|
|
<button disabled class="px-3 py-1 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md opacity-50 cursor-not-allowed">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
|
|
</button>
|
|
<span class="text-sm text-gray-700 dark:text-gray-400">Page 1 of 10</span>
|
|
<button class="px-3 py-1 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md hover:bg-gray-50 dark:hover:bg-gray-600">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button @click="copyCode(`{% raw %}{% from 'shared/macros/pagination.html' import pagination_simple %}
|
|
{{ pagination_simple() }}{% endraw %}`)" class="text-sm text-purple-600 hover:text-purple-700 dark:text-purple-400 flex items-center">
|
|
<span x-html="$icon('duplicate', 'w-4 h-4 mr-1')"></span>
|
|
Copy Code
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- TABS SECTION -->
|
|
<section id="tabs" class="scroll-mt-24">
|
|
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
|
|
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-6 flex items-center">
|
|
<span x-html="$icon('view-boards', 'w-6 h-6 mr-2 text-purple-600 dark:text-purple-400')"></span>
|
|
Tabs
|
|
</h2>
|
|
|
|
<div class="mb-6 p-4 bg-blue-50 dark:bg-gray-700 border border-blue-200 dark:border-gray-600 rounded-lg">
|
|
<div class="flex items-start">
|
|
<span x-html="$icon('information-circle', 'w-5 h-5 text-blue-600 dark:text-blue-400 mr-2 flex-shrink-0 mt-0.5')"></span>
|
|
<div>
|
|
<p class="text-sm text-blue-800 dark:text-gray-200">
|
|
<strong>Jinja Macros Available:</strong> Use the <code class="bg-blue-100 dark:bg-gray-600 px-1 rounded">tabs_nav</code>, <code class="bg-blue-100 dark:bg-gray-600 px-1 rounded">tabs_inline</code>, and <code class="bg-blue-100 dark:bg-gray-600 px-1 rounded">tab_button</code> macros from <code class="bg-blue-100 dark:bg-gray-600 px-1 rounded">shared/macros/tabs.html</code>.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Navigation Tabs -->
|
|
<div class="mb-8">
|
|
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-3">Navigation Tabs (with icons)</h3>
|
|
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
|
|
Standalone tabs for page-level navigation. Use <code class="bg-gray-100 dark:bg-gray-700 px-1 rounded">tabs_nav()</code> with <code class="bg-gray-100 dark:bg-gray-700 px-1 rounded">tab_button()</code>.
|
|
</p>
|
|
<div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-4 mb-3">
|
|
<!-- Live Demo -->
|
|
<div class="mb-6">
|
|
<div class="border-b border-gray-200 dark:border-gray-700">
|
|
<nav class="-mb-px flex space-x-8">
|
|
<button
|
|
@click="demoActiveTab = 'tab1'"
|
|
:class="demoActiveTab === 'tab1' ? 'border-purple-500 text-purple-600 dark:text-purple-400' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300'"
|
|
class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm transition-colors"
|
|
>
|
|
<span x-html="$icon('home', 'inline w-5 h-5 mr-2')"></span>
|
|
Dashboard
|
|
</button>
|
|
<button
|
|
@click="demoActiveTab = 'tab2'"
|
|
:class="demoActiveTab === 'tab2' ? 'border-purple-500 text-purple-600 dark:text-purple-400' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300'"
|
|
class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm transition-colors"
|
|
>
|
|
<span x-html="$icon('cog', 'inline w-5 h-5 mr-2')"></span>
|
|
Settings
|
|
</button>
|
|
<button
|
|
@click="demoActiveTab = 'tab3'"
|
|
:class="demoActiveTab === 'tab3' ? 'border-purple-500 text-purple-600 dark:text-purple-400' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300'"
|
|
class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm transition-colors"
|
|
>
|
|
<span x-html="$icon('user', 'inline w-5 h-5 mr-2')"></span>
|
|
Profile
|
|
</button>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tab Content -->
|
|
<div class="p-4 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
|
|
<div x-show="demoActiveTab === 'tab1'">
|
|
<p class="text-gray-600 dark:text-gray-400">Dashboard content goes here...</p>
|
|
</div>
|
|
<div x-show="demoActiveTab === 'tab2'">
|
|
<p class="text-gray-600 dark:text-gray-400">Settings content goes here...</p>
|
|
</div>
|
|
<div x-show="demoActiveTab === 'tab3'">
|
|
<p class="text-gray-600 dark:text-gray-400">Profile content goes here...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button @click="copyCode(`{% raw %}{% from 'shared/macros/tabs.html' import tabs_nav, tab_button %}
|
|
|
|
{# Navigation tabs with icons #}
|
|
{% call tabs_nav() %}
|
|
{{ tab_button('dashboard', 'Dashboard', icon='home') }}
|
|
{{ tab_button('settings', 'Settings', icon='cog') }}
|
|
{{ tab_button('profile', 'Profile', icon='user') }}
|
|
{% endcall %}
|
|
|
|
{# Tab content panels #}
|
|
<div x-show="activeTab === 'dashboard'" x-transition>
|
|
Dashboard content...
|
|
</div>
|
|
<div x-show="activeTab === 'settings'" x-transition>
|
|
Settings content...
|
|
</div>{% endraw %}`)" class="text-sm text-purple-600 hover:text-purple-700 dark:text-purple-400 flex items-center">
|
|
<span x-html="$icon('duplicate', 'w-4 h-4 mr-1')"></span>
|
|
Copy Code
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Inline Tabs with Counts -->
|
|
<div class="mb-8">
|
|
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-3">Inline Tabs (with count badges)</h3>
|
|
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
|
|
Compact tabs for use inside cards or alongside other elements. Use <code class="bg-gray-100 dark:bg-gray-700 px-1 rounded">tabs_inline()</code>.
|
|
</p>
|
|
<div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-4 mb-3">
|
|
<!-- Live Demo -->
|
|
<div class="bg-white dark:bg-gray-800 rounded-lg p-4 border border-gray-200 dark:border-gray-700">
|
|
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
|
|
<div class="flex space-x-2 border-b border-gray-200 dark:border-gray-700">
|
|
<button
|
|
@click="demoActiveTab = 'all'"
|
|
:class="demoActiveTab === 'all' ? 'border-purple-500 text-purple-600 dark:text-purple-400' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300'"
|
|
class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm transition-colors"
|
|
>
|
|
All Items
|
|
<span class="ml-2 px-2 py-0.5 text-xs rounded-full bg-gray-100 dark:bg-gray-700">42</span>
|
|
</button>
|
|
<button
|
|
@click="demoActiveTab = 'active'"
|
|
:class="demoActiveTab === 'active' ? 'border-purple-500 text-purple-600 dark:text-purple-400' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300'"
|
|
class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm transition-colors"
|
|
>
|
|
Active
|
|
<span class="ml-2 px-2 py-0.5 text-xs rounded-full bg-gray-100 dark:bg-gray-700">28</span>
|
|
</button>
|
|
<button
|
|
@click="demoActiveTab = 'archived'"
|
|
:class="demoActiveTab === 'archived' ? 'border-purple-500 text-purple-600 dark:text-purple-400' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300'"
|
|
class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm transition-colors"
|
|
>
|
|
Archived
|
|
<span class="ml-2 px-2 py-0.5 text-xs rounded-full bg-gray-100 dark:bg-gray-700">14</span>
|
|
</button>
|
|
</div>
|
|
<div class="text-sm text-gray-500 dark:text-gray-400">
|
|
Search or filters here...
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button @click="copyCode(`{% raw %}{% from 'shared/macros/tabs.html' import tabs_inline, tab_button %}
|
|
|
|
{# Inline tabs with count badges - inside a card #}
|
|
<div class="flex justify-between gap-4">
|
|
{% call tabs_inline() %}
|
|
{{ tab_button('all', 'All Items', count_var='allItems.length') }}
|
|
{{ tab_button('active', 'Active', count_var='activeItems.length') }}
|
|
{{ tab_button('archived', 'Archived', count_var='archivedItems.length') }}
|
|
{% endcall %}
|
|
|
|
{# Search or other content alongside #}
|
|
<div>Search...</div>
|
|
</div>{% endraw %}`)" class="text-sm text-purple-600 hover:text-purple-700 dark:text-purple-400 flex items-center">
|
|
<span x-html="$icon('duplicate', 'w-4 h-4 mr-1')"></span>
|
|
Copy Code
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Tabs with Custom Click Handlers -->
|
|
<div>
|
|
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-3">Tabs with Custom Click Handlers</h3>
|
|
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
|
|
When you need to run additional logic on tab change (e.g., load data), use the <code class="bg-gray-100 dark:bg-gray-700 px-1 rounded">onclick</code> parameter.
|
|
</p>
|
|
<div class="bg-gray-900 rounded-lg p-4 mb-3 overflow-x-auto">
|
|
<pre class="text-sm text-gray-100"><code>{% raw %}{% from 'shared/macros/tabs.html' import tabs_nav, tab_button %}
|
|
|
|
{# Tabs with custom click handlers and different tab variable #}
|
|
{% call tabs_nav() %}
|
|
{{ tab_button('database', 'Database Logs',
|
|
tab_var='logSource',
|
|
icon='database',
|
|
onclick="logSource = 'database'; loadDatabaseLogs()") }}
|
|
{{ tab_button('file', 'File Logs',
|
|
tab_var='logSource',
|
|
icon='document',
|
|
onclick="logSource = 'file'; loadFileLogs()") }}
|
|
{% endcall %}{% endraw %}</code></pre>
|
|
</div>
|
|
<button @click="copyCode(`{% raw %}{% from 'shared/macros/tabs.html' import tabs_nav, tab_button %}
|
|
|
|
{% call tabs_nav() %}
|
|
{{ tab_button('database', 'Database Logs',
|
|
tab_var='logSource',
|
|
icon='database',
|
|
onclick="logSource = 'database'; loadDatabaseLogs()") }}
|
|
{{ tab_button('file', 'File Logs',
|
|
tab_var='logSource',
|
|
icon='document',
|
|
onclick="logSource = 'file'; loadFileLogs()") }}
|
|
{% endcall %}{% endraw %}`)" class="text-sm text-purple-600 hover:text-purple-700 dark:text-purple-400 flex items-center">
|
|
<span x-html="$icon('duplicate', 'w-4 h-4 mr-1')"></span>
|
|
Copy Code
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- FORMS SECTION -->
|
|
<section id="forms" class="scroll-mt-24">
|
|
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
|
|
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-6 flex items-center">
|
|
<span x-html="$icon('clipboard-list', 'w-6 h-6 mr-2 text-purple-600 dark:text-purple-400')"></span>
|
|
Forms
|
|
</h2>
|
|
|
|
<!-- Basic Input -->
|
|
<div class="mb-8">
|
|
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-3">Basic Input</h3>
|
|
<div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-4 mb-3">
|
|
<label class="block mb-4 text-sm">
|
|
<span class="text-gray-700 dark:text-gray-400">Field Label</span>
|
|
<input
|
|
type="text"
|
|
x-model="exampleForm.textInput"
|
|
placeholder="Enter text..."
|
|
class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray form-input"
|
|
/>
|
|
</label>
|
|
</div>
|
|
<button @click="copyCode(`<label class="block mb-4 text-sm">
|
|
<span class="text-gray-700 dark:text-gray-400">Field Label</span>
|
|
<input
|
|
type="text"
|
|
x-model="formData.field"
|
|
class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray form-input"
|
|
/>
|
|
</label>`)" class="text-sm text-purple-600 hover:text-purple-700 dark:text-purple-400 flex items-center">
|
|
<span x-html="$icon('duplicate', 'w-4 h-4 mr-1')"></span>
|
|
Copy Code
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Required Field with Error -->
|
|
<div class="mb-8">
|
|
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-3">Required Field with Error</h3>
|
|
<div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-4 mb-3">
|
|
<label class="block mb-4 text-sm">
|
|
<span class="text-gray-700 dark:text-gray-400">
|
|
Email Address <span class="text-red-600">*</span>
|
|
</span>
|
|
<input
|
|
type="email"
|
|
x-model="exampleForm.email"
|
|
required
|
|
class="block w-full mt-1 text-sm dark:text-gray-300 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple form-input border-red-600 focus:border-red-400 focus:shadow-outline-red"
|
|
/>
|
|
<span class="text-xs text-red-600 dark:text-red-400 mt-1" x-text="exampleErrors.email"></span>
|
|
</label>
|
|
</div>
|
|
<button @click="copyCode(`<label class="block mb-4 text-sm">
|
|
<span class="text-gray-700 dark:text-gray-400">
|
|
Field Label <span class="text-red-600">*</span>
|
|
</span>
|
|
<input
|
|
type="text"
|
|
x-model="formData.field"
|
|
class="block w-full mt-1 text-sm dark:text-gray-300 dark:bg-gray-700 focus:border-purple-400 form-input border-red-600"
|
|
/>
|
|
<span class="text-xs text-red-600 dark:text-red-400 mt-1">Error message</span>
|
|
</label>`)" class="text-sm text-purple-600 hover:text-purple-700 dark:text-purple-400 flex items-center">
|
|
<span x-html="$icon('duplicate', 'w-4 h-4 mr-1')"></span>
|
|
Copy Code
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Textarea -->
|
|
<div class="mb-8">
|
|
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-3">Textarea</h3>
|
|
<div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-4 mb-3">
|
|
<label class="block text-sm">
|
|
<span class="text-gray-700 dark:text-gray-400">Description</span>
|
|
<textarea
|
|
x-model="exampleForm.textarea"
|
|
rows="3"
|
|
class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray form-textarea"
|
|
></textarea>
|
|
</label>
|
|
</div>
|
|
<button @click="copyCode(`<label class="block text-sm">
|
|
<span class="text-gray-700 dark:text-gray-400">Description</span>
|
|
<textarea
|
|
rows="3"
|
|
class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 form-textarea"
|
|
></textarea>
|
|
</label>`)" class="text-sm text-purple-600 hover:text-purple-700 dark:text-purple-400 flex items-center">
|
|
<span x-html="$icon('duplicate', 'w-4 h-4 mr-1')"></span>
|
|
Copy Code
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Select -->
|
|
<div>
|
|
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-3">Select</h3>
|
|
<div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-4 mb-3">
|
|
<label class="block text-sm">
|
|
<span class="text-gray-700 dark:text-gray-400">Select Option</span>
|
|
<select
|
|
x-model="exampleForm.select"
|
|
class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray form-select"
|
|
>
|
|
<option value="option1">Option 1</option>
|
|
<option value="option2">Option 2</option>
|
|
<option value="option3">Option 3</option>
|
|
</select>
|
|
</label>
|
|
</div>
|
|
<button @click="copyCode(`<label class="block text-sm">
|
|
<span class="text-gray-700 dark:text-gray-400">Select Option</span>
|
|
<select class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 form-select">
|
|
<option>Option 1</option>
|
|
<option>Option 2</option>
|
|
</select>
|
|
</label>`)" class="text-sm text-purple-600 hover:text-purple-700 dark:text-purple-400 flex items-center">
|
|
<span x-html="$icon('duplicate', 'w-4 h-4 mr-1')"></span>
|
|
Copy Code
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- BUTTONS SECTION -->
|
|
<section id="buttons" class="scroll-mt-24">
|
|
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
|
|
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-6 flex items-center">
|
|
<span x-html="$icon('cursor-click', 'w-6 h-6 mr-2 text-purple-600 dark:text-purple-400')"></span>
|
|
Buttons
|
|
</h2>
|
|
|
|
<!-- Primary Button -->
|
|
<div class="mb-8">
|
|
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-3">Primary Button</h3>
|
|
<div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-4 mb-3 space-x-2">
|
|
<button class="px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700">
|
|
Primary Button
|
|
</button>
|
|
<button class="px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700 disabled:opacity-50" disabled>
|
|
Disabled
|
|
</button>
|
|
</div>
|
|
<button @click="copyCode(`<button class="px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700">
|
|
Primary Button
|
|
</button>`)" class="text-sm text-purple-600 hover:text-purple-700 dark:text-purple-400 flex items-center">
|
|
<span x-html="$icon('duplicate', 'w-4 h-4 mr-1')"></span>
|
|
Copy Code
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Secondary Button -->
|
|
<div class="mb-8">
|
|
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-3">Secondary Button</h3>
|
|
<div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-4 mb-3 space-x-2">
|
|
<button class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 dark:text-gray-300 dark:bg-gray-700 dark:border-gray-600 dark:hover:bg-gray-600">
|
|
Secondary Button
|
|
</button>
|
|
</div>
|
|
<button @click="copyCode(`<button class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 dark:text-gray-300 dark:bg-gray-700 dark:border-gray-600 dark:hover:bg-gray-600">
|
|
Secondary Button
|
|
</button>`)" class="text-sm text-purple-600 hover:text-purple-700 dark:text-purple-400 flex items-center">
|
|
<span x-html="$icon('duplicate', 'w-4 h-4 mr-1')"></span>
|
|
Copy Code
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Danger Button -->
|
|
<div>
|
|
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-3">Danger Button</h3>
|
|
<div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-4 mb-3 space-x-2">
|
|
<button class="px-4 py-2 text-sm font-medium text-white bg-red-600 rounded-lg hover:bg-red-700">
|
|
Delete
|
|
</button>
|
|
</div>
|
|
<button @click="copyCode(`<button class="px-4 py-2 text-sm font-medium text-white bg-red-600 rounded-lg hover:bg-red-700">
|
|
Delete
|
|
</button>`)" class="text-sm text-purple-600 hover:text-purple-700 dark:text-purple-400 flex items-center">
|
|
<span x-html="$icon('duplicate', 'w-4 h-4 mr-1')"></span>
|
|
Copy Code
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- DROPDOWNS SECTION -->
|
|
<section id="dropdowns" class="scroll-mt-24">
|
|
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
|
|
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-6 flex items-center">
|
|
<span x-html="$icon('chevron-down', 'w-6 h-6 mr-2 text-purple-600 dark:text-purple-400')"></span>
|
|
Dropdowns
|
|
</h2>
|
|
|
|
<div class="mb-6 p-4 bg-blue-50 dark:bg-gray-700 border border-blue-200 dark:border-gray-600 rounded-lg">
|
|
<div class="flex items-start">
|
|
<span x-html="$icon('information-circle', 'w-5 h-5 text-blue-600 dark:text-blue-400 mr-2 flex-shrink-0 mt-0.5')"></span>
|
|
<div>
|
|
<p class="text-sm text-blue-800 dark:text-gray-200">
|
|
<strong>Dropdown Macros:</strong> Use macros from <code class="bg-blue-100 dark:bg-gray-600 px-1 rounded">shared/macros/dropdowns.html</code> for consistent dropdown styling.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Basic Dropdown -->
|
|
<div class="mb-8">
|
|
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-3">Basic Dropdown</h3>
|
|
<p class="text-sm text-gray-600 dark:text-gray-400 mb-3">Standard dropdown with items. Uses its own Alpine.js state.</p>
|
|
<div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-4 mb-3">
|
|
{% from 'shared/macros/dropdowns.html' import dropdown, dropdown_item %}
|
|
{% call dropdown('Actions', 'demoDropdown1') %}
|
|
{{ dropdown_item('Edit', "alert('Edit clicked')", icon='pencil') }}
|
|
{{ dropdown_item('Duplicate', "alert('Duplicate clicked')", icon='duplicate') }}
|
|
{{ dropdown_item('Delete', "alert('Delete clicked')", icon='trash', variant='danger') }}
|
|
{% endcall %}
|
|
</div>
|
|
<button @click="copyCode(`{% raw %}{% from 'shared/macros/dropdowns.html' import dropdown, dropdown_item %}
|
|
{% call dropdown('Actions', 'isDropdownOpen') %}
|
|
{{ dropdown_item('Edit', 'edit()', icon='pencil') }}
|
|
{{ dropdown_item('Duplicate', 'duplicate()', icon='duplicate') }}
|
|
{{ dropdown_item('Delete', 'delete()', icon='trash', variant='danger') }}
|
|
{% endcall %}{% endraw %}`)" class="text-sm text-purple-600 hover:text-purple-700 dark:text-purple-400 flex items-center">
|
|
<span x-html="$icon('duplicate', 'w-4 h-4 mr-1')"></span>
|
|
Copy Code
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Action Dropdown with Loading State -->
|
|
<div class="mb-8">
|
|
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-3">Action Dropdown with Loading State</h3>
|
|
<p class="text-sm text-gray-600 dark:text-gray-400 mb-3">Dropdown that supports disabled/loading state. Uses external Alpine.js state from parent component.</p>
|
|
<div x-data="{ demoLoading: false, demoDropdownOpen: false }" class="bg-gray-50 dark:bg-gray-900 rounded-lg p-4 mb-3">
|
|
<div class="flex items-center gap-4">
|
|
{% from 'shared/macros/dropdowns.html' import action_dropdown, dropdown_item %}
|
|
{% call action_dropdown(
|
|
label='Run Action',
|
|
loading_label='Processing...',
|
|
open_var='demoDropdownOpen',
|
|
loading_var='demoLoading',
|
|
icon='play'
|
|
) %}
|
|
{{ dropdown_item('Option 1', "demoDropdownOpen = false; demoLoading = true; setTimeout(() => demoLoading = false, 2000)") }}
|
|
{{ dropdown_item('Option 2', "demoDropdownOpen = false; alert('Option 2')") }}
|
|
{{ dropdown_item('Option 3', "demoDropdownOpen = false; alert('Option 3')") }}
|
|
{% endcall %}
|
|
<span class="text-xs text-gray-500">(Click Option 1 to see loading state)</span>
|
|
</div>
|
|
</div>
|
|
<button @click='copyCode(`{% raw %}{% from "shared/macros/dropdowns.html" import action_dropdown, dropdown_item %}
|
|
{% call action_dropdown(
|
|
label="Run Scan",
|
|
loading_label="Scanning...",
|
|
open_var="scanDropdownOpen",
|
|
loading_var="scanning",
|
|
icon="search"
|
|
) %}
|
|
{{ dropdown_item("Run All", "runScan(\"all\"); scanDropdownOpen = false") }}
|
|
{{ dropdown_item("Run Selected", "runScan(\"selected\"); scanDropdownOpen = false") }}
|
|
{% endcall %}{% endraw %}`)' class="text-sm text-purple-600 hover:text-purple-700 dark:text-purple-400 flex items-center">
|
|
<span x-html="$icon('duplicate', 'w-4 h-4 mr-1')"></span>
|
|
Copy Code
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Context Menu -->
|
|
<div class="mb-8">
|
|
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-3">Context Menu (3-dot)</h3>
|
|
<p class="text-sm text-gray-600 dark:text-gray-400 mb-3">Icon-only dropdown commonly used for row actions in tables.</p>
|
|
<div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-4 mb-3">
|
|
{% from 'shared/macros/dropdowns.html' import context_menu, dropdown_item, dropdown_divider %}
|
|
{% call context_menu('demoContext', 'demoContextOpen') %}
|
|
{{ dropdown_item('View', "alert('View')", icon='eye') }}
|
|
{{ dropdown_item('Edit', "alert('Edit')", icon='pencil') }}
|
|
{{ dropdown_divider() }}
|
|
{{ dropdown_item('Delete', "alert('Delete')", icon='trash', variant='danger') }}
|
|
{% endcall %}
|
|
</div>
|
|
<button @click="copyCode(`{% raw %}{% from 'shared/macros/dropdowns.html' import context_menu, dropdown_item, dropdown_divider %}
|
|
{% call context_menu('rowMenu', 'isMenuOpen') %}
|
|
{{ dropdown_item('View', 'view()', icon='eye') }}
|
|
{{ dropdown_item('Edit', 'edit()', icon='pencil') }}
|
|
{{ dropdown_divider() }}
|
|
{{ dropdown_item('Delete', 'delete()', icon='trash', variant='danger') }}
|
|
{% endcall %}{% endraw %}`)" class="text-sm text-purple-600 hover:text-purple-700 dark:text-purple-400 flex items-center">
|
|
<span x-html="$icon('duplicate', 'w-4 h-4 mr-1')"></span>
|
|
Copy Code
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Dropdown Variants -->
|
|
<div>
|
|
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-3">Dropdown Variants</h3>
|
|
<p class="text-sm text-gray-600 dark:text-gray-400 mb-3">Primary, secondary, and ghost variants.</p>
|
|
<div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-4 mb-3 flex gap-4">
|
|
{% from 'shared/macros/dropdowns.html' import dropdown, dropdown_item %}
|
|
{% call dropdown('Primary', 'demoPrimary', variant='primary') %}
|
|
{{ dropdown_item('Option 1', "alert('1')") }}
|
|
{{ dropdown_item('Option 2', "alert('2')") }}
|
|
{% endcall %}
|
|
{% call dropdown('Secondary', 'demoSecondary', variant='secondary') %}
|
|
{{ dropdown_item('Option 1', "alert('1')") }}
|
|
{{ dropdown_item('Option 2', "alert('2')") }}
|
|
{% endcall %}
|
|
{% call dropdown('Ghost', 'demoGhost', variant='ghost') %}
|
|
{{ dropdown_item('Option 1', "alert('1')") }}
|
|
{{ dropdown_item('Option 2', "alert('2')") }}
|
|
{% endcall %}
|
|
</div>
|
|
<button @click="copyCode(`{% raw %}{% call dropdown('Label', 'isOpen', variant='primary') %}...{% endcall %}
|
|
{% call dropdown('Label', 'isOpen', variant='secondary') %}...{% endcall %}
|
|
{% call dropdown('Label', 'isOpen', variant='ghost') %}...{% endcall %}{% endraw %}`)" class="text-sm text-purple-600 hover:text-purple-700 dark:text-purple-400 flex items-center">
|
|
<span x-html="$icon('duplicate', 'w-4 h-4 mr-1')"></span>
|
|
Copy Code
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- CARDS SECTION -->
|
|
<section id="cards" class="scroll-mt-24">
|
|
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
|
|
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-6 flex items-center">
|
|
<span x-html="$icon('collection', 'w-6 h-6 mr-2 text-purple-600 dark:text-purple-400')"></span>
|
|
Cards
|
|
</h2>
|
|
|
|
<!-- Basic Card -->
|
|
<div>
|
|
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-3">Basic Card</h3>
|
|
<div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-4 mb-3">
|
|
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4">
|
|
<h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-2">Card Title</h4>
|
|
<p class="text-sm text-gray-600 dark:text-gray-400">
|
|
This is a basic card component with a title and description.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<button @click="copyCode(`<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4">
|
|
<h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-2">Card Title</h4>
|
|
<p class="text-sm text-gray-600 dark:text-gray-400">Card description</p>
|
|
</div>`)" class="text-sm text-purple-600 hover:text-purple-700 dark:text-purple-400 flex items-center">
|
|
<span x-html="$icon('duplicate', 'w-4 h-4 mr-1')"></span>
|
|
Copy Code
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- BADGES SECTION -->
|
|
<section id="badges" class="scroll-mt-24">
|
|
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
|
|
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-6 flex items-center">
|
|
<span x-html="$icon('tag', 'w-6 h-6 mr-2 text-purple-600 dark:text-purple-400')"></span>
|
|
Badges
|
|
</h2>
|
|
|
|
<!-- Status Badges -->
|
|
<div>
|
|
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-3">Status Badges</h3>
|
|
<div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-4 mb-3 flex flex-wrap gap-2">
|
|
<span class="px-2 py-1 text-xs font-semibold text-green-800 bg-green-100 rounded-full dark:bg-green-700 dark:text-green-100">
|
|
Active
|
|
</span>
|
|
<span class="px-2 py-1 text-xs font-semibold text-yellow-800 bg-yellow-100 rounded-full dark:bg-yellow-700 dark:text-yellow-100">
|
|
Pending
|
|
</span>
|
|
<span class="px-2 py-1 text-xs font-semibold text-red-800 bg-red-100 rounded-full dark:bg-red-700 dark:text-red-100">
|
|
Inactive
|
|
</span>
|
|
<span class="px-2 py-1 text-xs font-semibold text-blue-800 bg-blue-100 rounded-full dark:bg-blue-700 dark:text-blue-100">
|
|
Info
|
|
</span>
|
|
</div>
|
|
<button @click="copyCode(`<span class="px-2 py-1 text-xs font-semibold text-green-800 bg-green-100 rounded-full dark:bg-green-700 dark:text-green-100">
|
|
Active
|
|
</span>`)" class="text-sm text-purple-600 hover:text-purple-700 dark:text-purple-400 flex items-center">
|
|
<span x-html="$icon('duplicate', 'w-4 h-4 mr-1')"></span>
|
|
Copy Code
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- TABLES SECTION -->
|
|
<section id="tables" class="scroll-mt-24">
|
|
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
|
|
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-6 flex items-center">
|
|
<span x-html="$icon('table', 'w-6 h-6 mr-2 text-purple-600 dark:text-purple-400')"></span>
|
|
Tables
|
|
</h2>
|
|
|
|
<!-- Basic Table -->
|
|
<div>
|
|
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-3">Basic Table</h3>
|
|
<div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-4 mb-3 overflow-x-auto">
|
|
<table class="w-full whitespace-no-wrap">
|
|
<thead>
|
|
<tr class="text-xs font-semibold tracking-wide text-left text-gray-500 uppercase border-b dark:border-gray-700 bg-gray-50 dark:text-gray-400 dark:bg-gray-800">
|
|
<th class="px-4 py-3">Name</th>
|
|
<th class="px-4 py-3">Email</th>
|
|
<th class="px-4 py-3">Status</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="bg-white divide-y dark:divide-gray-700 dark:bg-gray-800">
|
|
<tr class="text-gray-700 dark:text-gray-400">
|
|
<td class="px-4 py-3">John Doe</td>
|
|
<td class="px-4 py-3 text-sm">john@example.com</td>
|
|
<td class="px-4 py-3 text-xs">
|
|
<span class="px-2 py-1 font-semibold text-green-800 bg-green-100 rounded-full dark:bg-green-700 dark:text-green-100">
|
|
Active
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
<tr class="text-gray-700 dark:text-gray-400">
|
|
<td class="px-4 py-3">Jane Smith</td>
|
|
<td class="px-4 py-3 text-sm">jane@example.com</td>
|
|
<td class="px-4 py-3 text-xs">
|
|
<span class="px-2 py-1 font-semibold text-yellow-800 bg-yellow-100 rounded-full dark:bg-yellow-700 dark:text-yellow-100">
|
|
Pending
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<button @click="copyCode(`<table class="w-full whitespace-no-wrap">
|
|
<thead>
|
|
<tr class="text-xs font-semibold tracking-wide text-left text-gray-500 uppercase border-b dark:border-gray-700 bg-gray-50 dark:text-gray-400 dark:bg-gray-800">
|
|
<th class="px-4 py-3">Name</th>
|
|
<th class="px-4 py-3">Email</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="bg-white divide-y dark:divide-gray-700 dark:bg-gray-800">
|
|
<tr class="text-gray-700 dark:text-gray-400">
|
|
<td class="px-4 py-3">John Doe</td>
|
|
<td class="px-4 py-3">john@example.com</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>`)" class="text-sm text-purple-600 hover:text-purple-700 dark:text-purple-400 flex items-center">
|
|
<span x-html="$icon('duplicate', 'w-4 h-4 mr-1')"></span>
|
|
Copy Code
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- MODALS SECTION -->
|
|
<section id="modals" class="scroll-mt-24">
|
|
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
|
|
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-6 flex items-center">
|
|
<span x-html="$icon('view-grid-add', 'w-6 h-6 mr-2 text-purple-600 dark:text-purple-400')"></span>
|
|
Modals
|
|
</h2>
|
|
|
|
<!-- Confirmation Modal -->
|
|
<div class="mb-8">
|
|
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-3">Confirmation Modal</h3>
|
|
<div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-4 mb-3">
|
|
<button
|
|
@click="showExampleModal = true"
|
|
class="px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700">
|
|
Open Modal
|
|
</button>
|
|
|
|
<!-- Example Modal -->
|
|
<div
|
|
x-show="showExampleModal"
|
|
x-cloak
|
|
class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50"
|
|
@click.self="showExampleModal = false">
|
|
|
|
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6 m-4 max-w-md w-full">
|
|
<div class="flex items-start justify-between mb-4">
|
|
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">
|
|
Confirm Action
|
|
</h3>
|
|
<button
|
|
@click="showExampleModal = false"
|
|
class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
|
|
<span x-html="$icon('x', 'w-5 h-5')"></span>
|
|
</button>
|
|
</div>
|
|
|
|
<p class="mb-6 text-sm text-gray-600 dark:text-gray-400">
|
|
Are you sure you want to perform this action? This cannot be undone.
|
|
</p>
|
|
|
|
<div class="flex justify-end gap-3">
|
|
<button
|
|
@click="showExampleModal = false"
|
|
class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 dark:text-gray-300 dark:bg-gray-700 dark:border-gray-600 dark:hover:bg-gray-600">
|
|
Cancel
|
|
</button>
|
|
<button
|
|
@click="showExampleModal = false"
|
|
class="px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700">
|
|
Confirm
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button @click="copyCode(`<!-- Modal Trigger -->
|
|
<button @click="showModal = true">Open Modal</button>
|
|
|
|
<!-- Modal -->
|
|
<div x-show="showModal"
|
|
class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50"
|
|
@click.self="showModal = false">
|
|
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6 m-4 max-w-md w-full">
|
|
<div class="flex items-start justify-between mb-4">
|
|
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Title</h3>
|
|
<button @click="showModal = false">
|
|
<span x-html="$icon('x', 'w-5 h-5')"></span>
|
|
</button>
|
|
</div>
|
|
<p class="mb-6 text-sm text-gray-600 dark:text-gray-400">Content</p>
|
|
<div class="flex justify-end gap-3">
|
|
<button @click="showModal = false">Cancel</button>
|
|
<button @click="showModal = false">Confirm</button>
|
|
</div>
|
|
</div>
|
|
</div>`)" class="text-sm text-purple-600 hover:text-purple-700 dark:text-purple-400 flex items-center">
|
|
<span x-html="$icon('duplicate', 'w-4 h-4 mr-1')"></span>
|
|
Copy Code
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Confirmation Modal Macros -->
|
|
<div class="mb-8">
|
|
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-3">Confirmation Modal Macros</h3>
|
|
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
|
|
Use the <code class="bg-gray-100 dark:bg-gray-700 px-1 rounded">confirm_modal</code> and <code class="bg-gray-100 dark:bg-gray-700 px-1 rounded">confirm_modal_dynamic</code> macros for styled confirmation dialogs. These support danger, warning, and info variants.
|
|
</p>
|
|
|
|
{# Static Confirm Modal Demo #}
|
|
<div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-4 mb-3">
|
|
<div class="flex flex-wrap gap-2 mb-4">
|
|
<button
|
|
@click="confirmModalVariant = 'danger'; showConfirmModalDemo = true"
|
|
class="px-4 py-2 text-sm font-medium text-white bg-red-600 rounded-lg hover:bg-red-700">
|
|
Danger Variant
|
|
</button>
|
|
<button
|
|
@click="confirmModalVariant = 'warning'; showConfirmModalDemo = true"
|
|
class="px-4 py-2 text-sm font-medium text-white bg-yellow-600 rounded-lg hover:bg-yellow-700">
|
|
Warning Variant
|
|
</button>
|
|
<button
|
|
@click="confirmModalVariant = 'info'; showConfirmModalDemo = true"
|
|
class="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700">
|
|
Info Variant
|
|
</button>
|
|
<button
|
|
@click="dynamicItemName = 'Example Platform'; showDynamicConfirmDemo = true"
|
|
class="px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700">
|
|
Dynamic Message
|
|
</button>
|
|
</div>
|
|
|
|
{# Confirm Modal Demo (Danger) #}
|
|
<div
|
|
x-show="showConfirmModalDemo && confirmModalVariant === 'danger'"
|
|
x-cloak
|
|
@keydown.escape.window="showConfirmModalDemo = false"
|
|
class="fixed inset-0 z-50 overflow-y-auto"
|
|
role="dialog"
|
|
aria-modal="true">
|
|
<div x-transition class="fixed inset-0 bg-gray-500/50 dark:bg-gray-900/80 backdrop-blur-sm" @click="showConfirmModalDemo = false"></div>
|
|
<div class="flex min-h-full items-center justify-center p-4">
|
|
<div x-transition @click.stop class="relative w-full max-w-md bg-white dark:bg-gray-800 rounded-xl shadow-xl p-6">
|
|
<div class="flex items-start">
|
|
<div class="flex-shrink-0 flex items-center justify-center w-12 h-12 rounded-full bg-red-100 dark:bg-red-900/30">
|
|
<span x-html="$icon('exclamation-triangle', 'w-6 h-6 text-red-600 dark:text-red-400')"></span>
|
|
</div>
|
|
<div class="ml-4 flex-1">
|
|
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Delete Item</h3>
|
|
<p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Are you sure you want to delete this item? This action cannot be undone.</p>
|
|
</div>
|
|
</div>
|
|
<div class="mt-6 flex justify-end gap-3">
|
|
<button @click="showConfirmModalDemo = false" type="button" class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors">Cancel</button>
|
|
<button @click="showConfirmModalDemo = false" type="button" class="px-4 py-2 text-sm font-medium text-white rounded-lg transition-colors bg-red-600 hover:bg-red-700">Delete</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{# Confirm Modal Demo (Warning) #}
|
|
<div
|
|
x-show="showConfirmModalDemo && confirmModalVariant === 'warning'"
|
|
x-cloak
|
|
@keydown.escape.window="showConfirmModalDemo = false"
|
|
class="fixed inset-0 z-50 overflow-y-auto"
|
|
role="dialog"
|
|
aria-modal="true">
|
|
<div x-transition class="fixed inset-0 bg-gray-500/50 dark:bg-gray-900/80 backdrop-blur-sm" @click="showConfirmModalDemo = false"></div>
|
|
<div class="flex min-h-full items-center justify-center p-4">
|
|
<div x-transition @click.stop class="relative w-full max-w-md bg-white dark:bg-gray-800 rounded-xl shadow-xl p-6">
|
|
<div class="flex items-start">
|
|
<div class="flex-shrink-0 flex items-center justify-center w-12 h-12 rounded-full bg-yellow-100 dark:bg-yellow-900/30">
|
|
<span x-html="$icon('exclamation', 'w-6 h-6 text-yellow-600 dark:text-yellow-400')"></span>
|
|
</div>
|
|
<div class="ml-4 flex-1">
|
|
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Remove Access</h3>
|
|
<p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Are you sure you want to remove access? The user will need to be re-invited.</p>
|
|
</div>
|
|
</div>
|
|
<div class="mt-6 flex justify-end gap-3">
|
|
<button @click="showConfirmModalDemo = false" type="button" class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors">Cancel</button>
|
|
<button @click="showConfirmModalDemo = false" type="button" class="px-4 py-2 text-sm font-medium text-white rounded-lg transition-colors bg-yellow-600 hover:bg-yellow-700">Remove</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{# Confirm Modal Demo (Info) #}
|
|
<div
|
|
x-show="showConfirmModalDemo && confirmModalVariant === 'info'"
|
|
x-cloak
|
|
@keydown.escape.window="showConfirmModalDemo = false"
|
|
class="fixed inset-0 z-50 overflow-y-auto"
|
|
role="dialog"
|
|
aria-modal="true">
|
|
<div x-transition class="fixed inset-0 bg-gray-500/50 dark:bg-gray-900/80 backdrop-blur-sm" @click="showConfirmModalDemo = false"></div>
|
|
<div class="flex min-h-full items-center justify-center p-4">
|
|
<div x-transition @click.stop class="relative w-full max-w-md bg-white dark:bg-gray-800 rounded-xl shadow-xl p-6">
|
|
<div class="flex items-start">
|
|
<div class="flex-shrink-0 flex items-center justify-center w-12 h-12 rounded-full bg-blue-100 dark:bg-blue-900/30">
|
|
<span x-html="$icon('information-circle', 'w-6 h-6 text-blue-600 dark:text-blue-400')"></span>
|
|
</div>
|
|
<div class="ml-4 flex-1">
|
|
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Publish Changes</h3>
|
|
<p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Are you sure you want to publish these changes? They will be visible to all users.</p>
|
|
</div>
|
|
</div>
|
|
<div class="mt-6 flex justify-end gap-3">
|
|
<button @click="showConfirmModalDemo = false" type="button" class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors">Cancel</button>
|
|
<button @click="showConfirmModalDemo = false" type="button" class="px-4 py-2 text-sm font-medium text-white rounded-lg transition-colors bg-blue-600 hover:bg-blue-700">Publish</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{# Dynamic Confirm Modal Demo #}
|
|
<div
|
|
x-show="showDynamicConfirmDemo"
|
|
x-cloak
|
|
@keydown.escape.window="showDynamicConfirmDemo = false"
|
|
class="fixed inset-0 z-50 overflow-y-auto"
|
|
role="dialog"
|
|
aria-modal="true">
|
|
<div x-transition class="fixed inset-0 bg-gray-500/50 dark:bg-gray-900/80 backdrop-blur-sm" @click="showDynamicConfirmDemo = false"></div>
|
|
<div class="flex min-h-full items-center justify-center p-4">
|
|
<div x-transition @click.stop class="relative w-full max-w-md bg-white dark:bg-gray-800 rounded-xl shadow-xl p-6">
|
|
<div class="flex items-start">
|
|
<div class="flex-shrink-0 flex items-center justify-center w-12 h-12 rounded-full bg-yellow-100 dark:bg-yellow-900/30">
|
|
<span x-html="$icon('exclamation', 'w-6 h-6 text-yellow-600 dark:text-yellow-400')"></span>
|
|
</div>
|
|
<div class="ml-4 flex-1">
|
|
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Remove Platform</h3>
|
|
<p class="mt-2 text-sm text-gray-600 dark:text-gray-400" x-text="`Are you sure you want to remove '${dynamicItemName}' from this admin?`"></p>
|
|
</div>
|
|
</div>
|
|
<div class="mt-6 flex justify-end gap-3">
|
|
<button @click="showDynamicConfirmDemo = false" type="button" class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors">Cancel</button>
|
|
<button @click="showDynamicConfirmDemo = false" type="button" class="px-4 py-2 text-sm font-medium text-white rounded-lg transition-colors bg-yellow-600 hover:bg-yellow-700">Remove</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="space-y-4">
|
|
<div>
|
|
<div class="flex items-center justify-between mb-2">
|
|
<p class="text-sm font-medium text-gray-700 dark:text-gray-300">Static Message (confirm_modal):</p>
|
|
<button @click="copyCode(codeSnippets.confirmModal)" class="text-sm text-purple-600 hover:text-purple-700 dark:text-purple-400 flex items-center">
|
|
<span x-html="$icon('duplicate', 'w-4 h-4 mr-1')"></span>
|
|
Copy
|
|
</button>
|
|
</div>
|
|
<pre class="bg-gray-100 dark:bg-gray-700 p-3 rounded-lg text-xs overflow-x-auto"><code x-text="codeSnippets.confirmModal"></code></pre>
|
|
</div>
|
|
<div>
|
|
<div class="flex items-center justify-between mb-2">
|
|
<p class="text-sm font-medium text-gray-700 dark:text-gray-300">Dynamic Message (confirm_modal_dynamic):</p>
|
|
<button @click="copyCode(codeSnippets.confirmModalDynamic)" class="text-sm text-purple-600 hover:text-purple-700 dark:text-purple-400 flex items-center">
|
|
<span x-html="$icon('duplicate', 'w-4 h-4 mr-1')"></span>
|
|
Copy
|
|
</button>
|
|
</div>
|
|
<pre class="bg-gray-100 dark:bg-gray-700 p-3 rounded-lg text-xs overflow-x-auto"><code x-text="codeSnippets.confirmModalDynamic"></code></pre>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="text-sm text-gray-500 dark:text-gray-400 mt-4">
|
|
<strong>Parameters:</strong> id, title, message (or message_var for dynamic), confirm_action, show_var, confirm_text, cancel_text, variant ('danger'|'warning'|'info'), icon
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Details Modal Pattern -->
|
|
<div class="mb-8">
|
|
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-3">Details Modal (Table Layout)</h3>
|
|
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
|
|
Pattern for displaying record details with a header (icon + badge), table layout, and optional sections. Used for Job Details, Log Details, etc.
|
|
</p>
|
|
<div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-4 mb-3">
|
|
<button
|
|
@click="showDetailsModal = true"
|
|
class="px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700">
|
|
View Details Modal
|
|
</button>
|
|
|
|
<!-- Details Modal Example -->
|
|
<div
|
|
x-show="showDetailsModal"
|
|
x-cloak
|
|
x-transition
|
|
class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50"
|
|
@click.self="showDetailsModal = false">
|
|
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-2xl w-full mx-4 max-h-[90vh] overflow-hidden">
|
|
{# Modal Header with Icon and Badge #}
|
|
<div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center gap-3">
|
|
<div class="p-2 bg-green-100 dark:bg-green-900/30 rounded-lg">
|
|
<span class="text-green-600 dark:text-green-400" x-html="$icon('check-circle', 'w-6 h-6')"></span>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Record Details</h3>
|
|
<p class="text-sm text-gray-500 dark:text-gray-400">ID: 12345</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-3">
|
|
<span class="px-3 py-1 text-sm font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-800 dark:text-green-100">Completed</span>
|
|
<button @click="showDetailsModal = false" class="p-1 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors">
|
|
<span x-html="$icon('x', 'w-6 h-6')"></span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{# Modal Body #}
|
|
<div class="p-6 overflow-y-auto max-h-[calc(90vh-180px)]">
|
|
<div class="space-y-6">
|
|
{# Stats Cards Row #}
|
|
<div class="grid grid-cols-4 gap-3">
|
|
<div class="p-3 bg-green-50 dark:bg-green-900/20 rounded-lg text-center">
|
|
<p class="text-2xl font-bold text-green-600 dark:text-green-400">150</p>
|
|
<p class="text-xs text-green-700 dark:text-green-300 mt-1">Imported</p>
|
|
</div>
|
|
<div class="p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg text-center">
|
|
<p class="text-2xl font-bold text-blue-600 dark:text-blue-400">25</p>
|
|
<p class="text-xs text-blue-700 dark:text-blue-300 mt-1">Updated</p>
|
|
</div>
|
|
<div class="p-3 bg-red-50 dark:bg-red-900/20 rounded-lg text-center">
|
|
<p class="text-2xl font-bold text-red-600 dark:text-red-400">2</p>
|
|
<p class="text-xs text-red-700 dark:text-red-300 mt-1">Errors</p>
|
|
</div>
|
|
<div class="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg text-center">
|
|
<p class="text-2xl font-bold text-gray-600 dark:text-gray-300">177</p>
|
|
<p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Total</p>
|
|
</div>
|
|
</div>
|
|
|
|
{# Details Table #}
|
|
<div class="overflow-hidden border border-gray-200 dark:border-gray-700 rounded-lg">
|
|
<table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
|
|
<tbody class="divide-y divide-gray-200 dark:divide-gray-700">
|
|
<tr>
|
|
<td class="px-4 py-3 text-sm font-medium text-gray-600 dark:text-gray-400 bg-gray-50 dark:bg-gray-700/50 w-1/3">
|
|
<div class="flex items-center gap-2">
|
|
<span x-html="$icon('user', 'w-4 h-4')"></span>
|
|
Owner
|
|
</div>
|
|
</td>
|
|
<td class="px-4 py-3 text-sm text-gray-900 dark:text-gray-100">Acme Corp</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="px-4 py-3 text-sm font-medium text-gray-600 dark:text-gray-400 bg-gray-50 dark:bg-gray-700/50">
|
|
<div class="flex items-center gap-2">
|
|
<span x-html="$icon('clock', 'w-4 h-4')"></span>
|
|
Created
|
|
</div>
|
|
</td>
|
|
<td class="px-4 py-3 text-sm text-gray-900 dark:text-gray-100">Dec 11, 2024 14:30</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="px-4 py-3 text-sm font-medium text-gray-600 dark:text-gray-400 bg-gray-50 dark:bg-gray-700/50">
|
|
<div class="flex items-center gap-2">
|
|
<span x-html="$icon('globe', 'w-4 h-4')"></span>
|
|
Source
|
|
</div>
|
|
</td>
|
|
<td class="px-4 py-3 text-sm text-gray-900 dark:text-gray-100">
|
|
<code class="px-2 py-1 bg-gray-100 dark:bg-gray-700 rounded text-xs">api/products.csv</code>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{# Modal Footer #}
|
|
<div class="px-6 py-4 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700/30">
|
|
<div class="flex justify-end">
|
|
<button
|
|
@click="showDetailsModal = false"
|
|
class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-purple-500 transition-colors">
|
|
Close
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p class="text-sm text-gray-500 dark:text-gray-400 mt-3">
|
|
<strong>Usage:</strong> See <code class="bg-gray-100 dark:bg-gray-700 px-1 rounded">app/templates/shared/macros/modals.html</code> → <code class="bg-gray-100 dark:bg-gray-700 px-1 rounded">job_details_modal</code> for full implementation.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Log Details Modal Pattern -->
|
|
<div class="mb-8">
|
|
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-3">Log Details Modal</h3>
|
|
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
|
|
Specialized modal for displaying log entries with level-based styling, message section, exception display, and stack trace with copy functionality.
|
|
</p>
|
|
<div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-4 mb-3">
|
|
<div class="flex gap-2">
|
|
<button
|
|
@click="showErrorLogDemo()"
|
|
class="px-4 py-2 text-sm font-medium text-white bg-red-600 rounded-lg hover:bg-red-700">
|
|
View Error Log
|
|
</button>
|
|
<button
|
|
@click="showWarningLogDemo()"
|
|
class="px-4 py-2 text-sm font-medium text-white bg-yellow-600 rounded-lg hover:bg-yellow-700">
|
|
View Warning Log
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Log Details Modal Example -->
|
|
<div
|
|
x-show="showLogModal"
|
|
x-cloak
|
|
x-transition
|
|
class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50"
|
|
@click.self="showLogModal = false">
|
|
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-4xl w-full mx-4 max-h-[90vh] overflow-hidden">
|
|
{# Modal Header with Level Badge #}
|
|
<div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center gap-3">
|
|
<div :class="{
|
|
'bg-yellow-100 dark:bg-yellow-900/30': exampleLog?.level === 'WARNING',
|
|
'bg-red-100 dark:bg-red-900/30': exampleLog?.level === 'ERROR',
|
|
'bg-purple-100 dark:bg-purple-900/30': exampleLog?.level === 'CRITICAL',
|
|
'bg-blue-100 dark:bg-blue-900/30': exampleLog?.level === 'INFO'
|
|
}" class="p-2 rounded-lg">
|
|
<span :class="{
|
|
'text-yellow-600 dark:text-yellow-400': exampleLog?.level === 'WARNING',
|
|
'text-red-600 dark:text-red-400': exampleLog?.level === 'ERROR',
|
|
'text-purple-600 dark:text-purple-400': exampleLog?.level === 'CRITICAL',
|
|
'text-blue-600 dark:text-blue-400': exampleLog?.level === 'INFO'
|
|
}" x-html="$icon(exampleLog?.level === 'WARNING' ? 'exclamation' : exampleLog?.level === 'CRITICAL' ? 'lightning-bolt' : exampleLog?.level === 'ERROR' ? 'x-circle' : 'information-circle', 'w-6 h-6')"></span>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Log Entry Details</h3>
|
|
<p class="text-sm text-gray-500 dark:text-gray-400">ID: <span x-text="exampleLog?.id"></span></p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-3">
|
|
<span :class="{
|
|
'bg-yellow-100 text-yellow-800 dark:bg-yellow-800 dark:text-yellow-100': exampleLog?.level === 'WARNING',
|
|
'bg-red-100 text-red-800 dark:bg-red-800 dark:text-red-100': exampleLog?.level === 'ERROR',
|
|
'bg-purple-100 text-purple-800 dark:bg-purple-800 dark:text-purple-100': exampleLog?.level === 'CRITICAL',
|
|
'bg-blue-100 text-blue-800 dark:bg-blue-800 dark:text-blue-100': exampleLog?.level === 'INFO'
|
|
}" class="px-3 py-1 text-sm font-semibold rounded-full" x-text="exampleLog?.level"></span>
|
|
<button @click="showLogModal = false" class="p-1 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors">
|
|
<span x-html="$icon('x', 'w-6 h-6')"></span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{# Modal Body #}
|
|
<div class="p-6 overflow-y-auto max-h-[calc(90vh-140px)]">
|
|
<div class="space-y-6">
|
|
{# Details Table #}
|
|
<div class="overflow-hidden border border-gray-200 dark:border-gray-700 rounded-lg">
|
|
<table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
|
|
<tbody class="divide-y divide-gray-200 dark:divide-gray-700">
|
|
<tr>
|
|
<td class="px-4 py-3 text-sm font-medium text-gray-600 dark:text-gray-400 bg-gray-50 dark:bg-gray-700/50 w-1/4">
|
|
<div class="flex items-center gap-2">
|
|
<span x-html="$icon('clock', 'w-4 h-4')"></span>
|
|
Timestamp
|
|
</div>
|
|
</td>
|
|
<td class="px-4 py-3 text-sm text-gray-900 dark:text-gray-100" x-text="new Date(exampleLog?.timestamp).toLocaleString()"></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="px-4 py-3 text-sm font-medium text-gray-600 dark:text-gray-400 bg-gray-50 dark:bg-gray-700/50">
|
|
<div class="flex items-center gap-2">
|
|
<span x-html="$icon('tag', 'w-4 h-4')"></span>
|
|
Logger
|
|
</div>
|
|
</td>
|
|
<td class="px-4 py-3 text-sm text-gray-900 dark:text-gray-100">
|
|
<code class="px-2 py-1 bg-gray-100 dark:bg-gray-700 rounded text-xs" x-text="exampleLog?.logger_name"></code>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="px-4 py-3 text-sm font-medium text-gray-600 dark:text-gray-400 bg-gray-50 dark:bg-gray-700/50">
|
|
<div class="flex items-center gap-2">
|
|
<span x-html="$icon('cube', 'w-4 h-4')"></span>
|
|
Module
|
|
</div>
|
|
</td>
|
|
<td class="px-4 py-3 text-sm text-gray-900 dark:text-gray-100">
|
|
<code class="px-2 py-1 bg-gray-100 dark:bg-gray-700 rounded text-xs" x-text="exampleLog?.module"></code>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
{# Message Section #}
|
|
<div>
|
|
<div class="flex items-center gap-2 mb-2">
|
|
<span class="text-gray-500 dark:text-gray-400" x-html="$icon('chat-alt', 'w-4 h-4')"></span>
|
|
<h4 class="text-sm font-semibold text-gray-700 dark:text-gray-300">Message</h4>
|
|
</div>
|
|
<div class="bg-gray-50 dark:bg-gray-700/50 border border-gray-200 dark:border-gray-600 rounded-lg p-4">
|
|
<p class="text-sm text-gray-800 dark:text-gray-200 whitespace-pre-wrap break-words" x-text="exampleLog?.message"></p>
|
|
</div>
|
|
</div>
|
|
|
|
{# Exception Section (conditional) #}
|
|
<div x-show="exampleLog?.exception_message" x-transition>
|
|
<div class="flex items-center gap-2 mb-2">
|
|
<span class="text-red-500 dark:text-red-400" x-html="$icon('exclamation-circle', 'w-4 h-4')"></span>
|
|
<h4 class="text-sm font-semibold text-red-700 dark:text-red-300">Exception</h4>
|
|
</div>
|
|
<div class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4">
|
|
<div class="flex items-start gap-3">
|
|
<div class="flex-shrink-0 p-1.5 bg-red-100 dark:bg-red-900/50 rounded">
|
|
<span class="text-red-600 dark:text-red-400" x-html="$icon('x-circle', 'w-5 h-5')"></span>
|
|
</div>
|
|
<div class="flex-1 min-w-0">
|
|
<p class="text-sm font-medium text-red-800 dark:text-red-200" x-text="exampleLog?.exception_type"></p>
|
|
<p class="text-sm text-red-600 dark:text-red-300 mt-1 break-words" x-text="exampleLog?.exception_message"></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{# Stack Trace Section (conditional) #}
|
|
<div x-show="exampleLog?.stack_trace" x-transition>
|
|
<div class="flex items-center justify-between mb-2">
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-gray-500 dark:text-gray-400" x-html="$icon('code', 'w-4 h-4')"></span>
|
|
<h4 class="text-sm font-semibold text-gray-700 dark:text-gray-300">Stack Trace</h4>
|
|
</div>
|
|
<button
|
|
@click="navigator.clipboard.writeText(exampleLog?.stack_trace); Utils.showToast('Stack trace copied!', 'success')"
|
|
class="text-xs text-purple-600 hover:text-purple-700 dark:text-purple-400 dark:hover:text-purple-300 flex items-center gap-1">
|
|
<span x-html="$icon('clipboard-copy', 'w-4 h-4')"></span>
|
|
Copy
|
|
</button>
|
|
</div>
|
|
<div class="bg-gray-900 dark:bg-gray-950 border border-gray-700 rounded-lg overflow-hidden">
|
|
<pre class="p-4 text-xs text-green-400 font-mono overflow-x-auto max-h-64 overflow-y-auto"><code x-text="exampleLog?.stack_trace"></code></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{# Modal Footer #}
|
|
<div class="px-6 py-4 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700/30">
|
|
<div class="flex justify-end">
|
|
<button
|
|
@click="showLogModal = false"
|
|
class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-purple-500 transition-colors">
|
|
Close
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p class="text-sm text-gray-500 dark:text-gray-400 mt-2 mb-2">
|
|
<strong>Usage:</strong> See <code class="bg-gray-100 dark:bg-gray-700 px-1 rounded">app/templates/admin/logs.html</code> for full implementation.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ALERTS SECTION -->
|
|
<section id="alerts" class="scroll-mt-24">
|
|
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
|
|
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-6 flex items-center">
|
|
<span x-html="$icon('exclamation', 'w-6 h-6 mr-2 text-purple-600 dark:text-purple-400')"></span>
|
|
Alerts
|
|
</h2>
|
|
|
|
<!-- Toast Notifications -->
|
|
<div>
|
|
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-3">Toast Notifications</h3>
|
|
<div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-4 mb-3 space-x-2">
|
|
<button
|
|
@click="showToastExample('success')"
|
|
class="px-4 py-2 text-sm font-medium text-white bg-green-600 rounded-lg hover:bg-green-700">
|
|
Show Success
|
|
</button>
|
|
<button
|
|
@click="showToastExample('error')"
|
|
class="px-4 py-2 text-sm font-medium text-white bg-red-600 rounded-lg hover:bg-red-700">
|
|
Show Error
|
|
</button>
|
|
<button
|
|
@click="showToastExample('warning')"
|
|
class="px-4 py-2 text-sm font-medium text-white bg-yellow-600 rounded-lg hover:bg-yellow-700">
|
|
Show Warning
|
|
</button>
|
|
<button
|
|
@click="showToastExample('info')"
|
|
class="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700">
|
|
Show Info
|
|
</button>
|
|
</div>
|
|
<button @click="copyCode(`Utils.showToast('Message here', 'success'); // or 'error', 'warning', 'info'`)" class="text-sm text-purple-600 hover:text-purple-700 dark:text-purple-400 flex items-center">
|
|
<span x-html="$icon('duplicate', 'w-4 h-4 mr-1')"></span>
|
|
Copy Code
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- CHARTS SECTION - NEW -->
|
|
<section id="charts" class="scroll-mt-24">
|
|
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
|
|
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-6 flex items-center">
|
|
<span x-html="$icon('chart-pie', 'w-6 h-6 mr-2 text-purple-600 dark:text-purple-400')"></span>
|
|
Charts
|
|
</h2>
|
|
|
|
<p class="mb-6 text-gray-600 dark:text-gray-400">
|
|
Charts are provided by
|
|
<a href="https://www.chartjs.org/" target="_blank" class="text-purple-600 dark:text-purple-400 hover:underline">
|
|
Chart.js
|
|
</a>. Note that default legends are disabled and you should provide descriptions for your charts in HTML.
|
|
</p>
|
|
|
|
<!-- Pie/Doughnut Chart -->
|
|
<div class="mb-8">
|
|
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-3">Doughnut/Pie Chart</h3>
|
|
<div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-4 mb-3">
|
|
<div class="bg-white dark:bg-gray-800 rounded-lg p-4">
|
|
<canvas id="examplePieChart"></canvas>
|
|
<div class="flex justify-center mt-4 space-x-3 text-sm text-gray-600 dark:text-gray-400">
|
|
<div class="flex items-center">
|
|
<span class="inline-block w-3 h-3 mr-1 bg-teal-500 rounded-full"></span>
|
|
<span>Shoes</span>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<span class="inline-block w-3 h-3 mr-1 bg-purple-600 rounded-full"></span>
|
|
<span>Shirts</span>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<span class="inline-block w-3 h-3 mr-1 bg-blue-600 rounded-full"></span>
|
|
<span>Bags</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button @click="copyCode(`<canvas id="pieChart"></canvas>
|
|
<script>
|
|
const pieConfig = {
|
|
type: 'doughnut',
|
|
data: {
|
|
datasets: [{
|
|
data: [33, 33, 33],
|
|
backgroundColor: ['#0694a2', '#7e3af2', '#1c64f2'],
|
|
}],
|
|
labels: ['Shoes', 'Shirts', 'Bags'],
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
cutoutPercentage: 80,
|
|
legend: { display: false },
|
|
},
|
|
};
|
|
new Chart(document.getElementById('pieChart'), pieConfig);
|
|
</script>`)" class="text-sm text-purple-600 hover:text-purple-700 dark:text-purple-400 flex items-center">
|
|
<span x-html="$icon('duplicate', 'w-4 h-4 mr-1')"></span>
|
|
Copy Code
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Line Chart -->
|
|
<div class="mb-8">
|
|
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-3">Line Chart</h3>
|
|
<div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-4 mb-3">
|
|
<div class="bg-white dark:bg-gray-800 rounded-lg p-4">
|
|
<canvas id="exampleLineChart"></canvas>
|
|
<div class="flex justify-center mt-4 space-x-3 text-sm text-gray-600 dark:text-gray-400">
|
|
<div class="flex items-center">
|
|
<span class="inline-block w-3 h-3 mr-1 bg-teal-500 rounded-full"></span>
|
|
<span>Organic</span>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<span class="inline-block w-3 h-3 mr-1 bg-purple-600 rounded-full"></span>
|
|
<span>Paid</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button @click="copyCode(`<canvas id="lineChart"></canvas>
|
|
<script>
|
|
const lineConfig = {
|
|
type: 'line',
|
|
data: {
|
|
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
|
|
datasets: [{
|
|
label: 'Organic',
|
|
backgroundColor: '#0694a2',
|
|
borderColor: '#0694a2',
|
|
data: [43, 48, 40, 54, 67, 73, 70],
|
|
fill: false,
|
|
}, {
|
|
label: 'Paid',
|
|
fill: false,
|
|
backgroundColor: '#7e3af2',
|
|
borderColor: '#7e3af2',
|
|
data: [24, 50, 64, 74, 52, 51, 65],
|
|
}],
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
legend: { display: false },
|
|
},
|
|
};
|
|
new Chart(document.getElementById('lineChart'), lineConfig);
|
|
</script>`)" class="text-sm text-purple-600 hover:text-purple-700 dark:text-purple-400 flex items-center">
|
|
<span x-html="$icon('duplicate', 'w-4 h-4 mr-1')"></span>
|
|
Copy Code
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Bar Chart -->
|
|
<div>
|
|
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-3">Bar Chart</h3>
|
|
<div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-4 mb-3">
|
|
<div class="bg-white dark:bg-gray-800 rounded-lg p-4">
|
|
<canvas id="exampleBarChart"></canvas>
|
|
<div class="flex justify-center mt-4 space-x-3 text-sm text-gray-600 dark:text-gray-400">
|
|
<div class="flex items-center">
|
|
<span class="inline-block w-3 h-3 mr-1 bg-teal-500 rounded-full"></span>
|
|
<span>Shoes</span>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<span class="inline-block w-3 h-3 mr-1 bg-purple-600 rounded-full"></span>
|
|
<span>Bags</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button @click="copyCode(`<canvas id="barChart"></canvas>
|
|
<script>
|
|
const barConfig = {
|
|
type: 'bar',
|
|
data: {
|
|
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
|
|
datasets: [{
|
|
label: 'Shoes',
|
|
backgroundColor: '#0694a2',
|
|
data: [43, 48, 40, 54, 67, 73, 70],
|
|
}, {
|
|
label: 'Bags',
|
|
backgroundColor: '#7e3af2',
|
|
data: [24, 50, 64, 74, 52, 51, 65],
|
|
}],
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
legend: { display: false },
|
|
},
|
|
};
|
|
new Chart(document.getElementById('barChart'), barConfig);
|
|
</script>`)" class="text-sm text-purple-600 hover:text-purple-700 dark:text-purple-400 flex items-center">
|
|
<span x-html="$icon('duplicate', 'w-4 h-4 mr-1')"></span>
|
|
Copy Code
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block extra_scripts %}
|
|
{# ✅ CRITICAL: Load JavaScript file #}
|
|
<script src="{{ url_for('static', path='admin/js/components.js') }}"></script>
|
|
{% endblock %} |