pacnpal/thrillwiki_django_no_react
1
1
Fork 0
mirror of https://github.com/pacnpal/thrillwiki_django_no_react.git synced 2025-12-21 20:51:13 -05:00
Code Issues Packages Projects Releases Wiki Activity

feat: Add detailed park and ride pages with HTMX integration

Browse Source 
- Implemented park detail page with dynamic content loading for rides and weather.
- Created park list page with filters and search functionality.
- Developed ride detail page showcasing ride stats, reviews, and similar rides.
- Added ride list page with filtering options and dynamic loading.
- Introduced search results page with tabs for parks, rides, and users.
- Added HTMX tests for global search functionality.
This commit is contained in:
pacnpal
2025-12-19 19:53:20 -05:00
parent bf04e4d854
commit b9063ff4f8
154 changed files with 4536 additions and 2570 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
templates/components/data-display/data-table.html Normal file
View File

@@ -0,0 +1,88 @@
<div class="overflow-hidden border rounded-md shadow-sm bg-card text-card-foreground">
<div class="relative w-full overflow-auto">
<table class="w-full text-sm caption-bottom">
{% if caption %}
<caption class="mt-4 text-sm text-muted-foreground">{{ caption }}</caption>
{% endif %}
<thead class="[&_tr]:border-b">
<tr class="border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted">
{% for column in columns %}
<th class="h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0">
{% if column.sortable %}
<button hx-get="{{ hx_url }}?sort={{ column.field }}"
hx-target="{{ hx_target }}"
class="flex items-center gap-1 hover:text-foreground">
{{ column.label }}
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4" />
</svg>
</button>
{% else %}
{{ column.label }}
{% endif %}
</th>
{% endfor %}
{% if actions %}
<th class="h-12 px-4 font-medium text-right align-middle text-muted-foreground">Actions</th>
{% endif %}
</tr>
</thead>
<tbody class="[&_tr:last-child]:border-0">
{% for row in data %}
<tr class="border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted">
{% for column in columns %}
<td class="p-4 align-middle [&:has([role=checkbox])]:pr-0">
{% with value=row|get_item:column.field %}
{% if column.template %}
{% include column.template with value=value row=row %}
{% else %}
{{ value|default:"-" }}
{% endif %}
{% endwith %}
</td>
{% endfor %}
{% if actions %}
<td class="p-4 text-right align-middle">
{% include actions with row=row %}
</td>
{% endif %}
</tr>
{% empty %}
<tr>
<td colspan="{{ columns|length|add:1 }}" class="h-24 p-4 text-center text-muted-foreground">
No results found.
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% if page_obj.has_other_pages %}
<div class="flex items-center justify-between px-4 py-4 border-t">
<div class="flex items-center gap-2 text-sm text-muted-foreground">
Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}
</div>
<div class="flex items-center gap-2">
{% if page_obj.has_previous %}
<button hx-get="{{ hx_url }}?page={{ page_obj.previous_page_number }}"
hx-target="{{ hx_target }}"
class="inline-flex items-center justify-center px-4 py-2 text-sm font-medium transition-colors border rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background border-input hover:bg-accent hover:text-accent-foreground h-9">
Previous
</button>
{% endif %}
{% if page_obj.has_next %}
<button hx-get="{{ hx_url }}?page={{ page_obj.next_page_number }}"
hx-target="{{ hx_target }}"
class="inline-flex items-center justify-center px-4 py-2 text-sm font-medium transition-colors border rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background border-input hover:bg-accent hover:text-accent-foreground h-9">
Next
</button>
{% endif %}
</div>
</div>
{% endif %}
</div>

58
templates/components/navigation/footer.html Normal file
View File

