- redesign the dashboard
- add search bar
- Mobile-friendly design
This commit is contained in:
Saeed Vaziry
2024-03-21 15:57:57 +01:00
committed by GitHub
parent 7949165648
commit d3aaf2a6fa
55 changed files with 1175 additions and 1009 deletions

View File

@ -1,3 +1,10 @@
<div {!! $attributes->merge(["class" => "py-12 max-w-7xl mx-auto px-6"]) !!}>
@php
$class = "mx-auto px-4 sm:px-6 lg:px-8";
if (! str($attributes->get("class"))->contains("max-w-")) {
$class .= " max-w-7xl";
}
@endphp
<div {!! $attributes->merge(["class" => $class]) !!}>
{{ $slot }}
</div>

View File

@ -1,5 +1,5 @@
<button
{{ $attributes->merge(["type" => "submit", "class" => "inline-flex w-max items-center justify-center rounded-md border border-transparent bg-red-600 px-4 py-1 h-9 font-semibold capitalize text-white transition hover:bg-red-500 focus:border-red-700 focus:outline-none focus:ring focus:ring-red-200 active:bg-red-600 disabled:opacity-25"]) }}
{{ $attributes->merge(["type" => "submit", "class" => "inline-flex w-max min-w-max items-center justify-center rounded-md border border-transparent bg-red-600 px-4 py-1 h-9 font-semibold capitalize text-white transition hover:bg-red-500 focus:border-red-700 focus:outline-none focus:ring focus:ring-red-200 active:bg-red-600 disabled:opacity-25"]) }}
>
{{ $slot }}
</button>

View File

@ -1,5 +1,11 @@
<a
{{ $attributes->merge(["class" => "block w-full px-4 py-2 text-left text-sm leading-5 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:bg-gray-100 dark:focus:bg-gray-700 transition duration-150 ease-in-out flex items-center justify-start"]) }}
>
@props(["active" => false])
@php
$class = $active
? "block flex w-full items-center justify-start px-4 py-2 text-left text-sm leading-5 text-primary-500 transition duration-150 ease-in-out hover:bg-gray-100 focus:bg-gray-100 focus:outline-none dark:hover:bg-gray-800/50 dark:focus:bg-gray-700"
: "block flex w-full items-center justify-start px-4 py-2 text-left text-sm leading-5 text-gray-700 transition duration-150 ease-in-out hover:bg-gray-100 focus:bg-gray-100 focus:outline-none dark:text-gray-300 dark:hover:bg-gray-800/50 dark:focus:bg-gray-700";
@endphp
<a {{ $attributes->merge(["class" => $class]) }}>
{{ $slot }}
</a>

View File

@ -1,4 +1,4 @@
@props(["align" => "right", "width" => "48", "contentClasses" => "bg-white py-1 dark:bg-gray-800"])
@props(["open" => false, "align" => "right", "width" => "48", "contentClasses" => "list-none divide-y divide-gray-100 rounded-md border border-gray-100 bg-white py-1 text-base shadow dark:divide-gray-600 dark:border-gray-600 dark:bg-gray-700"])
@php
switch ($align) {
@ -24,7 +24,7 @@
}
@endphp
<div class="relative" x-data="{ open: false }" @click.outside="open = false" @close.stop="open = false">
<div class="relative" x-data="{ open: @js($open) }" @click.outside="open = false" @close.stop="open = false">
<div @click="open = ! open">
{{ $trigger }}
</div>

View File

@ -0,0 +1,10 @@
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
{{ $attributes }}
>
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12H12m-8.25 5.25h16.5" />
</svg>

After

Width:  |  Height:  |  Size: 271 B

View File

@ -0,0 +1,14 @@
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
{{ $attributes }}
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0"
/>
</svg>

After

Width:  |  Height:  |  Size: 471 B

View File

@ -0,0 +1,10 @@
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
{{ $attributes }}
>
<path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
</svg>

After

Width:  |  Height:  |  Size: 255 B

View File

@ -0,0 +1,14 @@
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
{{ $attributes }}
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="m7.875 14.25 1.214 1.942a2.25 2.25 0 0 0 1.908 1.058h2.006c.776 0 1.497-.4 1.908-1.058l1.214-1.942M2.41 9h4.636a2.25 2.25 0 0 1 1.872 1.002l.164.246a2.25 2.25 0 0 0 1.872 1.002h2.092a2.25 2.25 0 0 0 1.872-1.002l.164-.246A2.25 2.25 0 0 1 16.954 9h4.636M2.41 9a2.25 2.25 0 0 0-.16.832V12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 12V9.832c0-.287-.055-.57-.16-.832M2.41 9a2.25 2.25 0 0 1 .382-.632l3.285-3.832a2.25 2.25 0 0 1 1.708-.786h8.43c.657 0 1.281.287 1.709.786l3.284 3.832c.163.19.291.404.382.632M4.5 20.25h15A2.25 2.25 0 0 0 21.75 18v-2.625c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125V18a2.25 2.25 0 0 0 2.25 2.25Z"
/>
</svg>

After

Width:  |  Height:  |  Size: 908 B

View File

@ -0,0 +1,14 @@
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
{{ $attributes }}
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"
/>
</svg>

After

Width:  |  Height:  |  Size: 334 B

View File

