[] base template

This commit is contained in:
2025-04-20 12:55:14 -05:00
parent 0d9958931f
commit e720ca05f4
27 changed files with 1444 additions and 78 deletions

View File

@@ -0,0 +1,13 @@
<div{{ attributes }}>
<div class="flex flex-col bg-white border border-gray-200 border-t-4 border-t-orange-500 shadow-2xs rounded-xl dark:bg-slate-600 dark:border-neutral-700 dark:border-t-orange-500 dark:shadow-neutral-700/70">
<div class="p-4 md:p-5">
<h3 class="mb-1 text-lg font-bold text-gray-800 dark:text-white">
{{ title }}
</h3>
<div class="{{ contentClass|default('flex flex-col overflow-hidden rounded-md') }}">
{% block content %}{% endblock %}
</div>
</div>
</div>
</div>

View File

@@ -0,0 +1,15 @@
<header {{ attributes }} class="bg-cyan-950">
<div class="px-4 sm:px-6 lg:px-8">
<div class="h-16 flex flex-row items-center justify-between">
<h1 class="text-3xl font-extrabold text-orange-500">Torsearch</h1>
<twig:SearchBar />
<div class="md:flex md:items-center md:gap-12">
<nav aria-label="Global" class="md:block">
<ul class="flex items-center gap-6 text-sm">
<twig:ux:icon name="fluent:alert-12-regular" width="30px" class="text-gray-950 bg-orange-500 rounded-full p-2"/>
</ul>
</nav>
</div>
</div>
</div>
</header>

View File

@@ -0,0 +1,88 @@
<nav {{ attributes }} class="flex w-64 h-screen flex-col justify-between bg-cyan-950">
<div class="px-4 py-6">
<ul class="mt-6 space-y-1">
<li>
<a
href="#"
class="block rounded-lg
bg-orange-500 hover:bg-opacity-80 bg-clip-padding backdrop-filter backdrop-blur-md bg-opacity-60
px-4 py-2 text-sm font-medium text-gray-50"
>
Dashboard
</a>
</li>
<li>
<details class="group [&_summary::-webkit-details-marker]:hidden">
<summary
class="flex cursor-pointer items-center justify-between rounded-lg px-4 py-2 text-gray-50 hover:bg-orange-500 hover:bg-opacity-80 bg-clip-padding backdrop-filter backdrop-blur-md bg-opacity-60"
>
<span class="text-sm font-medium"> Downloads </span>
<span class="shrink-0 transition duration-300 group-open:-rotate-180">
<svg
xmlns="http://www.w3.org/2000/svg"
class="size-5"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fill-rule="evenodd"
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
clip-rule="evenodd"
/>
</svg>
</span>
</summary>
<ul class="mt-2 space-y-1 px-4">
<li>
<a
href="#"
class="block rounded-lg px-4 py-2 text-sm font-medium text-gray-50 hover:bg-gray-100 hover:text-stone-700"
>
In Progress
</a>
</li>
<li>
<a
href="#"
class="block rounded-lg px-4 py-2 text-sm font-medium text-gray-50 hover:bg-gray-100 hover:text-stone-700"
>
Complete
</a>
</li>
</ul>
</details>
</li>
<li>
<a
href="#"
class="block rounded-lg px-4 py-2 text-sm font-medium text-gray-50 hover:bg-gray-100 hover:text-stone-700"
>
Preferences
</a>
</li>
</ul>
</div>
<div class="sticky inset-x-0 bottom-0 border-t border-gray-100">
<a href="#" class="flex items-center gap-2 bg-white p-4 hover:bg-gray-50">
<img
alt=""
src="https://images.unsplash.com/photo-1600486913747-55e5470d6f40?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80"
class="size-10 rounded-full object-cover"
/>
<div>
<p class="text-xs">
<strong class="block font-medium">Eric Frusciante</strong>
<span> eric@frusciante.com </span>
</p>
</div>
</a>
</div>
</nav>

View File

@@ -0,0 +1,4 @@
<div{{ attributes }}>
<img src="{{ image }}" class="w-40 rounded-md" />
<h3 class="text-center text-gray-50 text-extrabold">{{ title }}</h3>
</div>

View File

@@ -0,0 +1,18 @@
<div {{ attributes }} class="w-full max-w-sm min-w-[200px]">
<div class="relative">
<input
class="w-full bg-orange-500 rounded-md bg-clip-padding backdrop-filter
backdrop-blur-md bg-opacity-40 placeholder:text-slate-200 text-gray-50
text-sm border border-orange-500 rounded-md pl-3 pr-28 py-2 transition
duration-300 ease focus:outline-none focus:border-orange-400 hover:border-orange-300
shadow-sm focus:shadow"
placeholder="TV Show, Movie..."
/>
<button
class="absolute top-1 right-1 flex items-center rounded bg-green-600 py-1 px-2.5 border border-transparent text-center text-sm text-white transition-all shadow-sm hover:shadow focus:bg-green-700 focus:shadow-none active:bg-green-700 hover:bg-green-700 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
type="button"
>
Search
</button>
</div>
</div>