@@ -0,0 +1,58 @@
{% load static %}
<footer class="mt-auto border-t bg-background border-border">
<div class="px-4 py-12 mx-auto max-w-7xl sm:px-6 lg:px-8">
<div class="grid grid-cols-1 gap-8 md:grid-cols-4">
<!-- Brand -->
<div class="col-span-1 md:col-span-2">
<div class="flex items-center gap-2 mb-4">
<!-- Replace with logo -->
<span class="text-xl font-bold tracking-tight text-foreground">ThrillWiki</span>
</div>
<p class="max-w-sm mb-6 text-sm text-muted-foreground">
Your comprehensive guide to theme parks and roller coasters.
Discover, track, and rate your favorite thrills.
</p>
<div class="flex space-x-4">
<!-- Social Links -->
<a href="#" class="transition-colors text-muted-foreground hover:text-foreground">
<span class="sr-only">Twitter</span>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" />
</svg>
</a>
<a href="#" class="transition-colors text-muted-foreground hover:text-foreground">
<span class="sr-only">GitHub</span>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd" />
</svg>
</a>
</div>
</div>
<!-- Links -->
<div class="col-span-1">
<h3 class="mb-4 text-sm font-semibold tracking-wider uppercase text-foreground">Discover</h3>
<ul class="space-y-3">
<li><a href="{% url 'parks:park_list' %}" class="text-sm transition-colors text-muted-foreground hover:text-foreground">Parks</a></li>
<li><a href="{% url 'rides:ride_list' %}" class="text-sm transition-colors text-muted-foreground hover:text-foreground">Rides</a></li>
<li><a href="#" class="text-sm transition-colors text-muted-foreground hover:text-foreground">Manufacturers</a></li>
<li><a href="#" class="text-sm transition-colors text-muted-foreground hover:text-foreground">Top Rated</a></li>
</ul>
</div>
<!-- Legal -->
<div class="col-span-1">
<h3 class="mb-4 text-sm font-semibold tracking-wider uppercase text-foreground">Legal</h3>
<ul class="space-y-3">
<li><a href="{% url 'pages:privacy' %}" class="text-sm transition-colors text-muted-foreground hover:text-foreground">Privacy Policy</a></li>
<li><a href="{% url 'pages:terms' %}" class="text-sm transition-colors text-muted-foreground hover:text-foreground">Terms of Service</a></li>
<li><a href="#" class="text-sm transition-colors text-muted-foreground hover:text-foreground">Cookie Policy</a></li>
</ul>
</div>
</div>
<div class="pt-8 mt-8 text-center border-t border-border">
<p class="text-sm text-muted-foreground">&copy; {% now "Y" %} ThrillWiki. All rights reserved.</p>
</div>
</div>
</footer>

182
templates/components/navigation/navbar.html Normal file
View File

