adding developer tools in admin panel, adding vendor management
This commit is contained in:
519
app/templates/admin/components.html
Normal file
519
app/templates/admin/components.html
Normal file
@@ -0,0 +1,519 @@
|
||||
{# 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 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">
|
||||
|
||||
<!-- Sticky Navigation Sidebar -->
|
||||
<div class="w-64 flex-shrink-0">
|
||||
<div class="sticky top-6">
|
||||
<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 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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="flex-1 space-y-8">
|
||||
|
||||
<!-- FORMS SECTION -->
|
||||
<section id="forms">
|
||||
<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-4 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"
|
||||
required
|
||||
:class="{ 'border-red-600 focus:border-red-400 focus:shadow-outline-red': errors.field }"
|
||||
class="block w-full mt-1 text-sm dark:text-gray-300 dark:bg-gray-700 focus:border-purple-400 focus:outline-none form-input"
|
||||
/>
|
||||
<span x-show="errors.field" class="text-xs text-red-600 dark:text-red-400 mt-1" x-text="errors.field"></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 mb-4 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>
|
||||
<span class="text-xs text-gray-600 dark:text-gray-400 mt-1">Helper text goes here</span>
|
||||
</label>
|
||||
</div>
|
||||
<button @click="copyCode(`<label class="block mb-4 text-sm">
|
||||
<span class="text-gray-700 dark:text-gray-400">Description</span>
|
||||
<textarea
|
||||
x-model="formData.description"
|
||||
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 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 Dropdown -->
|
||||
<div class="mb-8">
|
||||
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-3">Select Dropdown</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">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="">Choose option</option>
|
||||
<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 mb-4 text-sm">
|
||||
<span class="text-gray-700 dark:text-gray-400">Select Option</span>
|
||||
<select
|
||||
x-model="formData.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 form-select"
|
||||
>
|
||||
<option value="">Choose option</option>
|
||||
<option value="option1">Option 1</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>
|
||||
|
||||
<!-- Checkbox -->
|
||||
<div class="mb-8">
|
||||
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-3">Checkbox</h3>
|
||||
<div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-4 mb-3">
|
||||
<label class="flex items-center text-sm">
|
||||
<input
|
||||
type="checkbox"
|
||||
x-model="exampleForm.checkbox"
|
||||
class="text-purple-600 form-checkbox focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray"
|
||||
/>
|
||||
<span class="ml-2 text-gray-700 dark:text-gray-400">I agree to the terms and conditions</span>
|
||||
</label>
|
||||
</div>
|
||||
<button @click="copyCode(`<label class="flex items-center text-sm">
|
||||
<input
|
||||
type="checkbox"
|
||||
x-model="formData.checkbox"
|
||||
class="text-purple-600 form-checkbox focus:border-purple-400 focus:outline-none focus:shadow-outline-purple"
|
||||
/>
|
||||
<span class="ml-2 text-gray-700 dark:text-gray-400">Checkbox label</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>
|
||||
|
||||
<!-- Disabled Input -->
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-3">Disabled/Read-Only 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">Read-Only Field</span>
|
||||
<input
|
||||
type="text"
|
||||
x-model="exampleForm.disabled"
|
||||
disabled
|
||||
class="block w-full mt-1 text-sm bg-gray-100 border-gray-300 rounded-md dark:bg-gray-700 dark:text-gray-400 dark:border-gray-600 cursor-not-allowed"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<button @click="copyCode(`<input
|
||||
type="text"
|
||||
disabled
|
||||
value="Read-only value"
|
||||
class="block w-full mt-1 text-sm bg-gray-100 border-gray-300 rounded-md dark:bg-gray-700 dark:text-gray-400 dark:border-gray-600 cursor-not-allowed"
|
||||
/>`)" 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">
|
||||
<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-4 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 flex gap-3">
|
||||
<button class="px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple">
|
||||
Primary Button
|
||||
</button>
|
||||
<button class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg hover:bg-purple-700 focus:outline-none">
|
||||
<span x-html="$icon('plus', 'w-4 h-4 mr-2')"></span>
|
||||
With Icon
|
||||
</button>
|
||||
</div>
|
||||
<button @click="copyCode(`<button class="px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg hover:bg-purple-700 focus:outline-none">
|
||||
Button Text
|
||||
</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 flex gap-3">
|
||||
<button class="px-4 py-2 text-sm font-medium leading-5 text-gray-700 transition-colors duration-150 bg-white border border-gray-300 rounded-lg hover:border-gray-400 focus:outline-none dark:text-gray-400 dark:border-gray-600 dark:bg-gray-800">
|
||||
Secondary Button
|
||||
</button>
|
||||
<button class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-gray-700 transition-colors duration-150 bg-white border border-gray-300 rounded-lg hover:border-gray-400 dark:text-gray-400 dark:border-gray-600 dark:bg-gray-800">
|
||||
<span x-html="$icon('arrow-left', 'w-4 h-4 mr-2')"></span>
|
||||
Back
|
||||
</button>
|
||||
</div>
|
||||
<button @click="copyCode(`<button class="px-4 py-2 text-sm font-medium leading-5 text-gray-700 transition-colors duration-150 bg-white border border-gray-300 rounded-lg hover:border-gray-400 dark:text-gray-400 dark:border-gray-600 dark:bg-gray-800">
|
||||
Button Text
|
||||
</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 class="mb-8">
|
||||
<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 flex gap-3">
|
||||
<button class="px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-red-600 border border-transparent rounded-lg hover:bg-red-700 focus:outline-none">
|
||||
Delete
|
||||
</button>
|
||||
<button class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-red-600 border border-transparent rounded-lg hover:bg-red-700 focus:outline-none">
|
||||
<span x-html="$icon('delete', 'w-4 h-4 mr-2')"></span>
|
||||
Delete Item
|
||||
</button>
|
||||
</div>
|
||||
<button @click="copyCode(`<button class="px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-red-600 border border-transparent rounded-lg hover:bg-red-700 focus:outline-none">
|
||||
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>
|
||||
|
||||
<!-- Button States -->
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-3">Button States</h3>
|
||||
<div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-4 mb-3 flex gap-3">
|
||||
<button disabled class="px-4 py-2 text-sm font-medium leading-5 text-white bg-purple-400 border border-transparent rounded-lg cursor-not-allowed">
|
||||
Disabled
|
||||
</button>
|
||||
<button class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-white bg-purple-600 border border-transparent rounded-lg cursor-wait">
|
||||
<span x-html="$icon('spinner', 'w-4 h-4 mr-2')"></span>
|
||||
Loading...
|
||||
</button>
|
||||
</div>
|
||||
<button @click="copyCode(`<button disabled class="px-4 py-2 text-sm font-medium leading-5 text-white bg-purple-400 border border-transparent rounded-lg cursor-not-allowed">
|
||||
Disabled
|
||||
</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>
|
||||
|
||||
<!-- CARDS SECTION -->
|
||||
<section id="cards">
|
||||
<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-4 flex items-center">
|
||||
<span x-html="$icon('collection', 'w-6 h-6 mr-2 text-purple-600 dark:text-purple-400')"></span>
|
||||
Cards
|
||||
</h2>
|
||||
|
||||
<!-- Stats Card -->
|
||||
<div class="mb-8">
|
||||
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-3">Stats Card</h3>
|
||||
<div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-4 mb-3">
|
||||
<div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
|
||||
<div class="p-3 mr-4 text-purple-500 bg-purple-100 rounded-full dark:text-purple-100 dark:bg-purple-500">
|
||||
<span x-html="$icon('user-group', 'w-5 h-5')"></span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">Total Users</p>
|
||||
<p class="text-lg font-semibold text-gray-700 dark:text-gray-200">1,234</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button @click="copyCode(`<div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
|
||||
<div class="p-3 mr-4 text-purple-500 bg-purple-100 rounded-full dark:text-purple-100 dark:bg-purple-500">
|
||||
<span x-html="$icon('user-group', 'w-5 h-5')"></span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">Label</p>
|
||||
<p class="text-lg font-semibold text-gray-700 dark:text-gray-200">Value</p>
|
||||
</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>
|
||||
|
||||
<!-- Info Card -->
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-3">Info Card</h3>
|
||||
<div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-4 mb-3">
|
||||
<div class="px-4 py-3 bg-white rounded-lg shadow-md dark:bg-gray-800">
|
||||
<h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">Card Title</h3>
|
||||
<div class="space-y-3">
|
||||
<div>
|
||||
<p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">Field Label</p>
|
||||
<p class="text-sm text-gray-700 dark:text-gray-300">Field Value</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">Another Label</p>
|
||||
<p class="text-sm text-gray-700 dark:text-gray-300">Another Value</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button @click="copyCode(`<div class="px-4 py-3 bg-white rounded-lg shadow-md dark:bg-gray-800">
|
||||
<h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">Card Title</h3>
|
||||
<div class="space-y-3">
|
||||
<div>
|
||||
<p class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase">Label</p>
|
||||
<p class="text-sm text-gray-700 dark:text-gray-300">Value</p>
|
||||
</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>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- BADGES SECTION -->
|
||||
<section id="badges">
|
||||
<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-4 flex items-center">
|
||||
<span x-html="$icon('tag', 'w-6 h-6 mr-2 text-purple-600 dark:text-purple-400')"></span>
|
||||
Badges
|
||||
</h2>
|
||||
|
||||
<div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-4 mb-3">
|
||||
<div class="flex flex-wrap gap-3">
|
||||
<!-- Success -->
|
||||
<span class="inline-flex items-center px-3 py-1 text-xs font-semibold leading-tight text-green-700 bg-green-100 rounded-full dark:bg-green-700 dark:text-green-100">
|
||||
<span x-html="$icon('check-circle', 'w-3 h-3 mr-1')"></span>
|
||||
Active
|
||||
</span>
|
||||
<!-- Warning -->
|
||||
<span class="inline-flex items-center px-3 py-1 text-xs font-semibold leading-tight text-orange-700 bg-orange-100 rounded-full dark:bg-orange-700 dark:text-orange-100">
|
||||
<span x-html="$icon('clock', 'w-3 h-3 mr-1')"></span>
|
||||
Pending
|
||||
</span>
|
||||
<!-- Danger -->
|
||||
<span class="inline-flex items-center px-3 py-1 text-xs font-semibold leading-tight text-red-700 bg-red-100 rounded-full dark:bg-red-700 dark:text-red-100">
|
||||
<span x-html="$icon('exclamation', 'w-3 h-3 mr-1')"></span>
|
||||
Inactive
|
||||
</span>
|
||||
<!-- Info -->
|
||||
<span class="inline-flex items-center px-3 py-1 text-xs font-semibold leading-tight text-blue-700 bg-blue-100 rounded-full dark:bg-blue-700 dark:text-blue-100">
|
||||
<span x-html="$icon('information-circle', 'w-3 h-3 mr-1')"></span>
|
||||
Info
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<button @click="copyCode(`<span class="inline-flex items-center px-3 py-1 text-xs font-semibold leading-tight text-green-700 bg-green-100 rounded-full dark:bg-green-700 dark:text-green-100">
|
||||
<span x-html="$icon('check-circle', 'w-3 h-3 mr-1')"></span>
|
||||
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>
|
||||
</section>
|
||||
|
||||
<!-- ALERTS SECTION -->
|
||||
<section id="alerts">
|
||||
<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-4 flex items-center">
|
||||
<span x-html="$icon('exclamation', 'w-6 h-6 mr-2 text-purple-600 dark:text-purple-400')"></span>
|
||||
Alerts & Toasts
|
||||
</h2>
|
||||
|
||||
<div class="space-y-4">
|
||||
<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 Toast
|
||||
</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 Toast
|
||||
</button>
|
||||
<button @click="showToastExample('warning')" class="px-4 py-2 text-sm font-medium text-white bg-orange-600 rounded-lg hover:bg-orange-700">
|
||||
Show Warning Toast
|
||||
</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 Toast
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="mt-4">
|
||||
<button @click="copyCode(`Utils.showToast('Operation successful!', 'success');`)" 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 Toast Code
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- MORE SECTIONS -->
|
||||
<section id="tables">
|
||||
<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-4">Tables</h2>
|
||||
<p class="text-gray-600 dark:text-gray-400">
|
||||
See your existing table components in the vendor and user list pages.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="modals">
|
||||
<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-4">Modals</h2>
|
||||
<p class="text-gray-600 dark:text-gray-400">
|
||||
Modal dialogs for confirmations and forms.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_scripts %}
|
||||
{# ✅ CRITICAL: Load JavaScript file #}
|
||||
<script src="{{ url_for('static', path='admin/js/components.js') }}"></script>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user