WIP
This commit is contained in:
9
resources/css/app.css
Normal file
9
resources/css/app.css
Normal file
@@ -0,0 +1,9 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer utilities {
|
||||
.paused {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
}
|
||||
1
resources/js/app.js
Normal file
1
resources/js/app.js
Normal file
@@ -0,0 +1 @@
|
||||
import './bootstrap';
|
||||
4
resources/js/bootstrap.js
vendored
Normal file
4
resources/js/bootstrap.js
vendored
Normal file
@@ -0,0 +1,4 @@
|
||||
import axios from 'axios';
|
||||
window.axios = axios;
|
||||
|
||||
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
|
||||
120
resources/views/category/show.blade.php
Normal file
120
resources/views/category/show.blade.php
Normal file
@@ -0,0 +1,120 @@
|
||||
@push('menu')
|
||||
<x-menu-action tooltip="Einstellungen">
|
||||
<svg class="w-5 h-5 mb-1 text-gray-500 dark:text-gray-400 group-hover:text-blue-600 dark:group-hover:text-blue-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 12.25V1m0 11.25a2.25 2.25 0 0 0 0 4.5m0-4.5a2.25 2.25 0 0 1 0 4.5M4 19v-2.25m6-13.5V1m0 2.25a2.25 2.25 0 0 0 0 4.5m0-4.5a2.25 2.25 0 0 1 0 4.5M10 19V7.75m6 4.5V1m0 11.25a2.25 2.25 0 1 0 0 4.5 2.25 2.25 0 0 0 0-4.5ZM16 19v-2"/>
|
||||
</svg>
|
||||
</x-menu-action>
|
||||
<div class="flex items-center justify-center">
|
||||
<button data-tooltip-target="tooltip-new" type="button" class="inline-flex items-center justify-center w-10 h-10 font-medium bg-blue-600 rounded-full hover:bg-blue-700 group focus:ring-4 focus:ring-blue-300 focus:outline-none dark:focus:ring-blue-800">
|
||||
<svg class="w-4 h-4 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 1v16M1 9h16"/>
|
||||
</svg>
|
||||
<span class="sr-only">New item</span>
|
||||
</button>
|
||||
</div>
|
||||
<div id="tooltip-new" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
|
||||
Create new item
|
||||
<div class="tooltip-arrow" data-popper-arrow></div>
|
||||
</div>
|
||||
@endpush
|
||||
|
||||
<x-layout>
|
||||
<x-hero-search></x-hero-search>
|
||||
<h1 class="mb-4 mx-8 text-4xl font-extrabold leading-none tracking-tight text-gray-900 md:text-5xl lg:text-6xl dark:text-white">
|
||||
{{ $category->name }}
|
||||
</h1>
|
||||
<div class="m-8 flex flex-wrap flex-row gap-4">
|
||||
@foreach ($albums as $album)
|
||||
<figure class="relative rounded-lg cursor-pointer h-80 flex-grow overflow-hidden">
|
||||
<a href="{{ route('album.show', $album) }}">
|
||||
<img class="max-h-full min-w-full align-bottom object-cover"
|
||||
src="{{ url($album->cover) }}" alt="{{ $album->name }} Cover">
|
||||
<figcaption class="absolute p-4 text-lg text-white top-1/2 bottom-0 bg-opacity-20 min-w-full bg-gradient-to-b from-transparent to-slate-900 flex flex-col-reverse">
|
||||
<span>{{ $album->name }}</span>
|
||||
</figcaption>
|
||||
</a>
|
||||
</figure>
|
||||
@endforeach
|
||||
</div>
|
||||
<x-drawer-trigger target="user-edit" action="open">
|
||||
<button>Open</button>
|
||||
</x-drawer-trigger>
|
||||
<x-drawer name="user-edit" >
|
||||
<x-slot:title>Tester</x-slot:title>
|
||||
<x-slot:content>
|
||||
<div class="p-4 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700" data-drawer-toggle="drawer-swipe">
|
||||
<span class="absolute w-8 h-1 -translate-x-1/2 bg-gray-300 rounded-lg top-3 left-1/2 dark:bg-gray-600"></span>
|
||||
<h5 id="drawer-swipe-label" class="inline-flex items-center text-base text-gray-500 dark:text-gray-400 font-medium"><svg class="w-4 h-4 me-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 18">
|
||||
<path d="M6.143 0H1.857A1.857 1.857 0 0 0 0 1.857v4.286C0 7.169.831 8 1.857 8h4.286A1.857 1.857 0 0 0 8 6.143V1.857A1.857 1.857 0 0 0 6.143 0Zm10 0h-4.286A1.857 1.857 0 0 0 10 1.857v4.286C10 7.169 10.831 8 11.857 8h4.286A1.857 1.857 0 0 0 18 6.143V1.857A1.857 1.857 0 0 0 16.143 0Zm-10 10H1.857A1.857 1.857 0 0 0 0 11.857v4.286C0 17.169.831 18 1.857 18h4.286A1.857 1.857 0 0 0 8 16.143v-4.286A1.857 1.857 0 0 0 6.143 10ZM17 13h-2v-2a1 1 0 0 0-2 0v2h-2a1 1 0 0 0 0 2h2v2a1 1 0 0 0 2 0v-2h2a1 1 0 0 0 0-2Z"/>
|
||||
</svg>Add widget</h5>
|
||||
</div>
|
||||
<div class="grid grid-cols-3 gap-4 p-4 lg:grid-cols-4">
|
||||
<div class="p-4 rounded-lg cursor-pointer bg-gray-50 hover:bg-gray-100 dark:hover:bg-gray-600 dark:bg-gray-700">
|
||||
<div class="flex justify-center items-center p-2 mx-auto mb-2 bg-gray-200 dark:bg-gray-600 rounded-full w-[48px] h-[48px] max-w-[48px] max-h-[48px]">
|
||||
<svg class="inline w-5 h-5 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 22 21">
|
||||
<path d="M16.975 11H10V4.025a1 1 0 0 0-1.066-.998 8.5 8.5 0 1 0 9.039 9.039.999.999 0 0 0-1-1.066h.002Z"/>
|
||||
<path d="M12.5 0c-.157 0-.311.01-.565.027A1 1 0 0 0 11 1.02V10h8.975a1 1 0 0 0 1-.935c.013-.188.028-.374.028-.565A8.51 8.51 0 0 0 12.5 0Z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="font-medium text-center text-gray-500 dark:text-gray-400">Chart</div>
|
||||
</div>
|
||||
<div class="p-4 rounded-lg cursor-pointer bg-gray-50 hover:bg-gray-100 dark:hover:bg-gray-600 dark:bg-gray-700">
|
||||
<div class="flex justify-center items-center p-2 mx-auto mb-2 bg-gray-200 dark:bg-gray-600 rounded-full w-[48px] h-[48px] max-w-[48px] max-h-[48px]">
|
||||
<svg class="inline w-5 h-5 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 14">
|
||||
<path d="M18 0H2a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2ZM9 6v2H2V6h7Zm2 0h7v2h-7V6Zm-9 4h7v2H2v-2Zm9 2v-2h7v2h-7Z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="font-medium text-center text-gray-500 dark:text-gray-400">Table</div>
|
||||
</div>
|
||||
<div class="hidden p-4 rounded-lg cursor-pointer bg-gray-50 hover:bg-gray-100 dark:hover:bg-gray-600 dark:bg-gray-700 lg:block">
|
||||
<div class="flex justify-center items-center p-2 mx-auto mb-2 bg-gray-200 dark:bg-gray-600 rounded-full w-[48px] h-[48px] max-w-[48px] max-h-[48px]">
|
||||
<svg class="inline w-5 h-5 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 14 20">
|
||||
<path d="M13.383.076a1 1 0 0 0-1.09.217L11 1.586 9.707.293a1 1 0 0 0-1.414 0L7 1.586 5.707.293a1 1 0 0 0-1.414 0L3 1.586 1.707.293A1 1 0 0 0 0 1v18a1 1 0 0 0 1.707.707L3 18.414l1.293 1.293a1 1 0 0 0 1.414 0L7 18.414l1.293 1.293a1 1 0 0 0 1.414 0L11 18.414l1.293 1.293A1 1 0 0 0 14 19V1a1 1 0 0 0-.617-.924ZM10 15H4a1 1 0 1 1 0-2h6a1 1 0 0 1 0 2Zm0-4H4a1 1 0 1 1 0-2h6a1 1 0 1 1 0 2Zm0-4H4a1 1 0 0 1 0-2h6a1 1 0 1 1 0 2Z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="hidden font-medium text-center text-gray-500 dark:text-gray-400">Ticket</div>
|
||||
</div>
|
||||
<div class="p-4 rounded-lg cursor-pointer bg-gray-50 hover:bg-gray-100 dark:hover:bg-gray-600 dark:bg-gray-700">
|
||||
<div class="flex justify-center items-center p-2 mx-auto mb-2 bg-gray-200 dark:bg-gray-600 rounded-full w-[48px] h-[48px] max-w-[48px] max-h-[48px]">
|
||||
<svg class="inline w-5 h-5 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 20">
|
||||
<path d="M16 1h-3.278A1.992 1.992 0 0 0 11 0H7a1.993 1.993 0 0 0-1.722 1H2a2 2 0 0 0-2 2v15a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2Zm-3 14H5a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Zm0-4H5a1 1 0 0 1 0-2h8a1 1 0 1 1 0 2Zm0-5H5a1 1 0 0 1 0-2h2V2h4v2h2a1 1 0 1 1 0 2Z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="font-medium text-center text-gray-500 dark:text-gray-400">List</div>
|
||||
</div>
|
||||
<div class="p-4 rounded-lg cursor-pointer bg-gray-50 hover:bg-gray-100 dark:hover:bg-gray-600 dark:bg-gray-700">
|
||||
<div class="flex justify-center items-center p-2 mx-auto mb-2 bg-gray-200 dark:bg-gray-600 rounded-full w-[48px] h-[48px] max-w-[48px] max-h-[48px]">
|
||||
<svg class="inline w-5 h-5 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 16">
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 2a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1M2 5h12a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1Zm8 5a2 2 0 1 1-4 0 2 2 0 0 1 4 0Z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="font-medium text-center text-gray-500 dark:text-gray-400">Price</div>
|
||||
</div>
|
||||
<div class="p-4 rounded-lg cursor-pointer bg-gray-50 hover:bg-gray-100 dark:hover:bg-gray-600 dark:bg-gray-700">
|
||||
<div class="flex justify-center items-center p-2 mx-auto mb-2 bg-gray-200 dark:bg-gray-600 rounded-full w-[48px] h-[48px] max-w-[48px] max-h-[48px]">
|
||||
<svg class="inline w-5 h-5 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 18">
|
||||
<path d="M14 2a3.963 3.963 0 0 0-1.4.267 6.439 6.439 0 0 1-1.331 6.638A4 4 0 1 0 14 2Zm1 9h-1.264A6.957 6.957 0 0 1 15 15v2a2.97 2.97 0 0 1-.184 1H19a1 1 0 0 0 1-1v-1a5.006 5.006 0 0 0-5-5ZM6.5 9a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9ZM8 10H5a5.006 5.006 0 0 0-5 5v2a1 1 0 0 0 1 1h11a1 1 0 0 0 1-1v-2a5.006 5.006 0 0 0-5-5Z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="font-medium text-center text-gray-500 dark:text-gray-400">Users</div>
|
||||
</div>
|
||||
<div class="hidden p-4 rounded-lg cursor-pointer bg-gray-50 hover:bg-gray-100 dark:hover:bg-gray-600 dark:bg-gray-700 lg:block">
|
||||
<div class="flex justify-center items-center p-2 mx-auto mb-2 bg-gray-200 dark:bg-gray-600 rounded-full w-[48px] h-[48px] max-w-[48px] max-h-[48px]">
|
||||
<svg class="inline w-5 h-5 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 18">
|
||||
<path d="M6.5 9a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9Zm-1.391 7.361.707-3.535a3 3 0 0 1 .82-1.533L7.929 10H5a5.006 5.006 0 0 0-5 5v2a1 1 0 0 0 1 1h4.259a2.975 2.975 0 0 1-.15-1.639ZM8.05 17.95a1 1 0 0 1-.981-1.2l.708-3.536a1 1 0 0 1 .274-.511l6.363-6.364a3.007 3.007 0 0 1 4.243 0 3.007 3.007 0 0 1 0 4.243l-6.365 6.363a1 1 0 0 1-.511.274l-3.536.708a1.07 1.07 0 0 1-.195.023Z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="font-medium text-center text-gray-500 dark:text-gray-400">Task</div>
|
||||
</div>
|
||||
<div class="p-4 rounded-lg cursor-pointer bg-gray-50 hover:bg-gray-100 dark:hover:bg-gray-600 dark:bg-gray-700">
|
||||
<div class="flex justify-center items-center p-2 mx-auto mb-2 bg-gray-200 dark:bg-gray-600 rounded-full w-[48px] h-[48px] max-w-[48px] max-h-[48px]">
|
||||
<svg class="inline w-5 h-5 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 12.25V1m0 11.25a2.25 2.25 0 0 0 0 4.5m0-4.5a2.25 2.25 0 0 1 0 4.5M4 19v-2.25m6-13.5V1m0 2.25a2.25 2.25 0 0 0 0 4.5m0-4.5a2.25 2.25 0 0 1 0 4.5M10 19V7.75m6 4.5V1m0 11.25a2.25 2.25 0 1 0 0 4.5 2.25 2.25 0 0 0 0-4.5ZM16 19v-2"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="font-medium text-center text-gray-500 dark:text-gray-400">Custom</div>
|
||||
</div>
|
||||
</div>
|
||||
</x-slot:content>
|
||||
</x-drawer>
|
||||
</x-layout>
|
||||
12
resources/views/components/category-filter-pill.blade.php
Normal file
12
resources/views/components/category-filter-pill.blade.php
Normal file
@@ -0,0 +1,12 @@
|
||||
@props(['active' => false ])
|
||||
|
||||
@if($active)
|
||||
<li {{ $attributes }} class="inline-block m-2 relative after:absolute after:left-0 after:bottom-1 after:border-yellow-pfadi after:-z-10 after:border-4 dark:after:opacity-80 after:w-full text-black dark:text-white">
|
||||
{{ $slot }}
|
||||
</li>
|
||||
@else
|
||||
<li {{ $attributes }} class="inline-block m-2 dark:text-gray-100 dark:hover:text-white text-gray-400 relative hover:text-black after:w-0
|
||||
cursor-pointer after:border-0 after:absolute after:left-0 after:bottom-1 dark:after:opacity-80 after:border-yellow-pfadi hover:after:border-4 hover:after:w-full after:transition-all after:duration-100 after:ease-out after:-z-10">
|
||||
{{ $slot }}
|
||||
</li>
|
||||
@endif
|
||||
3
resources/views/components/drawer-trigger.blade.php
Normal file
3
resources/views/components/drawer-trigger.blade.php
Normal file
@@ -0,0 +1,3 @@
|
||||
<div @click="$dispatch('drawer-{{ $action }}-{{ $target }}')">
|
||||
{{ $slot }}
|
||||
</div>
|
||||
22
resources/views/components/drawer.blade.php
Normal file
22
resources/views/components/drawer.blade.php
Normal file
@@ -0,0 +1,22 @@
|
||||
<template x-teleport="body">
|
||||
<div
|
||||
id="drawer-{{ $name }}"
|
||||
tabindex="-1"
|
||||
class="fixed z-40 w-full overflow-y-auto bg-white border-t border-gray-200 rounded-t-lg dark:border-gray-700 dark:bg-gray-800 transition-transform left-0 right-0 bottom-0"
|
||||
aria-labelledby="drawer-{{ $name }}"
|
||||
x-data="{ show: false }"
|
||||
@drawer-open-{{ $name }}.window="show = true"
|
||||
@drawer-close-{{ $name }}.window="show = false"
|
||||
:class="{ 'translate-y-full': !show }"
|
||||
x-cloak
|
||||
>
|
||||
<div class="p-4 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700" @click="show = false">
|
||||
<span class="absolute w-8 h-1 -translate-x-1/2 bg-gray-300 rounded-lg top-3 left-1/2 dark:bg-gray-600">
|
||||
</span>
|
||||
<h5 class="inline-flex items-center text-base text-gray-500 dark:text-gray-400 font-medium">
|
||||
{{ $title }}
|
||||
</h5>
|
||||
</div>
|
||||
{{ $content }}
|
||||
</div>
|
||||
</template>
|
||||
14
resources/views/components/hero-search.blade.php
Normal file
14
resources/views/components/hero-search.blade.php
Normal file
@@ -0,0 +1,14 @@
|
||||
<form class="flex h-1/3 bg-cover relative">
|
||||
<div class="relative m-auto w-1/2">
|
||||
<label for="default-search" class="mb-2 text-sm font-medium text-gray-900 sr-only dark:text-white">Suchen</label>
|
||||
<div class="relative">
|
||||
<div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
|
||||
<svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<input type="search" id="default-search" class="block w-full p-4 ps-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Nach Alben suchen" required />
|
||||
<button type="submit" class="text-white absolute end-2.5 bottom-2.5 bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Suchen</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
26
resources/views/components/layout.blade.php
Normal file
26
resources/views/components/layout.blade.php
Normal file
@@ -0,0 +1,26 @@
|
||||
<!DOCTYPE html>
|
||||
<html
|
||||
lang="{{ str_replace('_', '-', app()->getLocale()) }}"
|
||||
x-data="{ darkMode: $persist(false) }"
|
||||
:class="{'dark': darkMode }"
|
||||
x-init="
|
||||
if (!('darkMode' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
localStorage.setItem('darkMode', JSON.stringify(true));
|
||||
}
|
||||
darkMode = JSON.parse(localStorage.getItem('darkMode'));
|
||||
$watch('darkMode', value => localStorage.setItem('darkMode', JSON.stringify(value)))"
|
||||
>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
@vite('resources/css/app.css')
|
||||
@vite('resources/js/app.js')
|
||||
<title>{{ $title ?? config('app.name') }}</title>
|
||||
</head>
|
||||
<body class="bg-white dark:bg-gray-800">
|
||||
<x-theme-switcher />
|
||||
{{ $slot }}
|
||||
|
||||
<x-menu />
|
||||
</body>
|
||||
</html>
|
||||
9
resources/views/components/menu-action.blade.php
Normal file
9
resources/views/components/menu-action.blade.php
Normal file
@@ -0,0 +1,9 @@
|
||||
@props(['tooltip' => 'Unknown' ])
|
||||
|
||||
<button type="button" class="inline-flex flex-col items-center justify-center px-5 hover:bg-gray-50 dark:hover:bg-gray-800 group first:rounded-s-full last:rounded-e-full">
|
||||
{{ $slot }}
|
||||
<span class="sr-only">{{ $tooltip }}</span>
|
||||
<div role="tooltip" class="absolute z-10 group-hover:visible group-hover:opacity-100 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 dark:bg-gray-700 -translate-y-full origin-top-left -mt-2 top-0">
|
||||
{{ $tooltip }}
|
||||
</div>
|
||||
</button>
|
||||
16
resources/views/components/menu.blade.php
Normal file
16
resources/views/components/menu.blade.php
Normal file
@@ -0,0 +1,16 @@
|
||||
<div class="fixed z-50 w-full h-16 max-w-lg -translate-x-1/2 bg-white border border-gray-200 rounded-full bottom-4 left-1/2 dark:bg-gray-700 dark:border-gray-600">
|
||||
<div class="grid grid-flow-col h-full max-w-lg mx-auto">
|
||||
|
||||
<x-menu-action tooltip="Startseite">
|
||||
<svg class="w-5 h-5 mb-1 text-gray-500 dark:text-gray-400 group-hover:text-blue-600 dark:group-hover:text-blue-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="m19.707 9.293-2-2-7-7a1 1 0 0 0-1.414 0l-7 7-2 2a1 1 0 0 0 1.414 1.414L2 10.414V18a2 2 0 0 0 2 2h3a1 1 0 0 0 1-1v-4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v4a1 1 0 0 0 1 1h3a2 2 0 0 0 2-2v-7.586l.293.293a1 1 0 0 0 1.414-1.414Z"/>
|
||||
</svg>
|
||||
</x-menu-action>
|
||||
@stack('menu')
|
||||
<x-menu-action tooltip="Profil">
|
||||
<svg class="w-5 h-5 mb-1 text-gray-500 dark:text-gray-400 group-hover:text-blue-600 dark:group-hover:text-blue-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M10 0a10 10 0 1 0 10 10A10.011 10.011 0 0 0 10 0Zm0 5a3 3 0 1 1 0 6 3 3 0 0 1 0-6Zm0 13a8.949 8.949 0 0 1-4.951-1.488A3.987 3.987 0 0 1 9 13h2a3.987 3.987 0 0 1 3.951 3.512A8.949 8.949 0 0 1 10 18Z"/>
|
||||
</svg>
|
||||
</x-menu-action>
|
||||
</div>
|
||||
</div>
|
||||
14
resources/views/components/theme-switcher.blade.php
Normal file
14
resources/views/components/theme-switcher.blade.php
Normal file
@@ -0,0 +1,14 @@
|
||||
<button x-cloak id="theme-toggle" data-tooltip-target="tooltip-toggle" type="button"
|
||||
class="text-gray-500 inline-flex items-center justify-center dark:text-gray-400 hover:bg-gray-100 w-10 h-10 dark:hover:bg-gray-700 focus:outline-none rounded-lg text-sm p-2.5 right-0 absolute z-10"
|
||||
@click="darkMode = !darkMode"
|
||||
>
|
||||
<svg x-show="!darkMode" id="theme-toggle-dark-icon" class="w-8 h-8" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 20">
|
||||
<path d="M17.8 13.75a1 1 0 0 0-.859-.5A7.488 7.488 0 0 1 10.52 2a1 1 0 0 0 0-.969A1.035 1.035 0 0 0 9.687.5h-.113a9.5 9.5 0 1 0 8.222 14.247 1 1 0 0 0 .004-.997Z"></path>
|
||||
</svg>
|
||||
|
||||
<svg x-show="darkMode" id="theme-toggle-light-icon" class="w-8 h-8" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M10 15a5 5 0 1 0 0-10 5 5 0 0 0 0 10Zm0-11a1 1 0 0 0 1-1V1a1 1 0 0 0-2 0v2a1 1 0 0 0 1 1Zm0 12a1 1 0 0 0-1 1v2a1 1 0 1 0 2 0v-2a1 1 0 0 0-1-1ZM4.343 5.757a1 1 0 0 0 1.414-1.414L4.343 2.929a1 1 0 0 0-1.414 1.414l1.414 1.414Zm11.314 8.486a1 1 0 0 0-1.414 1.414l1.414 1.414a1 1 0 0 0 1.414-1.414l-1.414-1.414ZM4 10a1 1 0 0 0-1-1H1a1 1 0 0 0 0 2h2a1 1 0 0 0 1-1Zm15-1h-2a1 1 0 1 0 0 2h2a1 1 0 0 0 0-2ZM4.343 14.243l-1.414 1.414a1 1 0 1 0 1.414 1.414l1.414-1.414a1 1 0 0 0-1.414-1.414ZM14.95 6.05a1 1 0 0 0 .707-.293l1.414-1.414a1 1 0 1 0-1.414-1.414l-1.414 1.414a1 1 0 0 0 .707 1.707Z"></path>
|
||||
</svg>
|
||||
<span x-show="!darkMode" class="sr-only">Dunkle Theme aktivieren</span>
|
||||
<span x-show="darkMode" class="sr-only">Helle Theme aktivieren</span>
|
||||
</button>
|
||||
31
resources/views/livewire/category-filter.blade.php
Normal file
31
resources/views/livewire/category-filter.blade.php
Normal file
@@ -0,0 +1,31 @@
|
||||
<div class="p-2 mt-8">
|
||||
<div class="text-center">
|
||||
<ul class="uppercase font-medium">
|
||||
<x-category-filter-pill wire:click="setFilter(-1)" :active="$filter == null">
|
||||
Alle
|
||||
</x-category-filter-pill>
|
||||
|
||||
@foreach ($tags as $tag)
|
||||
<x-category-filter-pill :key="$tag->id" wire:click="setFilter({{ $tag->id }})" :active="$tag->id == $filter?->id">
|
||||
{{ $tag->title }}
|
||||
</x-category-filter-pill>
|
||||
@endforeach
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="m-8 flex flex-wrap flex-row gap-4">
|
||||
@foreach ($categories as $category)
|
||||
@if($filter == null || $category->tags->contains($filter))
|
||||
<figure wire:transition wire:key="{{ $category->id }}" class="relative rounded-lg cursor-pointer h-80 flex-grow overflow-hidden">
|
||||
<a href="{{ route('category.show', $category) }}">
|
||||
<img class="max-h-full min-w-full align-bottom object-cover"
|
||||
src="{{ url($category->cover) }}" alt="{{ $category->name }} Cover">
|
||||
<figcaption class="absolute p-4 text-lg text-white top-1/2 bottom-0 bg-opacity-20 min-w-full bg-gradient-to-b from-transparent to-slate-900 flex flex-col-reverse">
|
||||
<span>{{ $category->name }}</span>
|
||||
</figcaption>
|
||||
</a>
|
||||
</figure>
|
||||
@endif
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
0
resources/views/livewire/theme-switcher.blade.php
Normal file
0
resources/views/livewire/theme-switcher.blade.php
Normal file
5
resources/views/welcome.blade.php
Normal file
5
resources/views/welcome.blade.php
Normal file
@@ -0,0 +1,5 @@
|
||||
<x-layout>
|
||||
<x-hero-search></x-hero-search>
|
||||
|
||||
<livewire:category-filter />
|
||||
</x-layout>
|
||||
Reference in New Issue
Block a user