@@ -0,0 +1,182 @@
{% load static %}
<nav class="bg-background border-b border-border sticky top-0 z-40 backdrop-blur supports-[backdrop-filter]:bg-background/60" x-data="{ mobileMenuOpen: false }">
<div class="px-4 mx-auto max-w-7xl sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<!-- Left Side: Logo & Desktop Menu -->
<div class="flex">
<!-- Logo -->
<div class="flex items-center flex-shrink-0">
<a href="{% url 'home' %}" class="flex items-center gap-2">
<!-- Replace with actual logo SVG/Image -->
<span class="text-xl font-bold tracking-tight text-foreground">ThrillWiki</span>
</a>
</div>
<!-- Desktop Menu -->
<div class="hidden sm:ml-6 sm:flex sm:space-x-8">
<!-- Current: "border-primary text-foreground", Default: "border-transparent text-muted-foreground hover:border-border hover:text-foreground" -->
<a href="{% url 'parks:park_list' %}"
class="inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium transition-colors duration-200
{% if '/parks/' in request.path %}border-primary text-foreground{% else %}border-transparent text-muted-foreground hover:border-border hover:text-foreground{% endif %}">
Parks
</a>
<a href="{% url 'rides:ride_list' %}"
class="inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium transition-colors duration-200
{% if '/rides/' in request.path %}border-primary text-foreground{% else %}border-transparent text-muted-foreground hover:border-border hover:text-foreground{% endif %}">
Rides
</a>
<!-- Add more links as needed -->
</div>
</div>
<!-- Right Side: Search, Theme, User Menu, Mobile Toggle -->
<div class="flex items-center gap-4">
<!-- Search Trigger -->
<button type="button"
class="p-2 transition-colors duration-200 text-muted-foreground hover:text-foreground"
@click="$store.search.toggle()"
aria-label="Search">
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
</svg>
</button>
<!-- Theme Toggle -->
<button type="button"
class="p-2 transition-colors duration-200 text-muted-foreground hover:text-foreground"
@click="$store.theme.toggle()"
aria-label="Toggle theme">
<!-- Sun Icon -->
<svg x-show="!$store.theme.isDark" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" />
</svg>
<!-- Moon Icon -->
<svg x-show="$store.theme.isDark" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" style="display: none;">
<path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z" />
</svg>
</button>
<!-- User Menu (Authenticated) -->
{% if user.is_authenticated %}
<div class="relative ml-3" x-data="{ open: false }">
<div>
<button type="button"
class="flex text-sm rounded-full bg-background focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2"
@click="open = !open"
@click.away="open = false"
aria-expanded="false"
aria-haspopup="true">
<span class="sr-only">Open user menu</span>
{% if user.profile.avatar %}
<img class="object-cover w-8 h-8 rounded-full" src="{{ user.profile.avatar.url }}" alt="{{ user.username }}">
{% else %}
<div class="flex items-center justify-center w-8 h-8 text-xs font-medium rounded-full bg-primary/10 text-primary">
{{ user.username|make_list|first|upper }}
</div>
{% endif %}
</button>
</div>
<!-- Dropdown menu -->
<div x-show="open"
x-transition:enter="transition ease-out duration-200"
x-transition:enter-start="transform opacity-0 scale-95"
x-transition:enter-end="transform opacity-100 scale-100"
x-transition:leave="transition ease-in duration-75"
x-transition:leave-start="transform opacity-100 scale-100"
x-transition:leave-end="transform opacity-0 scale-95"
class="absolute right-0 z-10 w-48 py-1 mt-2 origin-top-right rounded-md shadow-lg bg-popover ring-1 ring-black ring-opacity-5 focus:outline-none"
role="menu"
aria-orientation="vertical"
aria-labelledby="user-menu-button"
tabindex="-1"
style="display: none;">
<a href="{% url 'accounts:profile' %}" class="block px-4 py-2 text-sm text-foreground hover:bg-muted" role="menuitem">Your Profile</a>
<a href="{% url 'accounts:settings' %}" class="block px-4 py-2 text-sm text-foreground hover:bg-muted" role="menuitem">Settings</a>
<div class="my-1 border-t border-border"></div>
<form method="post" action="{% url 'account_logout' %}">
{% csrf_token %}
<button type="submit" class="block w-full px-4 py-2 text-sm text-left text-destructive hover:bg-destructive/10" role="menuitem">Sign out</button>
</form>
</div>
</div>
{% else %}
<!-- Auth Buttons (Guest) -->
<div class="items-center hidden gap-3 sm:flex">
<a href="{% url 'account_login' %}" class="text-sm font-medium transition-colors text-muted-foreground hover:text-foreground">Log in</a>
<a href="{% url 'account_signup' %}" class="inline-flex items-center justify-center px-4 py-2 text-sm font-medium transition-colors rounded-md ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-9">Sign up</a>
</div>
{% endif %}
<!-- Mobile menu button -->
<div class="flex items-center sm:hidden">
<button type="button"
class="inline-flex items-center justify-center p-2 rounded-md text-muted-foreground hover:bg-muted hover:text-foreground focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary"
@click="mobileMenuOpen = !mobileMenuOpen"
aria-controls="mobile-menu"
aria-expanded="false">
<span class="sr-only">Open main menu</span>
<!-- Icon when menu is closed -->
<svg x-show="!mobileMenuOpen" class="block w-6 h-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
</svg>
<!-- Icon when menu is open -->
<svg x-show="mobileMenuOpen" class="block w-6 h-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" style="display: none;">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
</div>
</div>
<!-- Mobile menu -->
<div class="sm:hidden" id="mobile-menu" x-show="mobileMenuOpen" style="display: none;">
<div class="pt-2 pb-3 space-y-1">
<!-- Current: "bg-primary/10 border-primary text-primary", Default: "border-transparent text-muted-foreground hover:bg-muted hover:border-border hover:text-foreground" -->
<a href="{% url 'parks:park_list' %}"
class="block border-l-4 py-2 pl-3 pr-4 text-base font-medium {% if '/parks/' in request.path %}bg-primary/10 border-primary text-primary{% else %}border-transparent text-muted-foreground hover:bg-muted hover:border-border hover:text-foreground{% endif %}">
Parks
</a>
<a href="{% url 'rides:ride_list' %}"
class="block border-l-4 py-2 pl-3 pr-4 text-base font-medium {% if '/rides/' in request.path %}bg-primary/10 border-primary text-primary{% else %}border-transparent text-muted-foreground hover:bg-muted hover:border-border hover:text-foreground{% endif %}">
Rides
</a>
</div>
{% if not user.is_authenticated %}
<div class="pt-4 pb-3 border-t border-border">
<div class="space-y-1">
<a href="{% url 'account_login' %}" class="block py-2 pl-3 pr-4 text-base font-medium border-l-4 border-transparent text-muted-foreground hover:border-border hover:bg-muted hover:text-foreground">Log in</a>
<a href="{% url 'account_signup' %}" class="block py-2 pl-3 pr-4 text-base font-medium border-l-4 border-transparent text-muted-foreground hover:border-border hover:bg-muted hover:text-foreground">Sign up</a>
</div>
</div>
{% else %}
<div class="pt-4 pb-3 border-t border-border">
<div class="flex items-center px-4">
<div class="flex-shrink-0">
{% if user.profile.avatar %}
<img class="object-cover w-10 h-10 rounded-full" src="{{ user.profile.avatar.url }}" alt="{{ user.username }}">
{% else %}
<div class="flex items-center justify-center w-10 h-10 text-sm font-medium rounded-full bg-primary/10 text-primary">
{{ user.username|make_list|first|upper }}
</div>
{% endif %}
</div>
<div class="ml-3">
<div class="text-base font-medium text-foreground">{{ user.username }}</div>
<div class="text-sm font-medium text-muted-foreground">{{ user.email }}</div>
</div>
</div>
<div class="mt-3 space-y-1">
<a href="{% url 'accounts:profile' %}" class="block px-4 py-2 text-base font-medium text-muted-foreground hover:bg-muted hover:text-foreground">Your Profile</a>
<a href="{% url 'accounts:settings' %}" class="block px-4 py-2 text-base font-medium text-muted-foreground hover:bg-muted hover:text-foreground">Settings</a>
<form method="post" action="{% url 'account_logout' %}">
{% csrf_token %}
<button type="submit" class="block w-full px-4 py-2 text-base font-medium text-left text-destructive hover:bg-muted hover:text-destructive">Sign out</button>
</form>
</div>
</div>
{% endif %}
</div>
</nav>

