[] base template
This commit is contained in:
13
templates/components/Card.html.twig
Normal file
13
templates/components/Card.html.twig
Normal 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>
|
||||
15
templates/components/Header.html.twig
Normal file
15
templates/components/Header.html.twig
Normal 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>
|
||||
88
templates/components/NavBar.html.twig
Normal file
88
templates/components/NavBar.html.twig
Normal 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>
|
||||
4
templates/components/Poster.html.twig
Normal file
4
templates/components/Poster.html.twig
Normal 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>
|
||||
18
templates/components/SearchBar.html.twig
Normal file
18
templates/components/SearchBar.html.twig
Normal 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>
|
||||
Reference in New Issue
Block a user