mirror of
https://github.com/pacnpal/thrillwiki_django_no_react.git
synced 2025-12-21 18:31:08 -05:00
0cf6805c18
Refactor HTML templates to incorporate Django Cotton components for buttons, forms, and other UI elements. 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
58 lines
1.5 KiB
HTML
58 lines
1.5 KiB
HTML
{% comment %}
|
|
Cotton Card Component - Django Template Version of shadcn/ui Card
|
|
Converts existing card component to use Django Cotton's component system
|
|
{% endcomment %}
|
|
|
|
<!-- Cotton Card Component -->
|
|
<c-vars
|
|
card_classes="card_classes|default:''"
|
|
title="title|default:''"
|
|
description="description|default:''"
|
|
header_content="header_content|default:''"
|
|
body_content="body_content|default:''"
|
|
footer_content="footer_content|default:''"
|
|
content="content|default:''"
|
|
/>
|
|
|
|
<div class="rounded-lg border bg-card text-card-foreground shadow-sm {{ card_classes }}">
|
|
{% if title or description or header_content %}
|
|
<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 %}
|
|
|
|
<!-- Card Header Slot -->
|
|
<c-slot name="header">
|
|
{% if header_content %}
|
|
{{ header_content|safe }}
|
|
{% endif %}
|
|
</c-slot>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if content or body_content %}
|
|
<div class="p-6 pt-0">
|
|
<!-- Card Body Content -->
|
|
<c-slot name="content">
|
|
{% if content %}
|
|
{{ content|safe }}
|
|
{% endif %}
|
|
{% if body_content %}
|
|
{{ body_content|safe }}
|
|
{% endif %}
|
|
</c-slot>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if footer_content %}
|
|
<div class="flex items-center p-6 pt-0">
|
|
<!-- Card Footer Slot -->
|
|
<c-slot name="footer">
|
|
{{ footer_content|safe }}
|
|
</c-slot>
|
|
</div>
|
|
{% endif %}
|
|
</div> |