42
templates/components/search/multi-select.html Normal file
View File

@@ -0,0 +1,42 @@
<div class="relative w-full" x-data="{ open: false, selected: [], query: '' }">
<label class="block mb-2 text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
{{ label }}
</label>
<div class="relative">
<button type="button"
@click="open = !open"
class="flex items-center justify-between w-full h-10 px-3 py-2 text-sm border rounded-md border-input bg-background ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50">
<span x-text="selected.length ? `${selected.length} selected` : '{{ placeholder|default:'Select options...' }}'"></span>
<svg class="w-4 h-4 opacity-50" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</button>
<div x-show="open"
@click.away="open = false"
class="absolute z-50 w-full mt-2 border rounded-md shadow-md outline-none top-full bg-popover text-popover-foreground animate-in fade-in-0 zoom-in-95">
<div class="p-2 border-b">
<input type="text"
x-model="query"
class="flex w-full px-3 py-1 text-sm transition-colors bg-transparent rounded-md shadow-sm h-9 placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
placeholder="Search...">
</div>
<div class="max-h-[200px] overflow-y-auto p-1">
{% for option in options %}
<label class="flex items-center p-2 space-x-2 rounded-sm cursor-pointer hover:bg-accent hover:text-accent-foreground"
x-show="query === '' || '{{ option.label }}'.toLowerCase().includes(query.toLowerCase())">
<input type="checkbox"
name="{{ name }}"
value="{{ option.value }}"
x-model="selected"
class="w-4 h-4 rounded border-primary text-primary focus:ring-primary">
<span class="text-sm">{{ option.label }}</span>
</label>
{% endfor %}
</div>
</div>
</div>
</div>

