mirror of
https://github.com/pacnpal/thrillwiki_django_no_react.git
synced 2025-12-20 05:51:08 -05:00
42a3dc7637
- Added Button component with various styles and sizes. - Introduced Card component for displaying content with titles and descriptions. - Created Input component for form fields with support for various attributes. - Developed Toast Notification Container for displaying alerts and messages. - Designed pages for listing designers and operators with pagination and responsive layout. - Documented frontend migration from React to HTMX + Alpine.js, detailing component usage and integration.
64 lines
2.2 KiB
HTML
64 lines
2.2 KiB
HTML
{% comment %}
|
|
Button Component - Django Template Version of shadcn/ui Button
|
|
Usage: {% include 'components/ui/button.html' with variant='default' size='default' text='Click me' %}
|
|
{% endcomment %}
|
|
|
|
{% load static %}
|
|
|
|
{% with variant=variant|default:'default' size=size|default:'default' %}
|
|
<button
|
|
class="
|
|
inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium
|
|
ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2
|
|
focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50
|
|
{% if variant == 'default' %}
|
|
bg-primary text-primary-foreground hover:bg-primary/90
|
|
{% elif variant == 'destructive' %}
|
|
bg-destructive text-destructive-foreground hover:bg-destructive/90
|
|
{% elif variant == 'outline' %}
|
|
border border-input bg-background hover:bg-accent hover:text-accent-foreground
|
|
{% elif variant == 'secondary' %}
|
|
bg-secondary text-secondary-foreground hover:bg-secondary/80
|
|
{% elif variant == 'ghost' %}
|
|
hover:bg-accent hover:text-accent-foreground
|
|
{% elif variant == 'link' %}
|
|
text-primary underline-offset-4 hover:underline
|
|
{% endif %}
|
|
{% if size == 'default' %}
|
|
h-10 px-4 py-2
|
|
{% elif size == 'sm' %}
|
|
h-9 rounded-md px-3
|
|
{% elif size == 'lg' %}
|
|
h-11 rounded-md px-8
|
|
{% elif size == 'icon' %}
|
|
h-10 w-10
|
|
{% endif %}
|
|
{{ class|default:'' }}
|
|
"
|
|
{% if type %}type="{{ type }}"{% endif %}
|
|
{% if onclick %}onclick="{{ onclick }}"{% endif %}
|
|
{% if hx_get %}hx-get="{{ hx_get }}"{% endif %}
|
|
{% if hx_post %}hx-post="{{ hx_post }}"{% endif %}
|
|
{% if hx_target %}hx-target="{{ hx_target }}"{% endif %}
|
|
{% if hx_swap %}hx-swap="{{ hx_swap }}"{% endif %}
|
|
{% if x_data %}x-data="{{ x_data }}"{% endif %}
|
|
{% if x_on %}{{ x_on }}{% endif %}
|
|
{% if disabled %}disabled{% endif %}
|
|
{{ attrs|default:'' }}
|
|
>
|
|
{% if icon_left %}
|
|
<i class="{{ icon_left }} w-4 h-4"></i>
|
|
{% endif %}
|
|
|
|
{% if text %}
|
|
{{ text }}
|
|
{% else %}
|
|
{{ content|default:'' }}
|
|
{% endif %}
|
|
|
|
{% if icon_right %}
|
|
<i class="{{ icon_right }} w-4 h-4"></i>
|
|
{% endif %}
|
|
</button>
|
|
{% endwith %}
|