mirror of
https://github.com/pacnpal/thrillwiki_django_no_react.git
synced 2025-12-20 10:31:09 -05:00
3dd5baef19
Convert button component to use Django Cotton's component system. Update replit.md to reflect phase 1 completion of Django Cotton integration. Replit-Commit-Author: Agent Replit-Commit-Session-Id: eff39de1-3afa-446d-a965-acaf61837fc7 Replit-Commit-Checkpoint-Type: intermediate_checkpoint Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/d6d61dac-164d-45dd-929f-7dcdfd771b64/eff39de1-3afa-446d-a965-acaf61837fc7/55dLPZG
82 lines
2.6 KiB
HTML
82 lines
2.6 KiB
HTML
{% comment %}
|
|
Cotton Button Component - Django Template Version of shadcn/ui Button
|
|
Converts existing button component to use Django Cotton's component system
|
|
{% endcomment %}
|
|
|
|
{% load static %}
|
|
|
|
<!-- Cotton Button Component -->
|
|
<c-vars
|
|
variant="variant|default:'default'"
|
|
size="size|default:'default'"
|
|
button_classes="button_classes|default:''"
|
|
type="type|default:'button'"
|
|
disabled="disabled|default:''"
|
|
onclick="onclick|default:''"
|
|
x_data="x_data|default:''"
|
|
x_on="x_on|default:''"
|
|
hx_get="hx_get|default:''"
|
|
hx_post="hx_post|default:''"
|
|
hx_target="hx_target|default:''"
|
|
hx_swap="hx_swap|default:''"
|
|
icon_left="icon_left|default:''"
|
|
icon_right="icon_right|default:''"
|
|
text="text|default:''"
|
|
attrs="attrs|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 %}
|
|
{{ button_classes }}
|
|
"
|
|
type="{{ type }}"
|
|
{% 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 and x_data != '' %}x-data="{{ x_data }}"{% endif %}
|
|
{% if x_on %}{{ x_on }}{% endif %}
|
|
{% if disabled and disabled != '' %}disabled{% endif %}
|
|
{{ attrs }}
|
|
>
|
|
{% if icon_left %}
|
|
<i class="{{ icon_left }} w-4 h-4"></i>
|
|
{% endif %}
|
|
|
|
<!-- Button Text Content -->
|
|
<c-slot name="content">
|
|
{% if text %}
|
|
{{ text }}
|
|
{% endif %}
|
|
</c-slot>
|
|
|
|
{% if icon_right %}
|
|
<i class="{{ icon_right }} w-4 h-4"></i>
|
|
{% endif %}
|
|
</button> |