9
templates/components/ui/avatar.html Normal file
View File

@@ -0,0 +1,9 @@
<span class="relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full {{ class }}">
{% if src %}
<img class="object-cover w-full h-full aspect-square" src="{{ src }}" alt="{{ alt|default:'' }}">
{% else %}
<span class="flex items-center justify-center w-full h-full rounded-full bg-muted text-muted-foreground">
{{ fallback|default:alt|make_list|first|upper }}
</span>
{% endif %}
</span>

61
templates/components/ui/button.html Normal file
View File

@@ -0,0 +1,61 @@
{% load widget_tweaks %}
{% if type == 'button' or type == 'submit' or type == 'reset' %}
<button
type="{{ type|default:'button' }}"
{% if id %}id="{{ id }}"{% endif %}
class="inline-flex items-center justify-center 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 == '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
{% else %}bg-primary text-primary-foreground hover:bg-primary/90{% endif %}
{% if size == 'sm' %}h-9 rounded-md px-3
{% elif size == 'lg' %}h-11 rounded-md px-8
{% elif size == 'icon' %}h-10 w-10
{% else %}h-10 px-4 py-2{% endif %}
{{ class }}"
{% if disabled %}disabled{% 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 hx_indicator %}hx-indicator="{{ hx_indicator }}"{% endif %}
{% if x_data %}x-data="{{ x_data }}"{% endif %}
{% if x_on_click %}@click="{{ x_on_click }}"{% endif %}>
{% if icon %}
{{ icon|safe }}
{% if label %}<span class="ml-2">{{ label }}</span>{% endif %}
{% else %}
{{ label|default:content }}
{% endif %}
{% block button_content %}{% endblock %}
</button>
{% else %}
<a
href="{{ href }}"
class="inline-flex items-center justify-center 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 == '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
{% else %}bg-primary text-primary-foreground hover:bg-primary/90{% endif %}
{% if size == 'sm' %}h-9 rounded-md px-3
{% elif size == 'lg' %}h-11 rounded-md px-8
{% elif size == 'icon' %}h-10 w-10
{% else %}h-10 px-4 py-2{% endif %}
{{ class }}"
{% if x_data %}x-data="{{ x_data }}"{% endif %}
{% if x_on_click %}@click="{{ x_on_click }}"{% endif %}>
{% if icon %}
{{ icon|safe }}
{% if label %}<span class="ml-2">{{ label }}</span>{% endif %}
{% else %}
{{ label|default:content }}
{% endif %}
{% block link_content %}{% endblock %}
</a>
{% endif %}

26
templates/components/ui/card.html Normal file
View File

@@ -0,0 +1,26 @@
<div class="border rounded-lg shadow-sm bg-card text-card-foreground">
{% if header or title %}
<div class="flex flex-col space-y-1.5 p-6">
{% if title %}
<h3 class="text-2xl font-semibold leading-none tracking-tight">{{ title }}</h3>
{% endif %}
{% if description %}
<p class="text-sm text-muted-foreground">{{ description }}</p>
{% endif %}
{% if header %}
{{ header|safe }}
{% endif %}
</div>
{% endif %}
<div class="p-6 pt-0">
{{ content|safe }}
{% block card_content %}{% endblock %}
</div>
{% if footer %}
<div class="flex items-center p-6 pt-0">
{{ footer|safe }}
</div>
{% endif %}
</div>