@ -0,0 +1,14 @@
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
{{ $attributes }}
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M5.25 14.25h13.5m-13.5 0a3 3 0 0 1-3-3m3 3a3 3 0 1 0 0 6h13.5a3 3 0 1 0 0-6m-16.5-3a3 3 0 0 1 3-3h13.5a3 3 0 0 1 3 3m-19.5 0a4.5 4.5 0 0 1 .9-2.7L5.737 5.1a3.375 3.375 0 0 1 2.7-1.35h7.126c1.062 0 2.062.5 2.7 1.35l2.587 3.45a4.5 4.5 0 0 1 .9 2.7m0 0a3 3 0 0 1-3 3m0 3h.008v.008h-.008v-.008Zm0-6h.008v.008h-.008v-.008Zm-3 6h.008v.008h-.008v-.008Zm0-6h.008v.008h-.008v-.008Z"
/>
</svg>

After

Width:  |  Height:  |  Size: 629 B

View File

@ -0,0 +1,14 @@
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
{{ $attributes }}
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M17.982 18.725A7.488 7.488 0 0 0 12 15.75a7.488 7.488 0 0 0-5.982 2.975m11.963 0a9 9 0 1 0-11.963 0m11.963 0A8.966 8.966 0 0 1 12 21a8.966 8.966 0 0 1-5.982-2.275M15 9.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
/>
</svg>

After

Width:  |  Height:  |  Size: 456 B

View File

@ -0,0 +1 @@
<div class="my-3 border-b border-gray-200 dark:border-gray-700"></div>

View File

@ -4,7 +4,7 @@
@php
$class =
"inline-flex h-9 w-max items-center justify-center rounded-md border border-transparent bg-primary-600 px-4 py-1 font-semibold text-white outline-0 transition hover:bg-primary-700 focus:border-primary-300 focus:border-primary-700 focus:ring focus:ring-primary-200 focus:ring-opacity-50 active:bg-primary-700 disabled:opacity-25 dark:focus:border-primary-700 dark:focus:ring-primary-700 dark:focus:ring-opacity-40";
"inline-flex h-9 w-max min-w-max items-center justify-center rounded-md border border-transparent bg-primary-600 px-4 py-1 font-semibold text-white outline-0 transition hover:bg-primary-700 focus:border-primary-300 focus:border-primary-700 focus:ring focus:ring-primary-200 focus:ring-opacity-50 active:bg-primary-700 disabled:opacity-25 dark:focus:border-primary-700 dark:focus:ring-primary-700 dark:focus:ring-opacity-40";
@endphp
@if (isset($href))

View File

@ -7,7 +7,7 @@
@php
$class =
"inline-flex h-9 items-center rounded-md border border-gray-300 bg-white px-4 py-1 font-semibold text-gray-700 shadow-sm transition duration-150 ease-in-out hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 disabled:opacity-25 dark:border-gray-500 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 dark:focus:ring-offset-gray-800";
"inline-flex h-9 min-w-max items-center rounded-md border border-gray-300 bg-white px-4 py-1 font-semibold text-gray-700 shadow-sm transition duration-150 ease-in-out hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 disabled:opacity-25 dark:border-gray-500 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 dark:focus:ring-offset-gray-800";
@endphp
@if (isset($href))

View File

@ -5,8 +5,8 @@
@php
$classes =
$active ?? false
? "text-md flex h-10 items-center rounded-md bg-gray-900 px-4 py-3 font-semibold text-primary-500 transition transition-all duration-100 duration-150 ease-in-out"
: "text-md flex h-10 items-center rounded-md px-4 py-3 font-semibold text-gray-500 transition transition-all duration-100 duration-150 ease-in-out hover:bg-gray-900";
? "group flex items-center rounded-md bg-primary-700 p-2 text-white"
: "group flex items-center rounded-md p-2 text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700";
@endphp
<a {{ $attributes->merge(["class" => $classes]) }}>

View File

@ -5,8 +5,8 @@
@php
$classes =
$active ?? false
? "flex h-10 items-center justify-start rounded-lg bg-primary-50 px-3 py-2 font-semibold text-primary-500 hover:bg-gray-100 dark:bg-primary-500 dark:bg-opacity-20 dark:hover:bg-gray-800"
: "flex h-10 items-center justify-start rounded-lg px-3 py-2 font-semibold text-gray-800 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800";
? "flex h-10 items-center justify-start rounded-lg bg-primary-50 px-3 py-2 font-semibold text-primary-500 dark:bg-primary-500 dark:bg-opacity-20"
: "flex h-10 items-center justify-start rounded-lg px-3 py-2 font-semibold text-gray-800 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700";
@endphp
<a {{ $attributes->merge(["class" => $classes]) }}>

View File

@ -1,5 +1,5 @@
<div
{!! $attributes->merge(["class" => "inline-block min-w-full overflow-x-auto rounded-md bg-white align-middle border border-gray-200 dark:border-gray-700 dark:bg-gray-800"]) !!}
{!! $attributes->merge(["class" => "inline-block min-w-full max-w-full overflow-x-auto rounded-md bg-white align-middle border border-gray-200 dark:border-gray-700 dark:bg-gray-800"]) !!}
>
<table class="min-w-full">
{{ $slot }}

View File

@ -0,0 +1,3 @@
<tbody {!! $attributes->merge(["class" => ""]) !!}>
{{ $slot }}
</tbody>

View File

@ -0,0 +1,5 @@
<thead
{!! $attributes->merge(["class" => "text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400 border-b border-gray-200 dark:border-gray-600"]) !!}
>
{{ $slot }}
</thead>

View File

@ -0,0 +1,5 @@
<tr
{!! $attributes->merge(["class" => "dark:text-white bg-white border-b last:border-b-0 dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-800/70"]) !!}
>
{{ $slot }}
</tr>