57
templates/components/ui/dialog.html Normal file
View File

@@ -0,0 +1,57 @@
<div class="fixed inset-0 z-50 flex items-start justify-center sm:items-center"
role="dialog"
aria-modal="true"
x-data="{ open: true }"
x-show="open"
x-transition:enter="transition ease-out duration-200"
x-transition:enter-start="opacity-0"
x-transition:enter-end="opacity-100"
x-transition:leave="transition ease-in duration-100"
x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0">
<!-- Backdrop -->
<div class="fixed inset-0 transition-all bg-background/80 backdrop-blur-sm"
@click="open = false; setTimeout(() => $el.closest('[hx-history-elt]').innerHTML = '', 200)"></div>
<!-- Dialog Panel -->
<div class="fixed z-50 grid w-full gap-4 p-6 duration-200 border shadow-lg bg-background sm:max-w-lg sm:rounded-lg"
x-show="open"
x-transition:enter="animate-in fade-in-0 zoom-in-95 slide-in-from-left-1/2 slide-in-from-top-[48%]"
x-transition:leave="animate-out fade-out-0 zoom-out-95 slide-out-to-left-1/2 slide-out-to-top-[48%]">
<div class="flex flex-col space-y-1.5 text-center sm:text-left">
{% if title %}
<h2 class="text-lg font-semibold leading-none tracking-tight">
{{ title }}
</h2>
{% endif %}
{% if description %}
<p class="text-sm text-muted-foreground">
{{ description }}
</p>
{% endif %}
</div>
<div class="py-4">
{{ content|safe }}
{% block dialog_content %}{% endblock %}
</div>
{% if footer %}
<div class="flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2">
{{ footer|safe }}
</div>
{% endif %}
<!-- Close Button -->
<button class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
@click="open = false">
<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="M6 18L18 6M6 6l12 12"></path>
</svg>
<span class="sr-only">Close</span>
</button>
</div>
</div>

36
templates/components/ui/dropdown.html Normal file
View File

@@ -0,0 +1,36 @@
<div class="relative inline-block text-left" x-data="{ open: false }" @click.away="open = false">
<div @click="open = !open">
{% if trigger %}
{{ trigger|safe }}
{% else %}
<button type="button"
class="inline-flex w-full justify-center gap-x-1.5 rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
id="menu-button"
aria-expanded="true"
aria-haspopup="true">
{{ label|default:"Options" }}
<svg class="w-5 h-5 -mr-1 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd" />
</svg>
</button>
{% endif %}
</div>
<div class="absolute right-0 z-10 w-56 mt-2 transition-all duration-100 ease-in-out origin-top-right transform scale-95 bg-white rounded-md shadow-lg opacity-0 ring-1 ring-black ring-opacity-5 focus:outline-none"
x-show="open"
x-transition:enter="transition ease-out duration-100"
x-transition:enter-start="transform opacity-0 scale-95"
x-transition:enter-end="transform opacity-100 scale-100"
x-transition:leave="transition ease-in duration-75"
x-transition:leave-start="transform opacity-100 scale-100"
x-transition:leave-end="transform opacity-0 scale-95"
role="menu"
aria-orientation="vertical"
aria-labelledby="menu-button"
tabindex="-1">
<div class="py-1" role="none">
{{ content|safe }}
{% block dropdown_content %}{% endblock %}
</div>
</div>
</div>

12
templates/components/ui/form/checkbox.html Normal file
View File

@@ -0,0 +1,12 @@
{% load widget_tweaks %}
<div class="flex items-center space-x-2">
{% render_field field class+="aspect-square h-4 w-4 rounded border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50" %}
<label for="{{ field.id_for_label }}" class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
{{ label }}
</label>
</div>
{% if field.errors %}
<p class="mt-1 text-sm font-medium text-destructive">{{ field.errors.0 }}</p>
{% endif %}

19
templates/components/ui/form/input.html Normal file
View File

@@ -0,0 +1,19 @@
{% load widget_tweaks %}
<div class="space-y-2">
{% if label %}
<label for="{{ field.id_for_label }}" class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
{{ label }}
</label>
{% endif %}
{% render_field field class+="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50" placeholder=placeholder %}
{% if field.help_text %}
<p class="text-sm text-muted-foreground">{{ field.help_text }}</p>
{% endif %}
{% if field.errors %}
<p class="text-sm font-medium text-destructive">{{ field.errors.0 }}</p>
{% endif %}
</div>

19
templates/components/ui/form/select.html Normal file
View File

@@ -0,0 +1,19 @@
{% load widget_tweaks %}
<div class="space-y-2">
{% if label %}
<label for="{{ field.id_for_label }}" class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
{{ label }}
</label>
{% endif %}
{% render_field field class+="flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1" %}
{% if field.help_text %}
<p class="text-sm text-muted-foreground">{{ field.help_text }}</p>
{% endif %}
{% if field.errors %}
<p class="text-sm font-medium text-destructive">{{ field.errors.0 }}</p>
{% endif %}
</div>

19
templates/components/ui/form/textarea.html Normal file
View File

@@ -0,0 +1,19 @@
{% load widget_tweaks %}
<div class="space-y-2">
{% if label %}
<label for="{{ field.id_for_label }}" class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
{{ label }}
</label>
{% endif %}
{% render_field field class+="flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50" placeholder=placeholder %}
{% if field.help_text %}
<p class="text-sm text-muted-foreground">{{ field.help_text }}</p>
{% endif %}
{% if field.errors %}
<p class="text-sm font-medium text-destructive">{{ field.errors.0 }}</p>
{% endif %}
</div>

1
templates/components/ui/skeleton.html Normal file
View File

@@ -0,0 +1 @@
<div class="animate-pulse rounded-md bg-muted {{ class }}"></div>

58
templates/components/ui/toast-container.html Normal file
View File

@@ -0,0 +1,58 @@
<div x-data
class="fixed z-50 flex flex-col max-w-sm gap-2 pointer-events-none bottom-4 right-4">
<template x-for="toast in $store.toast.toasts" :key="toast.id">
<div x-show="true"
x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="opacity-0 translate-y-2"
x-transition:enter-end="opacity-100 translate-y-0"
x-transition:leave="transition ease-in duration-200"
x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0 translate-x-full"
:class="{
'bg-success-50 border-success-200 text-success-800 dark:bg-success-900/20 dark:border-success-800 dark:text-success-200': toast.type === 'success',
'bg-error-50 border-error-200 text-error-800 dark:bg-error-900/20 dark:border-error-800 dark:text-error-200': toast.type === 'error',
'bg-warning-50 border-warning-200 text-warning-800 dark:bg-warning-900/20 dark:border-warning-800 dark:text-warning-200': toast.type === 'warning',
'bg-info-50 border-info-200 text-info-800 dark:bg-info-900/20 dark:border-info-800 dark:text-info-200': toast.type === 'info'
}"
class="flex items-start w-full gap-3 p-4 border rounded-lg shadow-lg pointer-events-auto">
<!-- Icon -->
<div class="flex-shrink-0 mt-0.5">
<template x-if="toast.type === 'success'">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</template>
<template x-if="toast.type === 'error'">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</template>
<template x-if="toast.type === 'warning'">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
</svg>
</template>
<template x-if="toast.type === 'info'">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</template>
</div>
<!-- Content -->
<div class="flex-1">
<p x-text="toast.message" class="text-sm font-medium"></p>
</div>
<!-- Dismiss -->
<button @click="$store.toast.dismiss(toast.id)"
class="flex-shrink-0 p-1 transition-colors rounded hover:bg-black/10 dark:hover:bg-white/10">
<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="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
</template>
</div>