Skip to content

GitLab

"...git@idemo.netbay.co.th:sarun.netbay/spnpatch-laravel.git" did not exist on "1878211810b7638db5a860479b80cb6b8a641155"
Commit 930e8709 authored by Sarun Mungthanya's avatar Sarun Mungthanya
Browse files

add , reload , delete patch

parent 5bad2db9
Hide whitespace changes
Inline Side-by-side
resources/views/pages/dashboards-meetings.blade.php deleted 100644 → 0
View file @ 5bad2db9
<x-app-layout title="Meeting Dashboard" is-header-blur="true">
<!-- Main Content Wrapper -->
<main class="main-content w-full px-[var(--margin-x)] pb-8">
<div
class="mt-6 flex flex-col items-center justify-between space-y-2 text-center sm:flex-row sm:space-y-0 sm:text-left">
<div>
<h3 class="text-xl font-semibold text-slate-700 dark:text-navy-100">
Your Meetings
</h3>
<p class="mt-1 hidden sm:block">Recent meetings in your team</p>
</div>
<div>
<p class="font-medium text-slate-700 dark:text-navy-100">
Team Members
</p>
<div class="mt-2 flex space-x-2">
<div class="avatar h-8 w-8">
<img class="mask is-squircle" src="{{ asset('images/200x200.png') }}" alt="avatar" />
</div>
<div class="avatar h-8 w-8">
<img class="mask is-squircle" src="{{ asset('images/200x200.png') }}" alt="avatar" />
</div>
<div class="avatar h-8 w-8">
<img class="mask is-squircle" src="{{ asset('images/200x200.png') }}" alt="avatar" />
</div>
<div class="avatar h-8 w-8">
<img class="mask is-squircle" src="{{ asset('images/200x200.png') }}" alt="avatar" />
</div>
<div class="avatar h-8 w-8">
<img class="mask is-squircle" src="{{ asset('images/200x200.png') }}" alt="avatar" />
</div>
</div>
</div>
</div>
<div class="mt-4">
<h3 class="text-base font-medium text-slate-600 dark:text-navy-100">
Today
</h3>
<div class="mt-3 grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-5 lg:grid-cols-3 lg:gap-6">
<div class="card justify-between bg-primary p-4 dark:bg-accent sm:p-5">
<div class="flex items-center space-x-3 text-white">
<img class="h-10 w-10 shrink-0 rounded-lg object-cover" src="{{ asset('images/800x600.png') }}"
alt="image" />
<div>
<h3 class="text-base font-medium">Product Roadmap Q4</h3>
<p class="text-xs text-indigo-100">
Lorem ipsum dolor sit amet, consectetur.
</p>
</div>
</div>
<div class="mt-4">
<p class="text-xs+ text-indigo-100">Today</p>
<p class="text-xl font-medium text-white">11:30 - 13:00</p>
<div class="badge mt-2 rounded-full bg-white/20 text-white">
13 Members
</div>
<div class="mt-5 flex items-center justify-between space-x-2">
<div class="flex -space-x-3">
<div class="avatar h-8 w-8 hover:z-10">
<img class="rounded-full ring-1 ring-primary dark:ring-accent"
src="{{ asset('images/200x200.png') }}" alt="avatar" />
</div>
<div class="avatar h-8 w-8 hover:z-10">
<div
class="is-initial rounded-full bg-info text-xs+ uppercase text-white ring-1 ring-primary dark:ring-accent">
qa
</div>
</div>
<div class="avatar h-8 w-8 hover:z-10">
<img class="rounded-full ring-1 ring-primary dark:ring-accent"
src="{{ asset('images/200x200.png') }}" alt="avatar" />
</div>
</div>
<button
class="btn h-8 w-8 rounded-full bg-slate-150 p-0 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 rotate-45" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M7 11l5-5m0 0l5 5m-5-5v12" />
</svg>
</button>
</div>
</div>
</div>
<div class="card justify-between p-4 sm:p-5">
<div class="flex items-center space-x-3">
<img class="h-10 w-10 shrink-0 rounded-lg object-cover" src="{{ asset('images/800x600.png') }}"
alt="image" />
<div>
<h3 class="text-base font-medium text-slate-700 dark:text-navy-100">
Design Review
</h3>
<p class="text-xs">Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div class="mt-4">
<p class="text-xs+">Today</p>
<p class="text-xl font-medium text-slate-700 dark:text-navy-100">
16:00 - 16:30
</p>
<div
class="badge mt-2 bg-primary/10 text-primary dark:bg-accent-light/15 dark:text-accent-light">
6 Members
</div>
<div class="mt-5 flex items-center justify-between space-x-2">
<div class="flex -space-x-3">
<div class="avatar h-8 w-8 hover:z-10">
<img class="rounded-full ring ring-white dark:ring-navy-700"
src="{{ asset('images/200x200.png') }}" alt="avatar" />
</div>
<div class="avatar h-8 w-8 hover:z-10">
<div
class="is-initial rounded-full bg-info text-xs+ uppercase text-white ring ring-white dark:ring-navy-700">
iu
</div>
</div>
<div class="avatar h-8 w-8 hover:z-10">
<img class="rounded-full ring ring-white dark:ring-navy-700"
src="{{ asset('images/200x200.png') }}" alt="avatar" />
</div>
</div>
<button
class="btn h-8 w-8 rounded-full bg-slate-150 p-0 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 rotate-45" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M7 11l5-5m0 0l5 5m-5-5v12" />
</svg>
</button>
</div>
</div>
</div>
<div class="card justify-between p-4 sm:p-5">
<div class="flex items-center space-x-4">
<img class="h-10 w-10 shrink-0 rounded-lg object-cover" src="{{ asset('images/800x600.png') }}"
alt="image" />
<div>
<h3 class="text-base font-medium text-slate-700 dark:text-navy-100">
Weekly meeting
</h3>
<p class="text-xs">Consectetur adipisicing elit.</p>
</div>
</div>
<div class="mt-4">
<p class="text-xs+">Today</p>
<p class="text-xl font-medium text-slate-700 dark:text-navy-100">
18:00 - 18:45
</p>
<div
class="badge mt-2 bg-primary/10 text-primary dark:bg-accent-light/15 dark:text-accent-light">
20 Members
</div>
<div class="mt-5 flex items-center justify-between space-x-2">
<div class="flex -space-x-3">
<div class="avatar h-8 w-8 hover:z-10">
<img class="rounded-full ring ring-white dark:ring-navy-700"
src="{{ asset('images/200x200.png') }}" alt="avatar" />
</div>
<div class="avatar h-8 w-8 hover:z-10">
<div
class="is-initial rounded-full bg-warning text-xs+ uppercase text-white ring ring-white dark:ring-navy-700">
tg
</div>
</div>
<div class="avatar h-8 w-8 hover:z-10">
<img class="rounded-full ring ring-white dark:ring-navy-700"
src="{{ asset('images/200x200.png') }}" alt="avatar" />
</div>
</div>
<button
class="btn h-8 w-8 rounded-full bg-slate-150 p-0 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 rotate-45" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M7 11l5-5m0 0l5 5m-5-5v12" />
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="mt-4 sm:mt-5 lg:mt-6">
<h3 class="text-base font-medium text-slate-600 dark:text-navy-100">
This week
</h3>
<div class="mt-3 grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-5 lg:grid-cols-3 lg:gap-6">
<div class="card justify-between p-4 sm:p-5">
<div class="flex items-center space-x-4">
<img class="h-10 w-10 shrink-0 rounded-lg object-cover"
src="{{ asset('images/800x600.png') }}" alt="image" />
<div>
<h3 class="text-base font-medium text-slate-700 dark:text-navy-100">
Sales Presentation
</h3>
<p class="text-xs">Iure odio placeat temporibus.</p>
</div>
</div>
<div class="mt-4">
<p class="text-xs+">Tomorrow</p>
<p class="text-xl font-medium text-slate-700 dark:text-navy-100">
11:30 - 12:00
</p>
<div
class="badge mt-2 bg-primary/10 text-primary dark:bg-accent-light/15 dark:text-accent-light">
7 Members
</div>
<div class="mt-5 flex items-center justify-between space-x-2">
<div class="flex -space-x-3">
<div class="avatar h-8 w-8 hover:z-10">
<img class="rounded-full ring ring-white dark:ring-navy-700"
src="{{ asset('images/200x200.png') }}" alt="avatar" />
</div>
<div class="avatar h-8 w-8 hover:z-10">
<div
class="is-initial rounded-full bg-error text-xs+ uppercase text-white ring ring-white dark:ring-navy-700">
yt
</div>
</div>
<div class="avatar h-8 w-8 hover:z-10">
<img class="rounded-full ring ring-white dark:ring-navy-700"
src="{{ asset('images/200x200.png') }}" alt="avatar" />
</div>
</div>
<button
class="btn h-8 w-8 rounded-full bg-slate-150 p-0 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 rotate-45" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M7 11l5-5m0 0l5 5m-5-5v12" />
</svg>
</button>
</div>
</div>
</div>
<div class="card justify-between p-4 sm:p-5">
<div class="flex items-center space-x-4">
<img class="h-10 w-10 shrink-0 rounded-lg object-cover"
src="{{ asset('images/800x600.png') }}" alt="image" />
<div>
<h3 class="text-base font-medium text-slate-700 dark:text-navy-100">
Testing Vol.1
</h3>
<p class="text-xs">In iste labore odit sapiente?</p>
</div>
</div>
<div class="mt-4">
<p class="text-xs+">THU, May 25, 2022</p>
<p class="text-xl font-medium text-slate-700 dark:text-navy-100">
14:30 - 15:00
</p>
<div
class="badge mt-2 bg-primary/10 text-primary dark:bg-accent-light/15 dark:text-accent-light">
5 Members
</div>
<div class="mt-5 flex items-center justify-between space-x-2">
<div class="flex -space-x-3">
<div class="avatar h-8 w-8 hover:z-10">
<img class="rounded-full ring ring-white dark:ring-navy-700"
src="{{ asset('images/200x200.png') }}" alt="avatar" />
</div>
<div class="avatar h-8 w-8 hover:z-10">
<div
class="is-initial rounded-full bg-success text-xs+ uppercase text-white ring ring-white dark:ring-navy-700">
ou
</div>
</div>
<div class="avatar h-8 w-8 hover:z-10">
<img class="rounded-full ring ring-white dark:ring-navy-700"
src="{{ asset('images/200x200.png') }}" alt="avatar" />
</div>
</div>
<button
class="btn h-8 w-8 rounded-full bg-slate-150 p-0 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 rotate-45" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M7 11l5-5m0 0l5 5m-5-5v12" />
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="mt-4 sm:mt-5 lg:mt-6">
<h3 class="text-base font-medium text-slate-600 dark:text-navy-100">
This month
</h3>
<div class="mt-3 grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-5 lg:grid-cols-3 lg:gap-6">
<div class="card justify-between p-4 sm:p-5">
<div class="flex items-center space-x-4">
<img class="h-10 w-10 shrink-0 rounded-lg object-cover"
src="{{ asset('images/illustrations/dashboard-meet-dark.svg') }}" alt="image" />
<div>
<h3 class="text-base font-medium text-slate-700 dark:text-navy-100">
New App Analysis
</h3>
<p class="text-xs">
Lorem ipsum dolor sit amet, consectetur.
</p>
</div>
</div>
<div class="mt-4">
<p class="text-xs+">Mon, June 18, 2022</p>
<p class="text-xl font-medium text-slate-700 dark:text-navy-100">
08:00 - 09:00
</p>
<div
class="badge mt-2 bg-primary/10 text-primary dark:bg-accent-light/15 dark:text-accent-light">
10 Members
</div>
<div class="mt-5 flex items-center justify-between space-x-2">
<div class="flex -space-x-3">
<div class="avatar h-8 w-8 hover:z-10">
<img class="rounded-full ring ring-white dark:ring-navy-700"
src="{{ asset('images/200x200.png') }}" alt="avatar" />
</div>
<div class="avatar h-8 w-8 hover:z-10">
<div
class="is-initial rounded-full bg-info text-xs+ uppercase text-white ring ring-white dark:ring-navy-700">
cv
</div>
</div>
<div class="avatar h-8 w-8 hover:z-10">
<img class="rounded-full ring ring-white dark:ring-navy-700"
src="{{ asset('images/200x200.png') }}" alt="avatar" />
</div>
</div>
<button
class="btn h-8 w-8 rounded-full bg-slate-150 p-0 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 rotate-45" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M7 11l5-5m0 0l5 5m-5-5v12" />
</svg>
</button>
</div>
</div>
</div>
<div class="card justify-between p-4 sm:p-5">
<div class="flex items-center space-x-4">
<img class="h-10 w-10 shrink-0 rounded-lg object-cover"
src="{{ asset('images/100x100.png') }}" alt="image" />
<div>
<h3 class="text-base font-medium text-slate-700 dark:text-navy-100">
React Conf
</h3>
<p class="text-xs">In iste labore odit sapiente?</p>
</div>
</div>
<div class="mt-4">
<p class="text-xs+">SAT, June 21, 2022</p>
<p class="text-xl font-medium text-slate-700 dark:text-navy-100">
10:00 - 12:00
</p>
<div
class="badge mt-2 bg-primary/10 text-primary dark:bg-accent-light/15 dark:text-accent-light">
14 Members
</div>
<div class="mt-5 flex items-center justify-between space-x-2">
<div class="flex -space-x-3">
<div class="avatar h-8 w-8 hover:z-10">
<img class="rounded-full ring ring-white dark:ring-navy-700"
src="{{ asset('images/200x200.png') }}" alt="avatar" />
</div>
<div class="avatar h-8 w-8 hover:z-10">
<div
class="is-initial rounded-full bg-warning text-xs+ uppercase text-white ring ring-white dark:ring-navy-700">
qd
</div>
</div>
<div class="avatar h-8 w-8 hover:z-10">
<img class="rounded-full ring ring-white dark:ring-navy-700"
src="{{ asset('images/200x200.png') }}" alt="avatar" />
</div>
</div>
<button
class="btn h-8 w-8 rounded-full bg-slate-150 p-0 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 rotate-45" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M7 11l5-5m0 0l5 5m-5-5v12" />
</svg>
</button>
</div>
</div>
</div>
<div class="card justify-between p-4 sm:p-5">
<div class="flex items-center space-x-4">
<img class="h-10 w-10 shrink-0 rounded-lg object-cover"
src="{{ asset('images/800x600.png') }}" alt="image" />
<div>
<h3 class="text-base font-medium text-slate-700 dark:text-navy-100">
Monthly meeting
</h3>
<p class="text-xs">Consectetur adipisicing elit.</p>
</div>
</div>
<div class="mt-4">
<p class="text-xs+">MON, 31 June, 2022</p>
<p class="text-xl font-medium text-slate-700 dark:text-navy-100">
18:00 - 19:00
</p>
<div
class="badge mt-2 bg-primary/10 text-primary dark:bg-accent-light/15 dark:text-accent-light">
12 Members
</div>
<div class="mt-5 flex items-center justify-between space-x-2">
<div class="flex -space-x-3">
<div class="avatar h-8 w-8 hover:z-10">
<img class="rounded-full ring ring-white dark:ring-navy-700"
src="{{ asset('images/200x200.png') }}" alt="avatar" />
</div>
<div class="avatar h-8 w-8 hover:z-10">
<div
class="is-initial rounded-full bg-info text-xs+ uppercase text-white ring ring-white dark:ring-navy-700">
mh
</div>
</div>
<div class="avatar h-8 w-8 hover:z-10">
<img class="rounded-full ring ring-white dark:ring-navy-700"
src="{{ asset('images/200x200.png') }}" alt="avatar" />
</div>
</div>
<button
class="btn h-8 w-8 rounded-full bg-slate-150 p-0 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 rotate-45" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M7 11l5-5m0 0l5 5m-5-5v12" />
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
</main>
</x-app-layout>
resources/views/pages/dashboards-orders.blade.php deleted 100644 → 0
View file @ 5bad2db9
<x-app-layout title="Orders Dashboard" is-header-blur="true">
<!-- Main Content Wrapper -->
<main class="main-content w-full px-[var(--margin-x)] pb-8">
<div class="mt-4 grid grid-cols-12 gap-4 sm:mt-5 sm:gap-5 lg:mt-6 lg:gap-6">
<div class="card col-span-12 lg:col-span-8">
<div class="mt-3 flex flex-col justify-between px-4 sm:flex-row sm:items-center sm:px-5">
<div class="flex flex-1 items-center justify-between space-x-2 sm:flex-initial">
<h2 class="text-sm+ font-medium tracking-wide text-slate-700 dark:text-navy-100">
Order Overview
</h2>
<div x-data="usePopper({ placement: 'bottom-start', offset: 4 })" @click.outside="if(isShowPopper) isShowPopper = false"
class="inline-flex">
<button x-ref="popperRef" @click="isShowPopper = !isShowPopper"
class="btn h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
</svg>
</button>
<div x-ref="popperRoot" class="popper-root" :class="isShowPopper && 'show'">
<div
class="popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700">
<ul>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Action</a>
</li>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Another
Action</a>
</li>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Something
else</a>
</li>
</ul>
<div class="my-1 h-px bg-slate-150 dark:bg-navy-500"></div>
<ul>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Separated
Link</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="hidden space-x-2 sm:flex" x-data="{ activeTab: 'tabYearly' }">
<button @click="activeTab = 'tabMonthly'" class="btn h-8 rounded-full text-xs font-medium"
:class="activeTab === 'tabMonthly' ?
'bg-primary/10 text-primary dark:bg-accent-light/10 dark:text-accent-light' :
'hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 hover:text-slate-800 focus:text-slate-800 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25 dark:hover:text-navy-100 dark:focus:text-navy-100'">
Monthly
</button>
<button @click="activeTab = 'tabYearly'" class="btn h-8 rounded-full text-xs+ font-medium"
:class="activeTab === 'tabYearly' ?
'bg-primary/10 text-primary dark:bg-accent-light/10 dark:text-accent-light' :
'hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 hover:text-slate-800 focus:text-slate-800 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25 dark:hover:text-navy-100 dark:focus:text-navy-100'">
Yearly
</button>
</div>
</div>
<div class="mt-4 grid grid-cols-2 gap-3 px-4 sm:mt-5 sm:grid-cols-4 sm:gap-5 sm:px-5 lg:mt-6">
<div class="rounded-lg bg-slate-100 p-4 dark:bg-navy-600">
<div class="flex justify-between space-x-1">
<p class="text-xl font-semibold text-slate-700 dark:text-navy-100">
$67.6k
</p>
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-primary dark:text-accent"
fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<p class="mt-1 text-xs+">Income</p>
</div>
<div class="rounded-lg bg-slate-100 p-4 dark:bg-navy-600">
<div class="flex justify-between">
<p class="text-xl font-semibold text-slate-700 dark:text-navy-100">
12.6K
</p>
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-success" fill="none"
viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z" />
</svg>
</div>
<p class="mt-1 text-xs+">Completed</p>
</div>
<div class="rounded-lg bg-slate-100 p-4 dark:bg-navy-600">
<div class="flex justify-between">
<p class="text-xl font-semibold text-slate-700 dark:text-navy-100">
143
</p>
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-warning" fill="none"
viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<p class="mt-1 text-xs+">Pending</p>
</div>
<div class="rounded-lg bg-slate-100 p-4 dark:bg-navy-600">
<div class="flex justify-between">
<p class="text-xl font-semibold text-slate-700 dark:text-navy-100">
651
</p>
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-info" fill="none"
viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path d="M9 17a2 2 0 11-4 0 2 2 0 014 0zM19 17a2 2 0 11-4 0 2 2 0 014 0z" />
<path stroke-linecap="round" stroke-linejoin="round"
d="M13 16V6a1 1 0 00-1-1H4a1 1 0 00-1 1v10a1 1 0 001 1h1m8-1a1 1 0 01-1 1H9m4-1V8a1 1 0 011-1h2.586a1 1 0 01.707.293l3.414 3.414a1 1 0 01.293.707V16a1 1 0 01-1 1h-1m-6-1a1 1 0 001 1h1M5 17a2 2 0 104 0m-4 0a2 2 0 114 0m6 0a2 2 0 104 0m-4 0a2 2 0 114 0" />
</svg>
</div>
<p class="mt-1 text-xs+">Dispatch</p>
</div>
</div>
<div class="ax-transparent-gridline mt-2 px-2">
<div x-init="$nextTick(() => {
$el._x_chart = new ApexCharts($el, pages.charts.ordersOverview);
$el._x_chart.render()
});"></div>
</div>
</div>
<div
class="col-span-12 grid grid-cols-2 gap-4 sm:grid-cols-4 sm:gap-5 lg:col-span-4 lg:grid-cols-2 lg:gap-6">
<div class="card col-span-2 px-4 pb-5 sm:px-5">
<div class="flex items-center justify-between py-3">
<h2 class="font-medium tracking-wide text-slate-700 dark:text-navy-100">
Budget
</h2>
<div x-data="usePopper({ placement: 'bottom-end', offset: 4 })" @click.outside="if(isShowPopper) isShowPopper = false"
class="inline-flex">
<button x-ref="popperRef" @click="isShowPopper = !isShowPopper"
class="btn -mr-1.5 h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
</svg>
</button>
<div x-ref="popperRoot" class="popper-root" :class="isShowPopper && 'show'">
<div
class="popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700">
<ul>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Action</a>
</li>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Another
Action</a>
</li>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Something
else</a>
</li>
</ul>
<div class="my-1 h-px bg-slate-150 dark:bg-navy-500"></div>
<ul>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Separated
Link</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="flex grow space-x-5">
<div class="flex w-1/2 flex-col">
<div class="grow">
<p class="text-2xl font-semibold text-slate-700 dark:text-navy-100">
$67.4k
</p>
<a href="#"
class="border-b border-dotted border-current pb-0.5 text-tiny font-medium uppercase text-primary outline-none transition-colors duration-300 hover:text-primary/70 focus:text-primary/70 dark:text-accent-light dark:hover:text-accent-light/70 dark:focus:text-accent-light/70">
Yearly Budget
</a>
</div>
<p class="mt-2 text-xs leading-normal line-clamp-3">
You have spent about 25% of your annual budget.
</p>
</div>
<div class="ax-transparent-gridline flex w-1/2 items-end">
<div x-init="$nextTick(() => {
$el._x_chart = new ApexCharts($el, pages.charts.orderBudget);
$el._x_chart.render()
});"></div>
</div>
</div>
</div>
<div class="card">
<div class="mt-3 flex items-center justify-between px-4 sm:px-5">
<h2 class="font-medium tracking-wide text-slate-700 dark:text-navy-100">
Income
</h2>
<div x-data="usePopper({ placement: 'bottom-end', offset: 4 })" @click.outside="if(isShowPopper) isShowPopper = false"
class="inline-flex">
<button x-ref="popperRef" @click="isShowPopper = !isShowPopper"
class="btn -mr-2 h-7 w-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
</svg>
</button>
<div x-ref="popperRoot" class="popper-root" :class="isShowPopper && 'show'">
<div
class="popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700">
<ul>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Action</a>
</li>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Another
Action</a>
</li>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Something
else</a>
</li>
</ul>
<div class="my-1 h-px bg-slate-150 dark:bg-navy-500"></div>
<ul>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Separated
Link</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<p class="grow px-4 text-xl font-semibold text-slate-700 dark:text-navy-100 sm:px-5">
$169.6k
</p>
<div class="ax-transparent-gridline">
<div x-init="$nextTick(() => {
$el._x_chart = new ApexCharts($el, pages.charts.orderIncome);
$el._x_chart.render()
});"></div>
</div>
</div>
<div class="card">
<div class="mt-3 flex items-center justify-between px-4 sm:px-5">
<h2 class="font-medium tracking-wide text-slate-700 dark:text-navy-100">
Expense
</h2>
<div x-data="usePopper({ placement: 'bottom-end', offset: 4 })" @click.outside="if(isShowPopper) isShowPopper = false"
class="inline-flex">
<button x-ref="popperRef" @click="isShowPopper = !isShowPopper"
class="btn -mr-2 h-7 w-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
</svg>
</button>
<div x-ref="popperRoot" class="popper-root" :class="isShowPopper && 'show'">
<div
class="popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700">
<ul>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Action</a>
</li>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Another
Action</a>
</li>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Something
else</a>
</li>
</ul>
<div class="my-1 h-px bg-slate-150 dark:bg-navy-500"></div>
<ul>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Separated
Link</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<p class="grow px-4 text-xl font-semibold text-slate-700 dark:text-navy-100 sm:px-5">
$34.6k
</p>
<div class="ax-transparent-gridline">
<div x-init="$nextTick(() => {
$el._x_chart = new ApexCharts($el, pages.charts.orderExpense);
$el._x_chart.render()
});"></div>
</div>
</div>
</div>
<div class="card col-span-12 pb-2 lg:col-span-5 xl:col-span-6">
<div class="my-3 flex items-center justify-between px-4 sm:px-5">
<h2 class="font-medium tracking-wide text-slate-700 dark:text-navy-100">
Top Sellers
</h2>
<div x-data="usePopper({ placement: 'bottom-end', offset: 4 })" @click.outside="if(isShowPopper) isShowPopper = false"
class="inline-flex">
<button x-ref="popperRef" @click="isShowPopper = !isShowPopper"
class="btn -mr-1.5 h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
</svg>
</button>
<div x-ref="popperRoot" class="popper-root" :class="isShowPopper && 'show'">
<div
class="popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700">
<ul>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Action</a>
</li>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Another
Action</a>
</li>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Something
else</a>
</li>
</ul>
<div class="my-1 h-px bg-slate-150 dark:bg-navy-500"></div>
<ul>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Separated
Link</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="scrollbar-sm flex space-x-3 overflow-x-auto px-4 pb-3 sm:px-5">
<div class="w-56 shrink-0 rounded-xl bg-slate-50 p-4 dark:bg-navy-600">
<div class="flex flex-col items-center space-y-3 text-center">
<div class="h-16 w-16 rounded-full bg-gradient-to-r from-sky-400 to-blue-600 p-0.5">
<img class="h-full w-full rounded-full border-2 border-white object-cover object-center dark:border-navy-700"
src="{{ asset('images/200x200.png') }}" alt="image" />
</div>
<div>
<p class="text-base font-medium text-slate-700 dark:text-navy-100">
Travis Fuller
</p>
<p class="text-xs+ text-slate-400 dark:text-navy-300">
Salesman
</p>
</div>
</div>
<div class="mt-5">
<div>
<p>Sales</p>
<div class="mt-0.5 flex space-x-2">
<p class="text-xl font-semibold text-slate-700 dark:text-navy-100">
2 348
</p>
<p class="flex items-center space-x-0.5 text-xs text-success">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M7 11l5-5m0 0l5 5m-5-5v12" />
</svg>
<span>4.3%</span>
</p>
</div>
</div>
<div class="ax-transparent-gridline">
<div x-init="$nextTick(() => {
$el._x_chart = new ApexCharts($el, pages.charts.topSeller1);
$el._x_chart.render()
});"></div>
</div>
</div>
<div class="mt-5 flex justify-center space-x-2">
<button
class="btn h-8 w-8 rounded-full bg-primary/10 p-0 text-primary hover:bg-primary/20 focus:bg-primary/20 active:bg-primary/25 dark:bg-accent-light/10 dark:text-accent-light dark:hover:bg-accent-light/20 dark:focus:bg-accent-light/20 dark:active:bg-accent-light/25">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
</svg>
</button>
<button
class="btn h-8 w-8 rounded-full bg-primary/10 p-0 text-primary hover:bg-primary/20 focus:bg-primary/20 active:bg-primary/25 dark:bg-accent-light/10 dark:text-accent-light dark:hover:bg-accent-light/20 dark:focus:bg-accent-light/20 dark:active:bg-accent-light/25">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
</svg>
</button>
<button
class="btn h-8 w-8 rounded-full bg-primary/10 p-0 text-primary hover:bg-primary/20 focus:bg-primary/20 active:bg-primary/25 dark:bg-accent-light/10 dark:text-accent-light dark:hover:bg-accent-light/20 dark:focus:bg-accent-light/20 dark:active:bg-accent-light/25">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
</svg>
</button>
</div>
</div>
<div class="w-56 shrink-0 rounded-xl bg-slate-50 p-4 dark:bg-navy-600">
<div class="flex flex-col items-center space-y-3 text-center">
<div class="h-16 w-16 rounded-full bg-gradient-to-r from-sky-400 to-blue-600 p-0.5">
<img class="h-full w-full rounded-full border-2 border-white object-cover object-center dark:border-navy-700"
src="{{ asset('images/200x200.png') }}" alt="image" />
</div>
<div>
<p class="text-base font-medium text-slate-700 dark:text-navy-100">
Konnor Guzman
</p>
<p class="text-xs+ text-slate-400 dark:text-navy-300">
Salesman
</p>
</div>
</div>
<div class="mt-5">
<div>
<p>Sales</p>
<div class="mt-0.5 flex space-x-2">
<p class="text-xl font-semibold text-slate-700 dark:text-navy-100">
6 052
</p>
<p class="flex items-center space-x-0.5 text-xs text-error">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M17 13l-5 5m0 0l-5-5m5 5V6" />
</svg>
<span>2.33%</span>
</p>
</div>
</div>
<div class="ax-transparent-gridline">
<div x-init="$nextTick(() => {
$el._x_chart = new ApexCharts($el, pages.charts.topSeller2);
$el._x_chart.render()
});"></div>
</div>
</div>
<div class="mt-5 flex justify-center space-x-2">
<button
class="btn h-8 w-8 rounded-full bg-primary/10 p-0 text-primary hover:bg-primary/20 focus:bg-primary/20 active:bg-primary/25 dark:bg-accent-light/10 dark:text-accent-light dark:hover:bg-accent-light/20 dark:focus:bg-accent-light/20 dark:active:bg-accent-light/25">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
</svg>
</button>
<button
class="btn h-8 w-8 rounded-full bg-primary/10 p-0 text-primary hover:bg-primary/20 focus:bg-primary/20 active:bg-primary/25 dark:bg-accent-light/10 dark:text-accent-light dark:hover:bg-accent-light/20 dark:focus:bg-accent-light/20 dark:active:bg-accent-light/25">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
</svg>
</button>
<button
class="btn h-8 w-8 rounded-full bg-primary/10 p-0 text-primary hover:bg-primary/20 focus:bg-primary/20 active:bg-primary/25 dark:bg-accent-light/10 dark:text-accent-light dark:hover:bg-accent-light/20 dark:focus:bg-accent-light/20 dark:active:bg-accent-light/25">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
</svg>
</button>
</div>
</div>
<div class="w-56 shrink-0 rounded-xl bg-slate-50 p-4 dark:bg-navy-600">
<div class="flex flex-col items-center space-y-3 text-center">
<div class="h-16 w-16 rounded-full bg-gradient-to-r from-sky-400 to-blue-600 p-0.5">
<img class="h-full w-full rounded-full border-2 border-white object-cover object-center dark:border-navy-700"
src="{{ asset('images/200x200.png') }}" alt="image" />
</div>
<div>
<p class="text-base font-medium text-slate-700 dark:text-navy-100">
Katrina West
</p>
<p class="text-xs+ text-slate-400 dark:text-navy-300">
Saleswoman
</p>
</div>
</div>
<div class="mt-5">
<div>
<p>Sales</p>
<div class="mt-0.5 flex space-x-2">
<p class="text-xl font-semibold text-slate-700 dark:text-navy-100">
2 348
</p>
<p class="flex items-center space-x-0.5 text-xs text-success">
<svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M5 10l7-7m0 0l7 7m-7-7v18" />
</svg>
<span>3.33%</span>
</p>
</div>
</div>
<div class="ax-transparent-gridline">
<div x-init="$nextTick(() => {
$el._x_chart = new ApexCharts($el, pages.charts.topSeller3);
$el._x_chart.render()
});"></div>
</div>
</div>
<div class="mt-5 flex justify-center space-x-2">
<button
class="btn h-8 w-8 rounded-full bg-primary/10 p-0 text-primary hover:bg-primary/20 focus:bg-primary/20 active:bg-primary/25 dark:bg-accent-light/10 dark:text-accent-light dark:hover:bg-accent-light/20 dark:focus:bg-accent-light/20 dark:active:bg-accent-light/25">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
</svg>
</button>
<button
class="btn h-8 w-8 rounded-full bg-primary/10 p-0 text-primary hover:bg-primary/20 focus:bg-primary/20 active:bg-primary/25 dark:bg-accent-light/10 dark:text-accent-light dark:hover:bg-accent-light/20 dark:focus:bg-accent-light/20 dark:active:bg-accent-light/25">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
</svg>
</button>
<button
class="btn h-8 w-8 rounded-full bg-primary/10 p-0 text-primary hover:bg-primary/20 focus:bg-primary/20 active:bg-primary/25 dark:bg-accent-light/10 dark:text-accent-light dark:hover:bg-accent-light/20 dark:focus:bg-accent-light/20 dark:active:bg-accent-light/25">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
</svg>
</button>
</div>
</div>
<div class="w-56 shrink-0 rounded-xl bg-slate-50 p-4 dark:bg-navy-600">
<div class="flex flex-col items-center space-y-3 text-center">
<div class="h-16 w-16 rounded-full bg-gradient-to-r from-sky-400 to-blue-600 p-0.5">
<img class="h-full w-full rounded-full border-2 border-white object-cover object-center dark:border-navy-700"
src="{{ asset('images/200x200.png') }}" alt="image" />
</div>
<div>
<p class="text-base font-medium text-slate-700 dark:text-navy-100">
Henry Curtis
</p>
<p class="text-xs+ text-slate-400 dark:text-navy-300">
Salesman
</p>
</div>
</div>
<div class="mt-5">
<div>
<p>Sales</p>
<div class="mt-0.5 flex space-x-2">
<p class="text-xl font-semibold text-slate-700 dark:text-navy-100">
4 574
</p>
<p class="flex items-center space-x-0.5 text-xs text-success">
<svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M5 10l7-7m0 0l7 7m-7-7v18" />
</svg>
<span>1.2%</span>
</p>
</div>
</div>
<div class="ax-transparent-gridline">
<div x-init="$nextTick(() => {
$el._x_chart = new ApexCharts($el, pages.charts.topSeller4);
$el._x_chart.render()
});"></div>
</div>
</div>
<div class="mt-5 flex justify-center space-x-2">
<button
class="btn h-8 w-8 rounded-full bg-primary/10 p-0 text-primary hover:bg-primary/20 focus:bg-primary/20 active:bg-primary/25 dark:bg-accent-light/10 dark:text-accent-light dark:hover:bg-accent-light/20 dark:focus:bg-accent-light/20 dark:active:bg-accent-light/25">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
</svg>
</button>
<button
class="btn h-8 w-8 rounded-full bg-primary/10 p-0 text-primary hover:bg-primary/20 focus:bg-primary/20 active:bg-primary/25 dark:bg-accent-light/10 dark:text-accent-light dark:hover:bg-accent-light/20 dark:focus:bg-accent-light/20 dark:active:bg-accent-light/25">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
</svg>
</button>
<button
class="btn h-8 w-8 rounded-full bg-primary/10 p-0 text-primary hover:bg-primary/20 focus:bg-primary/20 active:bg-primary/25 dark:bg-accent-light/10 dark:text-accent-light dark:hover:bg-accent-light/20 dark:focus:bg-accent-light/20 dark:active:bg-accent-light/25">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
</svg>
</button>
</div>
</div>
</div>
</div>
<div
class="col-span-12 grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-5 lg:col-span-7 lg:gap-6 xl:col-span-6">
<div class="card px-4 pb-5 sm:px-5">
<div class="flex items-center justify-between py-3">
<h2 class="font-medium tracking-wide text-slate-700 dark:text-navy-100">
Social Traffic
</h2>
<div x-data="usePopper({ placement: 'bottom-end', offset: 4 })" @click.outside="if(isShowPopper) isShowPopper = false"
class="inline-flex">
<button x-ref="popperRef" @click="isShowPopper = !isShowPopper"
class="btn -mr-1.5 h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
</svg>
</button>
<div x-ref="popperRoot" class="popper-root" :class="isShowPopper && 'show'">
<div
class="popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700">
<ul>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Action</a>
</li>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Another
Action</a>
</li>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Something
else</a>
</li>
</ul>
<div class="my-1 h-px bg-slate-150 dark:bg-navy-500"></div>
<ul>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Separated
Link</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div>
<p>
<span class="text-2xl text-slate-700 dark:text-navy-100">135K</span>
<span class="text-xs text-success">+3.1%</span>
</p>
<p class="text-xs+">View in this month</p>
</div>
<div class="mt-5 space-y-4">
<div class="flex items-center justify-between">
<div class="flex items-center space-x-2">
<img class="h-6 w-6" src="{{ asset('images/100x100.png') }}" alt="flag" />
<p>Instagram</p>
</div>
<div class="flex items-center space-x-2">
<p class="text-sm+ text-slate-800 dark:text-navy-100">
34.3k
</p>
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-success" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M7 11l5-5m0 0l5 5m-5-5v12" />
</svg>
</div>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center space-x-2">
<img class="h-6 w-6" src="{{ asset('images/100x100.png') }}" alt="flag" />
<p>Facebook</p>
</div>
<div class="flex items-center space-x-2">
<p class="text-sm+ text-slate-800 dark:text-navy-100">
17.72k
</p>
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-success" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M7 11l5-5m0 0l5 5m-5-5v12" />
</svg>
</div>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center space-x-2">
<img class="h-6 w-6" src="{{ asset('images/100x100.png') }}" alt="flag" />
<p>Youtube</p>
</div>
<div class="flex items-center space-x-2">
<p class="text-sm+ text-slate-800 dark:text-navy-100">
12.41k
</p>
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-error" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M17 13l-5 5m0 0l-5-5m5 5V6" />
</svg>
</div>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center space-x-2">
<img class="h-6 w-6" src="{{ asset('images/100x100.png') }}" alt="flag" />
<p>Pinterest</p>
</div>
<div class="flex items-center space-x-2">
<p class="text-sm+ text-slate-800 dark:text-navy-100">
11.89k
</p>
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-success" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M7 11l5-5m0 0l5 5m-5-5v12" />
</svg>
</div>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center space-x-2">
<img class="h-6 w-6" src="{{ asset('images/100x100.png') }}" alt="flag" />
<p>Discord</p>
</div>
<div class="flex items-center space-x-2">
<p class="text-sm+ text-slate-800 dark:text-navy-100">
9.47k
</p>
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-success" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M7 11l5-5m0 0l5 5m-5-5v12" />
</svg>
</div>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center space-x-2">
<img class="h-6 w-6" src="{{ asset('images/100x100.png') }}" alt="flag" />
<p>TikTok</p>
</div>
<div class="flex items-center space-x-2">
<p class="text-sm+ text-slate-800 dark:text-navy-100">
8.11k
</p>
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-error" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M17 13l-5 5m0 0l-5-5m5 5V6" />
</svg>
</div>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center space-x-2">
<img class="h-6 w-6" src="{{ asset('images/100x100.png') }}" alt="flag" />
<p>Twitter</p>
</div>
<div class="flex items-center space-x-2">
<p class="text-sm+ text-slate-800 dark:text-navy-100">
5.98k
</p>
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-success" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M7 11l5-5m0 0l5 5m-5-5v12" />
</svg>
</div>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center space-x-2">
<img class="h-6 w-6" src="{{ asset('images/100x100.png') }}" alt="flag" />
<p>Tumblr</p>
</div>
<div class="flex items-center space-x-2">
<p class="text-sm+ text-slate-800 dark:text-navy-100">
2.7k
</p>
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-success" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M7 11l5-5m0 0l5 5m-5-5v12" />
</svg>
</div>
</div>
</div>
</div>
<div class="card px-4 pb-5 sm:px-5">
<div class="my-3 flex h-8 items-center justify-between">
<h2 class="font-medium tracking-wide text-slate-700 dark:text-navy-100">
Top Countries
</h2>
<a href="#"
class="border-b border-dotted border-current pb-0.5 text-xs+ font-medium text-primary outline-none transition-colors duration-300 hover:text-primary/70 focus:text-primary/70 dark:text-accent-light dark:hover:text-accent-light/70 dark:focus:text-accent-light/70">
View All
</a>
</div>
<div>
<p>
<span class="text-2xl text-slate-700 dark:text-navy-100">64</span>
</p>
<p class="text-xs+">Countries</p>
</div>
<div class="mt-5 space-y-4">
<div class="flex items-center justify-between">
<div class="flex items-center space-x-2">
<img class="h-6 w-6" src="{{ asset('images/flags/australia-round.svg') }}"
alt="flag" />
<p>Australia</p>
</div>
<div class="flex items-center space-x-2">
<p class="text-sm+ text-slate-800 dark:text-navy-100">
$6.41k
</p>
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-success" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M7 11l5-5m0 0l5 5m-5-5v12" />
</svg>
</div>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center space-x-2">
<img class="h-6 w-6" src="{{ asset('images/flags/brazil-round.svg') }}"
alt="flag" />
<p>Brazil</p>
</div>
<div class="flex items-center space-x-2">
<p class="text-sm+ text-slate-800 dark:text-navy-100">
$2.33k
</p>
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-success" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M7 11l5-5m0 0l5 5m-5-5v12" />
</svg>
</div>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center space-x-2">
<img class="h-6 w-6" src="{{ asset('images/flags/china-round.svg') }}"
alt="flag" />
<p>China</p>
</div>
<div class="flex items-center space-x-2">
<p class="text-sm+ text-slate-800 dark:text-navy-100">
$7.21k
</p>
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-success" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M7 11l5-5m0 0l5 5m-5-5v12" />
</svg>
</div>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center space-x-2">
<img class="h-6 w-6" src="{{ asset('images/flags/india-round.svg') }}"
alt="flag" />
<p>India</p>
</div>
<div class="flex items-center space-x-2">
<p class="text-sm+ text-slate-800 dark:text-navy-100">
$754
</p>
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-error" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M17 13l-5 5m0 0l-5-5m5 5V6" />
</svg>
</div>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center space-x-2">
<img class="h-6 w-6" src="{{ asset('images/flags/italy-round.svg') }}"
alt="flag" />
<p>Italy</p>
</div>
<div class="flex items-center space-x-2">
<p class="text-sm+ text-slate-800 dark:text-navy-100">
$699
</p>
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-success" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M7 11l5-5m0 0l5 5m-5-5v12" />
</svg>
</div>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center space-x-2">
<img class="h-6 w-6" src="{{ asset('images/flags/japan-round.svg') }}"
alt="flag" />
<p>Japan</p>
</div>
<div class="flex items-center space-x-2">
<p class="text-sm+ text-slate-800 dark:text-navy-100">
$624
</p>
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-success" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M7 11l5-5m0 0l5 5m-5-5v12" />
</svg>
</div>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center space-x-2">
<img class="h-6 w-6" src="{{ asset('images/flags/russia-round.svg') }}"
alt="flag" />
<p>Russia</p>
</div>
<div class="flex items-center space-x-2">
<p class="text-sm+ text-slate-800 dark:text-navy-100">
$574
</p>
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-error" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M17 13l-5 5m0 0l-5-5m5 5V6" />
</svg>
</div>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center space-x-2">
<img class="h-6 w-6" src="{{ asset('images/flags/spain-round.svg') }}"
alt="flag" />
<p>Spain</p>
</div>
<div class="flex items-center space-x-2">
<p class="text-sm+ text-slate-800 dark:text-navy-100">
$506
</p>
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-success" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M7 11l5-5m0 0l5 5m-5-5v12" />
</svg>
</div>
</div>
</div>
</div>
</div>
<div class="col-span-12">
<div class="flex items-center justify-between">
<h2 class="text-base font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100">
Latest Orders
</h2>
<div class="flex">
<div class="flex items-center" x-data="{ isInputActive: false }">
<label class="block">
<input x-effect="isInputActive === true && $nextTick(() => { $el.focus()});"
:class="isInputActive ? 'w-32 lg:w-48' : 'w-0'"
class="form-input bg-transparent px-1 text-right transition-all duration-100 placeholder:text-slate-500 dark:placeholder:text-navy-200"
placeholder="Search here..." type="text" />
</label>
<button @click="isInputActive = !isInputActive"
class="btn h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
</button>
</div>
<div x-data="usePopper({ placement: 'bottom-end', offset: 4 })" @click.outside="if(isShowPopper) isShowPopper = false"
class="inline-flex">
<button x-ref="popperRef" @click="isShowPopper = !isShowPopper"
class="btn h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
</svg>
</button>
<div x-ref="popperRoot" class="popper-root" :class="isShowPopper && 'show'">
<div
class="popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700">
<ul>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Action</a>
</li>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Another
Action</a>
</li>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Something
else</a>
</li>
</ul>
<div class="my-1 h-px bg-slate-150 dark:bg-navy-500"></div>
<ul>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Separated
Link</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="card mt-3">
<div class="is-scrollbar-hidden min-w-full overflow-x-auto">
<table class="is-hoverable w-full text-left">
<thead>
<tr>
<th
class="whitespace-nowrap rounded-tl-lg bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5">
Order
</th>
<th
class="whitespace-nowrap bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5">
Date
</th>
<th
class="whitespace-nowrap bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5">
Name
</th>
<th
class="whitespace-nowrap bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5">
Address
</th>
<th
class="whitespace-nowrap bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5">
Order Status
</th>
<th
class="whitespace-nowrap bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5">
Payment
</th>
<th
class="whitespace-nowrap bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5">
Total
</th>
<th
class="whitespace-nowrap rounded-tr-lg bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5">
</th>
</tr>
</thead>
<tbody>
<tr class="border-y border-transparent border-b-slate-200 dark:border-b-navy-500">
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<p class="font-medium text-primary dark:text-accent-light">
#95647
</p>
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<p class="font-medium">25 May 2021</p>
<p class="mt-0.5 text-xs">01:25 AM</p>
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<div class="flex items-center space-x-4">
<div class="avatar h-9 w-9">
<img class="mask is-squircle" src="{{ asset('images/200x200.png') }}"
alt="avatar" />
</div>
<span class="font-medium text-slate-700 dark:text-navy-100">Anthony Jensen
</span>
</div>
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<p class="w-48 overflow-hidden text-ellipsis text-xs+">
260 W. Storm Street New York, NY 10025.
</p>
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<div class="badge bg-warning/10 text-warning dark:bg-warning/15">
Unconfirmed
</div>
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<div class="badge space-x-2.5 text-xs+ text-warning">
<div class="h-2 w-2 rounded-full bg-current"></div>
<span>Await Auth</span>
</div>
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<p class="text-sm+ font-medium text-slate-700 dark:text-navy-100">
$2 654
</p>
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<button
class="btn h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
</svg>
</button>
</td>
</tr>
<tr class="border-y border-transparent border-b-slate-200 dark:border-b-navy-500">
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<p class="font-medium text-primary dark:text-accent-light">
#84895
</p>
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<p class="font-medium">03 May 2021</p>
<p class="mt-0.5 text-xs">09:44 AM</p>
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<div class="flex items-center space-x-4">
<div class="avatar h-9 w-9">
<img class="mask is-squircle" src="{{ asset('images/200x200.png') }}"
alt="avatar" />
</div>
<span class="font-medium text-slate-700 dark:text-navy-100">John Due
</span>
</div>
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<p class="w-48 overflow-hidden text-ellipsis text-xs+">
13811 Gimbert Ln Santa Ana, California(CA), 92705
</p>
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<div class="badge bg-success/10 text-success dark:bg-success/15">
Completed
</div>
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<div class="badge space-x-2.5 text-xs+ text-success">
<div class="h-2 w-2 rounded-full bg-current"></div>
<span>Paid</span>
</div>
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<p class="text-sm+ font-medium text-slate-700 dark:text-navy-100">
$3 654
</p>
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<button
class="btn h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
</svg>
</button>
</td>
</tr>
<tr class="border-y border-transparent border-b-slate-200 dark:border-b-navy-500">
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<p class="font-medium text-primary dark:text-accent-light">
#49756
</p>
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<p class="font-medium">19 Jun 2021</p>
<p class="mt-0.5 text-xs">5:43 AM</p>
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<div class="flex items-center space-x-4">
<div class="avatar h-9 w-9">
<img class="mask is-squircle" src="{{ asset('images/200x200.png') }}"
alt="avatar" />
</div>
<span class="font-medium text-slate-700 dark:text-navy-100">Tom Robert
</span>
</div>
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<p class="w-48 overflow-hidden text-ellipsis text-xs+">
3803 Fox Rd Huron, Ohio(OH), 44839
</p>
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<div class="badge bg-info/10 text-info dark:bg-info/15">
Shipped
</div>
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<div class="badge space-x-2.5 text-xs+ text-success">
<div class="h-2 w-2 rounded-full bg-current"></div>
<span>Paid</span>
</div>
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<p class="text-sm+ font-medium text-slate-700 dark:text-navy-100">
$6 156
</p>
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<button
class="btn h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
</svg>
</button>
</td>
</tr>
<tr class="border-y border-transparent border-b-slate-200 dark:border-b-navy-500">
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<p class="font-medium text-primary dark:text-accent-light">
#79632
</p>
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<p class="font-medium">03 Jun 2021</p>
<p class="mt-0.5 text-xs">4:54 AM</p>
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<div class="flex items-center space-x-4">
<div class="avatar h-9 w-9">
<img class="mask is-squircle" src="{{ asset('images/200x200.png') }}"
alt="avatar" />
</div>
<span class="font-medium text-slate-700 dark:text-navy-100">Nolan Doe
</span>
</div>
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<p class="w-48 overflow-hidden text-ellipsis text-xs+">
1805 Jackson Ave Seaford, New York(NY), 11783
</p>
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<div
class="badge bg-primary/10 text-primary dark:bg-accent-light/15 dark:text-accent-light">
Processing
</div>
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<div class="badge space-x-2.5 text-xs+ text-success">
<div class="h-2 w-2 rounded-full bg-current"></div>
<span>Paid</span>
</div>
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<p class="text-sm+ font-medium text-slate-700 dark:text-navy-100">
$7 621
</p>
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<button
class="btn h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
</svg>
</button>
</td>
</tr>
<tr class="border-y border-transparent border-b-slate-200 dark:border-b-navy-500">
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<p class="font-medium text-primary dark:text-accent-light">
#12668
</p>
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<p class="font-medium">09 Jun 2021</p>
<p class="mt-0.5 text-xs">2:03 AM</p>
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<div class="flex items-center space-x-4">
<div class="avatar h-9 w-9">
<img class="mask is-squircle" src="{{ asset('images/200x200.png') }}"
alt="avatar" />
</div>
<span class="font-medium text-slate-700 dark:text-navy-100">Henry Curtis
</span>
</div>
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<p class="w-48 overflow-hidden text-ellipsis text-xs+">
421 Basswood Ln Haysville, Kansas(KS), 67060
</p>
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<div class="badge bg-error/10 text-error dark:bg-error/15">
Cancelled
</div>
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<div class="badge space-x-2.5 text-xs+ text-error">
<div class="h-2 w-2 rounded-full bg-current"></div>
<span>Failed</span>
</div>
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<p class="text-sm+ font-medium text-slate-700 dark:text-navy-100">
$456
</p>
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<button
class="btn h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
</svg>
</button>
</td>
</tr>
<tr class="border-y border-transparent border-b-slate-200 dark:border-b-navy-500">
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<p class="font-medium text-primary dark:text-accent-light">
#66463
</p>
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<p class="font-medium">23 Jul 2021</p>
<p class="mt-0.5 text-xs">9:11 AM</p>
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<div class="flex items-center space-x-4">
<div class="avatar h-9 w-9">
<img class="mask is-squircle" src="{{ asset('images/200x200.png') }}"
alt="avatar" />
</div>
<span class="font-medium text-slate-700 dark:text-navy-100">Katrina West
</span>
</div>
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<p class="w-48 overflow-hidden text-ellipsis text-xs+">
205 Hope Rd Helena, Montana(MT), 59602
</p>
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<div class="badge bg-warning/10 text-warning dark:bg-warning/15">
Unconfirmed
</div>
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<div class="badge space-x-2.5 text-xs+ text-warning">
<div class="h-2 w-2 rounded-full bg-current"></div>
<span>Await Auth</span>
</div>
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<p class="text-sm+ font-medium text-slate-700 dark:text-navy-100">
$5 116
</p>
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<button
class="btn h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
</svg>
</button>
</td>
</tr>
<tr class="border-y border-transparent border-b-slate-200 dark:border-b-navy-500">
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<p class="font-medium text-primary dark:text-accent-light">
#53133
</p>
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<p class="font-medium">11 Aug 2021</p>
<p class="mt-0.5 text-xs">12:11 AM</p>
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<div class="flex items-center space-x-4">
<div class="avatar h-9 w-9">
<img class="mask is-squircle"
src="{{ asset('images/200x200.png') }}" alt="avatar" />
</div>
<span class="font-medium text-slate-700 dark:text-navy-100">Lance Tucker
</span>
</div>
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<p class="w-48 overflow-hidden text-ellipsis text-xs+">
1805 Jackson Ave Seaford, New York(NY), 11783
</p>
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<div class="badge bg-warning/10 text-warning dark:bg-warning/15">
Unconfirmed
</div>
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<div class="badge space-x-2.5 text-xs+ text-warning">
<div class="h-2 w-2 rounded-full bg-current"></div>
<span>Await Auth</span>
</div>
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<p class="text-sm+ font-medium text-slate-700 dark:text-navy-100">
$4 952
</p>
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<button
class="btn h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
</svg>
</button>
</td>
</tr>
<tr class="border-y border-transparent border-b-slate-200 dark:border-b-navy-500">
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<p class="font-medium text-primary dark:text-accent-light">
#5684
</p>
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<p class="font-medium">11 May 2021</p>
<p class="mt-0.5 text-xs">07:55 AM</p>
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<div class="flex items-center space-x-4">
<div class="avatar h-9 w-9">
<img class="mask is-squircle"
src="{{ asset('images/200x200.png') }}" alt="avatar" />
</div>
<span class="font-medium text-slate-700 dark:text-navy-100">Raul Bradley
</span>
</div>
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<p class="w-48 overflow-hidden text-ellipsis text-xs+">
13811 Gimbert Ln Santa Ana, California(CA), 92705
</p>
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<div class="badge bg-success/10 text-success dark:bg-success/15">
Completed
</div>
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<div class="badge space-x-2.5 text-xs+ text-success">
<div class="h-2 w-2 rounded-full bg-current"></div>
<span>Paid</span>
</div>
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<p class="text-sm+ font-medium text-slate-700 dark:text-navy-100">
$5 137
</p>
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<button
class="btn h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
</svg>
</button>
</td>
</tr>
<tr class="border-y border-transparent border-b-slate-200 dark:border-b-navy-500">
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<p class="font-medium text-primary dark:text-accent-light">
#64669
</p>
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<p class="font-medium">29 Jun 2021</p>
<p class="mt-0.5 text-xs">1:54 AM</p>
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<div class="flex items-center space-x-4">
<div class="avatar h-9 w-9">
<img class="mask is-squircle"
src="{{ asset('images/200x200.png') }}" alt="avatar" />
</div>
<span class="font-medium text-slate-700 dark:text-navy-100">Derrick
Simmons
</span>
</div>
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<p class="w-48 overflow-hidden text-ellipsis text-xs+">
3803 Fox Rd Huron, Ohio(OH), 44839
</p>
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<div class="badge bg-info/10 text-info dark:bg-info/15">
Shipped
</div>
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<div class="badge space-x-2.5 text-xs+ text-success">
<div class="h-2 w-2 rounded-full bg-current"></div>
<span>Paid</span>
</div>
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<p class="text-sm+ font-medium text-slate-700 dark:text-navy-100">
$2 566
</p>
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<button
class="btn h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
</svg>
</button>
</td>
</tr>
<tr class="border-y border-transparent border-b-slate-200 dark:border-b-navy-500">
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<p class="font-medium text-primary dark:text-accent-light">
#31669
</p>
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<p class="font-medium">08 Jun 2021</p>
<p class="mt-0.5 text-xs">7:36 AM</p>
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<div class="flex items-center space-x-4">
<div class="avatar h-9 w-9">
<img class="mask is-squircle"
src="{{ asset('images/200x200.png') }}" alt="avatar" />
</div>
<span class="font-medium text-slate-700 dark:text-navy-100">Samantha
Shelton
</span>
</div>
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<p class="w-48 overflow-hidden text-ellipsis text-xs+">
1805 Jackson Ave Seaford, New York(NY), 11783
</p>
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<div
class="badge bg-primary/10 text-primary dark:bg-accent-light/15 dark:text-accent-light">
Processing
</div>
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<div class="badge space-x-2.5 text-xs+ text-success">
<div class="h-2 w-2 rounded-full bg-current"></div>
<span>Paid</span>
</div>
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<p class="text-sm+ font-medium text-slate-700 dark:text-navy-100">
$9 665
</p>
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<button
class="btn h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
</svg>
</button>
</td>
</tr>
</tbody>
</table>
</div>
<div
class="flex flex-col justify-between space-y-4 px-4 py-4 sm:flex-row sm:items-center sm:space-y-0 sm:px-5">
<div class="flex items-center space-x-2 text-xs+">
<span>Show</span>
<label class="block">
<select
class="form-select rounded-full border border-slate-300 bg-white px-2 py-1 pr-6 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:bg-navy-700 dark:hover:border-navy-400 dark:focus:border-accent">
<option>10</option>
<option>30</option>
<option>50</option>
</select>
</label>
<span>entries</span>
</div>
<ol class="pagination">
<li class="rounded-l-lg bg-slate-150 dark:bg-navy-500">
<a href="#"
class="flex h-8 w-8 items-center justify-center rounded-lg text-slate-500 transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:text-navy-200 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none"
viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M15 19l-7-7 7-7" />
</svg>
</a>
</li>
<li class="bg-slate-150 dark:bg-navy-500">
<a href="#"
class="flex h-8 min-w-[2rem] items-center justify-center rounded-lg px-3 leading-tight transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">1</a>
</li>
<li class="bg-slate-150 dark:bg-navy-500">
<a href="#"
class="flex h-8 min-w-[2rem] items-center justify-center rounded-lg bg-primary px-3 leading-tight text-white transition-colors hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90">2</a>
</li>
<li class="bg-slate-150 dark:bg-navy-500">
<a href="#"
class="flex h-8 min-w-[2rem] items-center justify-center rounded-lg px-3 leading-tight transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">3</a>
</li>
<li class="bg-slate-150 dark:bg-navy-500">
<a href="#"
class="flex h-8 min-w-[2rem] items-center justify-center rounded-lg px-3 leading-tight transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">4</a>
</li>
<li class="bg-slate-150 dark:bg-navy-500">
<a href="#"
class="flex h-8 min-w-[2rem] items-center justify-center rounded-lg px-3 leading-tight transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">5</a>
</li>
<li class="rounded-r-lg bg-slate-150 dark:bg-navy-500">
<a href="#"
class="flex h-8 w-8 items-center justify-center rounded-lg text-slate-500 transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:text-navy-200 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9 5l7 7-7 7" />
</svg>
</a>
</li>
</ol>
<div class="text-xs+">1 - 10 of 10 entries</div>
</div>
</div>
</div>
</div>
</main>
</x-app-layout>
resources/views/pages/dashboards-personal.blade.php deleted 100644 → 0
View file @ 5bad2db9
<x-app-layout title="Personal Dashboard" is-header-blur="true">
<!-- Main Content Wrapper -->
<main class="main-content w-full px-[var(--margin-x)] pb-8">
<div class="mt-4 grid grid-cols-12 gap-4 sm:mt-5 sm:gap-5 lg:mt-6 lg:gap-6">
<div class="col-span-12 space-y-4 sm:space-y-5 lg:col-span-8 lg:space-y-6">
<div class="grid grid-cols-1 gap-4 sm:grid-cols-3 sm:gap-5 lg:gap-6">
<div class="card bg-gradient-to-r from-blue-500 to-indigo-600 px-5 pb-5">
<div>
<div class="ax-transparent-gridline mt-5 w-1/2">
<div x-init="$nextTick(() => {
$el._x_chart = new ApexCharts($el, pages.charts.earningWhite);
$el._x_chart.render()
});"></div>
</div>
<p class="mt-3 text-base font-medium tracking-wide text-indigo-100">
Earnings
</p>
<p class="mt-4 font-inter text-2xl font-semibold">
<span class="text-indigo-100">$</span>
<span class="text-white">31.313</span>
</p>
<div class="badge mt-2 rounded-full bg-black/20 text-indigo-50">
13 Members
</div>
</div>
<div class="absolute bottom-0 right-0 overflow-hidden rounded-lg">
<img class="w-24 translate-x-1/4 translate-y-1/4 opacity-50"
src="{{ asset('images/illustrations/the-dollar.svg') }}" alt="image" />
</div>
</div>
<div class="grid grid-cols-1 gap-4 sm:col-span-2 sm:grid-cols-2 sm:gap-5 lg:gap-6">
<div class="card justify-center p-4.5">
<div class="flex items-center justify-between">
<div>
<p class="text-base font-semibold text-slate-700 dark:text-navy-100">
56
</p>
<p class="text-xs+ line-clamp-1">Projects</p>
</div>
<div
class="mask is-star flex h-10 w-10 shrink-0 items-center justify-center bg-success">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-white" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z" />
</svg>
</div>
</div>
<div>
<div
class="badge mt-2 space-x-1 bg-success/10 py-1 px-1.5 text-success dark:bg-success/15">
<span>10%</span>
<svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" viewBox="0 0 20 20"
fill="currentColor">
<path fill-rule="evenodd"
d="M12 7a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0V8.414l-4.293 4.293a1 1 0 01-1.414 0L8 10.414l-4.293 4.293a1 1 0 01-1.414-1.414l5-5a1 1 0 011.414 0L11 10.586 14.586 7H12z"
clip-rule="evenodd" />
</svg>
</div>
</div>
</div>
<div class="card justify-center p-4.5">
<div class="flex items-center justify-between">
<div>
<p class="text-base font-semibold text-slate-700 dark:text-navy-100">
324
</p>
<p class="text-xs+ line-clamp-1">Total hours</p>
</div>
<div class="mask is-star flex h-10 w-10 shrink-0 items-center justify-center bg-info">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-white" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
</div>
<div>
<div
class="badge mt-2 space-x-1 bg-success/10 py-1 px-1.5 text-success dark:bg-success/15">
<span>6%</span>
<svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" viewBox="0 0 20 20"
fill="currentColor">
<path fill-rule="evenodd"
d="M12 7a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0V8.414l-4.293 4.293a1 1 0 01-1.414 0L8 10.414l-4.293 4.293a1 1 0 01-1.414-1.414l5-5a1 1 0 011.414 0L11 10.586 14.586 7H12z"
clip-rule="evenodd" />
</svg>
</div>
</div>
</div>
<div class="card justify-center p-4.5">
<div class="flex items-center justify-between">
<div>
<p class="text-base font-semibold text-slate-700 dark:text-navy-100">
7
</p>
<p class="text-xs+ line-clamp-1">Support Ticket</p>
</div>
<div
class="mask is-star flex h-10 w-10 shrink-0 items-center justify-center bg-secondary">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-white" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z" />
</svg>
</div>
</div>
<div>
<div
class="badge mt-2 space-x-1 bg-success/10 py-1 px-1.5 text-success dark:bg-success/15">
<span>9%</span>
<svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" viewBox="0 0 20 20"
fill="currentColor">
<path fill-rule="evenodd"
d="M12 7a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0V8.414l-4.293 4.293a1 1 0 01-1.414 0L8 10.414l-4.293 4.293a1 1 0 01-1.414-1.414l5-5a1 1 0 011.414 0L11 10.586 14.586 7H12z"
clip-rule="evenodd" />
</svg>
</div>
</div>
</div>
<div class="card justify-center p-4.5">
<div class="flex items-center justify-between">
<div>
<p class="text-base font-semibold text-slate-700 dark:text-navy-100">
56
</p>
<p class="text-xs+ line-clamp-1">Active Task</p>
</div>
<div
class="mask is-star flex h-10 w-10 shrink-0 items-center justify-center bg-warning">
<svg class="h-5 w-5 text-white" viewBox="0 0 24 24" fill="none"
stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M12.5293 18L20.9999 8.40002" stroke-width="1.5" stroke-linecap="round"
stroke-linejoin="round" />
<path d="M3 13.2L7.23529 18L17.8235 6" stroke-width="1.5" stroke-linecap="round"
stroke-linejoin="round" />
</svg>
</div>
</div>
<div>
<div class="badge mt-2 space-x-1 bg-error/10 py-1 px-1.5 text-error dark:bg-error/15">
<span>6%</span>
<svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" viewBox="0 0 20 20"
fill="currentColor">
<path fill-rule="evenodd"
d="M12 7a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0V8.414l-4.293 4.293a1 1 0 01-1.414 0L8 10.414l-4.293 4.293a1 1 0 01-1.414-1.414l5-5a1 1 0 011.414 0L11 10.586 14.586 7H12z"
clip-rule="evenodd" />
</svg>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="flex items-center justify-between">
<h2 class="text-sm+ font-medium tracking-wide text-slate-700 dark:text-navy-100">
Ongoing Projects
</h2>
<div x-data="usePopper({ placement: 'bottom-end', offset: 4 })" @click.outside="if(isShowPopper) isShowPopper = false"
class="inline-flex">
<button x-ref="popperRef" @click="isShowPopper = !isShowPopper"
class="btn h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
</svg>
</button>
<div x-ref="popperRoot" class="popper-root" :class="isShowPopper && 'show'">
<div
class="popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700">
<ul>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Action</a>
</li>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Another
Action</a>
</li>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Something
else</a>
</li>
</ul>
<div class="my-1 h-px bg-slate-150 dark:bg-navy-500"></div>
<ul>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Separated
Link</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="mt-3 space-y-3.5">
<div class="card p-3">
<div class="flex items-center space-x-3">
<img class="h-10 w-10 rounded-lg object-cover object-center"
src="{{ asset('images/illustrations/lms-ui.svg') }}" alt="image" />
<div class="flex-1">
<div class="flex justify-between">
<p class="font-medium text-slate-700 dark:text-navy-100">
LMS App Design
</p>
</div>
<div class="mt-0.5 flex text-xs text-slate-400 dark:text-navy-300">
<p>Updated at 7 Sep</p>
<div class="mx-2 my-1 hidden w-px bg-slate-200 dark:bg-navy-500 sm:flex"></div>
<p class="hidden sm:flex">Deadline: 25.08.2020</p>
</div>
</div>
</div>
<p class="-mt-3 text-right text-xs font-medium text-primary dark:text-accent-light">
24%
</p>
<div class="progress mt-2 h-1.5 bg-slate-150 dark:bg-navy-500">
<div
class="is-active relative w-4/12 overflow-hidden rounded-full bg-primary dark:bg-accent">
</div>
</div>
</div>
<div class="card p-3">
<div class="flex items-center space-x-3">
<img class="h-10 w-10 rounded-lg object-cover object-center"
src="{{ asset('images/illustrations/store-ui.svg') }}" alt="image" />
<div class="flex-1">
<div class="flex justify-between">
<p class="font-medium text-slate-700 dark:text-navy-100">
Store Dashboard
</p>
</div>
<div class="mt-0.5 flex text-xs text-slate-400 dark:text-navy-300">
<p>Updated a hour ago</p>
<div class="mx-2 my-1 hidden w-px bg-slate-200 dark:bg-navy-500 sm:flex"></div>
<p class="hidden sm:flex">Deadline: 21.08.2020</p>
</div>
</div>
</div>
<p class="-mt-3 text-right text-xs font-medium text-secondary dark:text-secondary-light">
56%
</p>
<div class="progress mt-2 h-1.5 bg-secondary/15 dark:bg-secondary-light/25">
<div class="w-6/12 rounded-full bg-secondary"></div>
</div>
</div>
<div class="card p-3">
<div class="flex items-center space-x-3">
<img class="h-10 w-10 rounded-lg object-cover object-center"
src="{{ asset('images/illustrations/chat-ui.svg') }}" alt="image" />
<div class="flex-1">
<div class="flex justify-between">
<p class="font-medium text-slate-700 dark:text-navy-100">
Chat Mobile App
</p>
</div>
<div class="mt-0.5 flex text-xs text-slate-400 dark:text-navy-300">
<p>Updated 3 days ago</p>
<div class="mx-2 my-1 hidden w-px bg-slate-200 dark:bg-navy-500 sm:flex"></div>
<p class="hidden sm:flex">Deadline: 16.09.2020</p>
</div>
</div>
</div>
<p class="-mt-3 text-right text-xs font-medium text-warning">
64%
</p>
<div class="progress mt-2 h-1.5 bg-warning/15 dark:bg-warning/25">
<div class="w-7/12 rounded-full bg-warning"></div>
</div>
</div>
<div class="card p-3">
<div class="flex items-center space-x-3">
<img class="h-10 w-10 rounded-lg object-cover object-center"
src="{{ asset('images/illustrations/nft.svg') }}" alt="image" />
<div class="flex-1">
<div class="flex justify-between">
<p class="font-medium text-slate-700 dark:text-navy-100">
NFT Marketplace App
</p>
</div>
<div class="mt-0.5 flex text-xs text-slate-400 dark:text-navy-300">
<p>Updated a week ago</p>
<div class="mx-2 my-1 hidden w-px bg-slate-200 dark:bg-navy-500 sm:flex"></div>
<p class="hidden sm:flex">Deadline: 26.11.2020</p>
</div>
</div>
</div>
<p class="-mt-3 text-right text-xs font-medium text-info">
14%
</p>
<div class="progress mt-2 h-1.5 bg-info/15 dark:bg-info/25">
<div class="w-2/12 rounded-full bg-info"></div>
</div>
</div>
</div>
</div>
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-5 lg:gap-6">
<div class="card px-4 pb-4 sm:px-5">
<div class="my-3 flex h-8 items-center justify-between">
<h2 class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100">
Contact List
</h2>
<div x-data="usePopper({ placement: 'bottom-end', offset: 4 })" @click.outside="if(isShowPopper) isShowPopper = false"
class="inline-flex">
<button x-ref="popperRef" @click="isShowPopper = !isShowPopper"
class="btn -mr-1.5 h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
</svg>
</button>
<div x-ref="popperRoot" class="popper-root" :class="isShowPopper && 'show'">
<div
class="popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700">
<ul>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Action</a>
</li>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Another
Action</a>
</li>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Something
else</a>
</li>
</ul>
<div class="my-1 h-px bg-slate-150 dark:bg-navy-500"></div>
<ul>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Separated
Link</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="space-y-3.5" x-data="{ expandedItem: 'item-1' }">
<div x-data="accordionItem('item-1')">
<div class="flex items-center justify-between">
<div class="flex space-x-4">
<div class="avatar h-10 w-10">
<img class="rounded-full" src="{{ asset('images/200x200.png') }}"
alt="avatar" />
</div>
<div>
<h3 class="font-medium text-slate-700 line-clamp-1 dark:text-navy-100">
Konnor Guzman
</h3>
<p class="mt-0.5 text-xs line-clamp-1">
(01) 22 888 4444
</p>
</div>
</div>
<button @click="expanded = !expanded"
class="btn h-7 w-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
<i :class="expanded && '-rotate-180'"
class="fas fa-chevron-down transition-transform"></i>
</button>
</div>
<div x-show="expanded" x-collapse>
<div class="flex justify-between pt-4">
<button
class="btn h-7 w-7 rounded-full bg-success/10 p-0 text-success hover:bg-success/20 focus:bg-success/20 active:bg-success/25">
<i class="fa-solid fa-phone text-xs"></i>
</button>
<button
class="btn h-7 w-7 rounded-full bg-warning/10 p-0 text-warning hover:bg-warning/20 focus:bg-warning/20 active:bg-warning/25">
<i class="fa-solid fa-video text-xs"></i>
</button>
<button
class="btn h-7 w-7 rounded-full bg-secondary/10 p-0 text-secondary hover:bg-secondary/20 focus:bg-secondary/20 active:bg-secondary/25 dark:bg-secondary-light/10 dark:text-secondary-light dark:hover:bg-secondary-light/20 dark:focus:bg-secondary-light/20 dark:active:bg-secondary-light/25">
<i class="fa-regular fa-comment text-xs"></i>
</button>
<button
class="btn h-7 w-7 rounded-full bg-info/10 p-0 text-info hover:bg-info/20 focus:bg-info/20 active:bg-info/25">
<i class="fa-regular fa-envelope text-xs"></i>
</button>
<button
class="btn h-7 w-7 rounded-full bg-slate-150 p-0 text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
<i class="fa-solid fa-ellipsis"></i>
</button>
</div>
</div>
</div>
<div x-data="accordionItem('item-2')">
<div class="flex items-center justify-between">
<div class="flex space-x-4">
<div class="avatar h-10 w-10">
<img class="rounded-full" src="{{ asset('images/200x200.png') }}"
alt="avatar" />
</div>
<div>
<h3 class="font-medium text-slate-700 line-clamp-1 dark:text-navy-100">
Alfredo Elliott
</h3>
<p class="mt-0.5 text-xs line-clamp-1">
(095)-800-8313
</p>
</div>
</div>
<button @click="expanded = !expanded"
class="btn h-7 w-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
<i :class="expanded && '-rotate-180'"
class="fas fa-chevron-down transition-transform"></i>
</button>
</div>
<div x-show="expanded" x-collapse>
<div class="flex justify-between pt-4">
<button
class="btn h-7 w-7 rounded-full bg-success/10 p-0 text-success hover:bg-success/20 focus:bg-success/20 active:bg-success/25">
<i class="fa-solid fa-phone text-xs"></i>
</button>
<button
class="btn h-7 w-7 rounded-full bg-warning/10 p-0 text-warning hover:bg-warning/20 focus:bg-warning/20 active:bg-warning/25">
<i class="fa-solid fa-video text-xs"></i>
</button>
<button
class="btn h-7 w-7 rounded-full bg-secondary/10 p-0 text-secondary hover:bg-secondary/20 focus:bg-secondary/20 active:bg-secondary/25 dark:bg-secondary-light/10 dark:text-secondary-light dark:hover:bg-secondary-light/20 dark:focus:bg-secondary-light/20 dark:active:bg-secondary-light/25">
<i class="fa-regular fa-comment text-xs"></i>
</button>
<button
class="btn h-7 w-7 rounded-full bg-info/10 p-0 text-info hover:bg-info/20 focus:bg-info/20 active:bg-info/25">
<i class="fa-regular fa-envelope text-xs"></i>
</button>
<button
class="btn h-7 w-7 rounded-full bg-slate-150 p-0 text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
<i class="fa-solid fa-ellipsis"></i>
</button>
</div>
</div>
</div>
<div x-data="accordionItem('item-3')">
<div class="flex items-center justify-between">
<div class="flex space-x-4">
<div class="avatar h-10 w-10">
<div class="is-initial rounded-full bg-info text-sm+ uppercase text-white">
ds
</div>
</div>
<div>
<h3 class="font-medium text-slate-700 line-clamp-1 dark:text-navy-100">
Derrick Simmons
</h3>
<p class="mt-0.5 text-xs line-clamp-1">
(350)-813-3861
</p>
</div>
</div>
<button @click="expanded = !expanded"
class="btn h-7 w-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
<i :class="expanded && '-rotate-180'"
class="fas fa-chevron-down transition-transform"></i>
</button>
</div>
<div x-show="expanded" x-collapse>
<div class="flex justify-between pt-4">
<button
class="btn h-7 w-7 rounded-full bg-success/10 p-0 text-success hover:bg-success/20 focus:bg-success/20 active:bg-success/25">
<i class="fa-solid fa-phone text-xs"></i>
</button>
<button
class="btn h-7 w-7 rounded-full bg-warning/10 p-0 text-warning hover:bg-warning/20 focus:bg-warning/20 active:bg-warning/25">
<i class="fa-solid fa-video text-xs"></i>
</button>
<button
class="btn h-7 w-7 rounded-full bg-secondary/10 p-0 text-secondary hover:bg-secondary/20 focus:bg-secondary/20 active:bg-secondary/25 dark:bg-secondary-light/10 dark:text-secondary-light dark:hover:bg-secondary-light/20 dark:focus:bg-secondary-light/20 dark:active:bg-secondary-light/25">
<i class="fa-regular fa-comment text-xs"></i>
</button>
<button
class="btn h-7 w-7 rounded-full bg-info/10 p-0 text-info hover:bg-info/20 focus:bg-info/20 active:bg-info/25">
<i class="fa-regular fa-envelope text-xs"></i>
</button>
<button
class="btn h-7 w-7 rounded-full bg-slate-150 p-0 text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
<i class="fa-solid fa-ellipsis"></i>
</button>
</div>
</div>
</div>
<div x-data="accordionItem('item-4')">
<div class="flex items-center justify-between">
<div class="flex space-x-4">
<div class="avatar h-10 w-10">
<img class="rounded-full" src="{{ asset('images/200x200.png') }}"
alt="avatar" />
</div>
<div>
<h3 class="font-medium text-slate-700 line-clamp-1 dark:text-navy-100">
Henry Curtis
</h3>
<p class="mt-0.5 text-xs line-clamp-1">
(675)-975-0083
</p>
</div>
</div>
<button @click="expanded = !expanded"
class="btn h-7 w-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
<i :class="expanded && '-rotate-180'"
class="fas fa-chevron-down transition-transform"></i>
</button>
</div>
<div x-show="expanded" x-collapse>
<div class="flex justify-between pt-4">
<button
class="btn h-7 w-7 rounded-full bg-success/10 p-0 text-success hover:bg-success/20 focus:bg-success/20 active:bg-success/25">
<i class="fa-solid fa-phone text-xs"></i>
</button>
<button
class="btn h-7 w-7 rounded-full bg-warning/10 p-0 text-warning hover:bg-warning/20 focus:bg-warning/20 active:bg-warning/25">
<i class="fa-solid fa-video text-xs"></i>
</button>
<button
class="btn h-7 w-7 rounded-full bg-secondary/10 p-0 text-secondary hover:bg-secondary/20 focus:bg-secondary/20 active:bg-secondary/25 dark:bg-secondary-light/10 dark:text-secondary-light dark:hover:bg-secondary-light/20 dark:focus:bg-secondary-light/20 dark:active:bg-secondary-light/25">
<i class="fa-regular fa-comment text-xs"></i>
</button>
<button
class="btn h-7 w-7 rounded-full bg-info/10 p-0 text-info hover:bg-info/20 focus:bg-info/20 active:bg-info/25">
<i class="fa-regular fa-envelope text-xs"></i>
</button>
<button
class="btn h-7 w-7 rounded-full bg-slate-150 p-0 text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
<i class="fa-solid fa-ellipsis"></i>
</button>
</div>
</div>
</div>
<div x-data="accordionItem('item-5')">
<div class="flex items-center justify-between">
<div class="flex space-x-4">
<div class="avatar h-10 w-10">
<img class="rounded-full" src="{{ asset('images/200x200.png') }}"
alt="avatar" />
</div>
<div>
<h3 class="font-medium text-slate-700 line-clamp-1 dark:text-navy-100">
John Doe
</h3>
<p class="mt-0.5 text-xs line-clamp-1">
(727)-810-3880
</p>
</div>
</div>
<button @click="expanded = !expanded"
class="btn h-7 w-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
<i :class="expanded && '-rotate-180'"
class="fas fa-chevron-down transition-transform"></i>
</button>
</div>
<div x-show="expanded" x-collapse>
<div class="flex justify-between pt-4">
<button
class="btn h-7 w-7 rounded-full bg-success/10 p-0 text-success hover:bg-success/20 focus:bg-success/20 active:bg-success/25">
<i class="fa-solid fa-phone text-xs"></i>
</button>
<button
class="btn h-7 w-7 rounded-full bg-warning/10 p-0 text-warning hover:bg-warning/20 focus:bg-warning/20 active:bg-warning/25">
<i class="fa-solid fa-video text-xs"></i>
</button>
<button
class="btn h-7 w-7 rounded-full bg-secondary/10 p-0 text-secondary hover:bg-secondary/20 focus:bg-secondary/20 active:bg-secondary/25 dark:bg-secondary-light/10 dark:text-secondary-light dark:hover:bg-secondary-light/20 dark:focus:bg-secondary-light/20 dark:active:bg-secondary-light/25">
<i class="fa-regular fa-comment text-xs"></i>
</button>
<button
class="btn h-7 w-7 rounded-full bg-info/10 p-0 text-info hover:bg-info/20 focus:bg-info/20 active:bg-info/25">
<i class="fa-regular fa-envelope text-xs"></i>
</button>
<button
class="btn h-7 w-7 rounded-full bg-slate-150 p-0 text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
<i class="fa-solid fa-ellipsis"></i>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="card px-4 pb-4 sm:px-5">
<div class="my-3 flex h-8 items-center justify-between">
<h2 class="font-medium tracking-wide text-slate-700 dark:text-navy-100">
Recent Payments
</h2>
<a href="#"
class="border-b border-dotted border-current pb-0.5 text-xs+ font-medium text-primary outline-none transition-colors duration-300 hover:text-primary/70 focus:text-primary/70 dark:text-accent-light dark:hover:text-accent-light/70 dark:focus:text-accent-light/70">View
All</a>
</div>
<div class="space-y-3.5">
<div class="flex cursor-pointer items-center justify-between">
<div class="flex items-center space-x-3.5">
<div class="avatar">
<img class="rounded-full" src="{{ asset('images/200x200.png') }}"
alt="avatar" />
</div>
<div>
<p class="font-medium text-slate-700 dark:text-navy-100">
Konnor Guzman
</p>
<p class="text-xs text-slate-400 line-clamp-1 dark:text-navy-300">
Dec 21, 2021 - 08:05
</p>
</div>
</div>
<p class="font-medium text-slate-600 dark:text-navy-100">
$660.22
</p>
</div>
<div class="flex cursor-pointer items-center justify-between">
<div class="flex items-center space-x-3.5">
<div class="avatar">
<img class="rounded-full" src="{{ asset('images/200x200.png') }}"
alt="avatar" />
</div>
<div>
<p class="font-medium text-slate-700 dark:text-navy-100">
Henry Curtis
</p>
<p class="text-xs text-slate-400 line-clamp-1 dark:text-navy-300">
Dec 19, 2021 - 11:55
</p>
</div>
</div>
<p class="font-medium text-slate-600 dark:text-navy-100">
$33.63
</p>
</div>
<div class="flex cursor-pointer items-center justify-between">
<div class="flex items-center space-x-3.5">
<div class="avatar">
<img class="rounded-full" src="{{ asset('images/200x200.png') }}"
alt="avatar" />
</div>
<div>
<p class="font-medium text-slate-700 dark:text-navy-100">
Derrick Simmons
</p>
<p class="text-xs text-slate-400 line-clamp-1 dark:text-navy-300">
Dec 16, 2021 - 14:45
</p>
</div>
</div>
<p class="font-medium text-slate-600 dark:text-navy-100">
$674.63
</p>
</div>
<div class="flex cursor-pointer items-center justify-between">
<div class="flex items-center space-x-3.5">
<div class="avatar">
<img class="rounded-full" src="{{ asset('images/200x200.png') }}"
alt="avatar" />
</div>
<div>
<p class="font-medium text-slate-700 dark:text-navy-100">
Kartina West
</p>
<p class="text-xs text-slate-400 line-clamp-1 dark:text-navy-300">
Dec 13, 2021 - 11:30
</p>
</div>
</div>
<p class="font-medium text-slate-600 dark:text-navy-100">
$547.63
</p>
</div>
<div class="flex cursor-pointer items-center justify-between">
<div class="flex items-center space-x-3.5">
<div class="avatar">
<img class="rounded-full" src="{{ asset('images/200x200.png') }}"
alt="avatar" />
</div>
<div>
<p class="font-medium text-slate-700 dark:text-navy-100">
Samantha Shelton
</p>
<p class="text-xs text-slate-400 line-clamp-1 dark:text-navy-300">
Dec 10, 2021 - 09:41
</p>
</div>
</div>
<p class="font-medium text-slate-600 dark:text-navy-100">
$736.24
</p>
</div>
<div class="flex cursor-pointer items-center justify-between">
<div class="flex items-center space-x-3.5">
<div class="avatar">
<img class="rounded-full" src="{{ asset('images/200x200.png') }}"
alt="avatar" />
</div>
<div>
<p class="font-medium text-slate-700 dark:text-navy-100">
Joe Perkins
</p>
<p class="text-xs text-slate-400 line-clamp-1 dark:text-navy-300">
Dec 06, 2021 - 11:41
</p>
</div>
</div>
<p class="font-medium text-slate-600 dark:text-navy-100">
$736.24
</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-span-12 lg:col-span-4">
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-5 lg:grid-cols-1 lg:gap-6">
<div class="card px-4 pb-4 sm:px-5">
<div class="my-3 flex h-8 items-center justify-between">
<h2 class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100">
Client Messages
</h2>
<div x-data="usePopper({ placement: 'bottom-end', offset: 4 })" @click.outside="if(isShowPopper) isShowPopper = false"
class="inline-flex">
<button x-ref="popperRef" @click="isShowPopper = !isShowPopper"
class="btn -mr-1.5 h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
</svg>
</button>
<div x-ref="popperRoot" class="popper-root" :class="isShowPopper && 'show'">
<div
class="popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700">
<ul>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Action</a>
</li>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Another
Action</a>
</li>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Something
else</a>
</li>
</ul>
<div class="my-1 h-px bg-slate-150 dark:bg-navy-500"></div>
<ul>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Separated
Link</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="space-y-4">
<div class="flex cursor-pointer items-center justify-between space-x-2">
<div class="flex items-center space-x-3">
<div class="avatar">
<img class="rounded-full" src="{{ asset('images/200x200.png') }}"
alt="avatar" />
</div>
<div>
<div class="flex items-center space-x-2">
<p class="font-medium text-slate-700 dark:text-navy-100">
Konnor Guzman
</p>
<div
class="flex h-4.5 min-w-[1.125rem] items-center justify-center rounded-full bg-slate-200 px-1.5 text-tiny+ font-medium leading-none text-slate-800 dark:bg-navy-450 dark:text-white">
5
</div>
</div>
<p class="text-xs text-slate-400 line-clamp-1 dark:text-navy-300">
Hello Erick. Lorem ipsum dolor sit amet, consectetur.
</p>
</div>
</div>
<a href="#"
class="hover:text-primary focus:text-primary dark:hover:text-accent-light dark:focus:text-accent-light">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9 5l7 7-7 7" />
</svg>
</a>
</div>
<div class="flex cursor-pointer items-center justify-between space-x-2">
<div class="flex items-center space-x-3">
<div class="avatar">
<img class="rounded-full" src="{{ asset('images/200x200.png') }}"
alt="avatar" />
</div>
<div>
<p class="font-medium text-slate-700 dark:text-navy-100">
Travis Fuller
</p>
<p class="text-xs text-slate-400 line-clamp-1 dark:text-navy-300">
Excepturi magni sequi voluptate.
</p>
</div>
</div>
<a href="#"
class="hover:text-primary focus:text-primary dark:hover:text-accent-light dark:focus:text-accent-light">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9 5l7 7-7 7" />
</svg>
</a>
</div>
<div class="flex cursor-pointer items-center justify-between space-x-2">
<div class="flex items-center space-x-3">
<div class="avatar">
<img class="rounded-full" src="{{ asset('images/200x200.png') }}"
alt="avatar" />
</div>
<div>
<p class="font-medium text-slate-700 dark:text-navy-100">
Alfredo Elliott
</p>
<p class="text-xs text-slate-400 line-clamp-1 dark:text-navy-300">
Adipisicing eli itaque!
</p>
</div>
</div>
<a href="#"
class="hover:text-primary focus:text-primary dark:hover:text-accent-light dark:focus:text-accent-light">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9 5l7 7-7 7" />
</svg>
</a>
</div>
<div class="flex cursor-pointer items-center justify-between space-x-2">
<div class="flex items-center space-x-3">
<div class="avatar">
<img class="rounded-full" src="{{ asset('images/200x200.png') }}"
alt="avatar" />
</div>
<div>
<p class="font-medium text-slate-700 dark:text-navy-100">
Derrick Simmons
</p>
<p class="text-xs text-slate-400 line-clamp-1 dark:text-navy-300">
Ad hic minus repudiandae.
</p>
</div>
</div>
<a href="#"
class="hover:text-primary focus:text-primary dark:hover:text-accent-light dark:focus:text-accent-light">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9 5l7 7-7 7" />
</svg>
</a>
</div>
</div>
</div>
<div class="card">
<div class="mt-3 flex h-8 items-center justify-between px-4 sm:px-5">
<h2 class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100">
Income
</h2>
<div x-data="usePopper({ placement: 'bottom-end', offset: 4 })" @click.outside="if(isShowPopper) isShowPopper = false"
class="inline-flex">
<button x-ref="popperRef" @click="isShowPopper = !isShowPopper"
class="btn -mr-1.5 h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
</svg>
</button>
<div x-ref="popperRoot" class="popper-root" :class="isShowPopper && 'show'">
<div
class="popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700">
<ul>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Action</a>
</li>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Another
Action</a>
</li>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Something
else</a>
</li>
</ul>
<div class="my-1 h-px bg-slate-150 dark:bg-navy-500"></div>
<ul>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Separated
Link</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="ax-transparent-gridline pr-2">
<div x-init="$nextTick(() => {
$el._x_chart = new ApexCharts($el, pages.charts.incomePersonal);
$el._x_chart.render()
});"></div>
</div>
</div>
<div class="card p-4">
<div class="space-y-1 text-center font-inter text-xs+">
<div class="flex items-center justify-between px-2 pb-4">
<p class="font-medium text-slate-700 dark:text-navy-100">
January 2022
</p>
<div class="-mr-1.5 flex space-x-2">
<button
class="btn h-7 w-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
d="M15 19l-7-7 7-7" />
</svg>
</button>
<button
class="btn h-7 w-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
d="M9 5l7 7-7 7" />
</svg>
</button>
</div>
</div>
<div class="grid grid-cols-7 pb-2">
<div class="text-tiny+ font-semibold text-primary dark:text-accent-light">
SUN
</div>
<div class="text-tiny+ font-semibold text-primary dark:text-accent-light">
MON
</div>
<div class="text-tiny+ font-semibold text-primary dark:text-accent-light">
TUE
</div>
<div class="text-tiny+ font-semibold text-primary dark:text-accent-light">
WED
</div>
<div class="text-tiny+ font-semibold text-primary dark:text-accent-light">
THU
</div>
<div class="text-tiny+ font-semibold text-primary dark:text-accent-light">
FRY
</div>
<div class="text-tiny+ font-semibold text-primary dark:text-accent-light">
SAT
</div>
</div>
<div class="grid grid-cols-7 place-items-center">
<button
class="flex h-7 w-9 items-center justify-center rounded-xl text-slate-400 hover:bg-primary/10 hover:text-primary dark:text-navy-300 dark:hover:bg-accent-light/10 dark:hover:text-accent-light">
29
</button>
<button
class="flex h-7 w-9 items-center justify-center rounded-xl text-slate-400 hover:bg-primary/10 hover:text-primary dark:text-navy-300 dark:hover:bg-accent-light/10 dark:hover:text-accent-light">
30
</button>
<button
class="flex h-7 w-9 items-center justify-center rounded-xl text-slate-400 hover:bg-primary/10 hover:text-primary dark:text-navy-300 dark:hover:bg-accent-light/10 dark:hover:text-accent-light">
31
</button>
<button
class="flex h-7 w-9 items-center justify-center rounded-xl text-slate-900 hover:bg-primary/10 hover:text-primary dark:text-navy-100 dark:hover:bg-accent-light/10 dark:hover:text-accent-light">
1
</button>
<button
class="flex h-7 w-9 items-center justify-center rounded-xl text-slate-900 hover:bg-primary/10 hover:text-primary dark:text-navy-100 dark:hover:bg-accent-light/10 dark:hover:text-accent-light">
2
</button>
<button
class="flex h-7 w-9 items-center justify-center rounded-xl text-slate-900 hover:bg-primary/10 hover:text-primary dark:text-navy-100 dark:hover:bg-accent-light/10 dark:hover:text-accent-light">
3
</button>
<button
class="flex h-7 w-9 items-center justify-center rounded-xl text-slate-900 hover:bg-primary/10 hover:text-primary dark:text-navy-100 dark:hover:bg-accent-light/10 dark:hover:text-accent-light">
4
</button>
</div>
<div class="grid grid-cols-7 place-items-center">
<button
class="flex h-7 w-9 items-center justify-center rounded-xl text-slate-900 hover:bg-primary/10 hover:text-primary dark:text-navy-100 dark:hover:bg-accent-light/10 dark:hover:text-accent-light">
5
</button>
<button
class="flex h-7 w-9 items-center justify-center rounded-xl text-slate-900 hover:bg-primary/10 hover:text-primary dark:text-navy-100 dark:hover:bg-accent-light/10 dark:hover:text-accent-light">
6
</button>
<button
class="flex h-7 w-9 items-center justify-center rounded-xl text-slate-900 hover:bg-primary/10 hover:text-primary dark:text-navy-100 dark:hover:bg-accent-light/10 dark:hover:text-accent-light">
7
</button>
<button
class="flex h-7 w-9 items-center justify-center rounded-xl text-slate-900 hover:bg-primary/10 hover:text-primary dark:text-navy-100 dark:hover:bg-accent-light/10 dark:hover:text-accent-light">
8
</button>
<button
class="flex h-7 w-9 items-center justify-center rounded-xl text-slate-900 hover:bg-primary/10 hover:text-primary dark:text-navy-100 dark:hover:bg-accent-light/10 dark:hover:text-accent-light">
9
</button>
<button
class="flex h-7 w-9 items-center justify-center rounded-xl text-slate-900 hover:bg-primary/10 hover:text-primary dark:text-navy-100 dark:hover:bg-accent-light/10 dark:hover:text-accent-light">
10
</button>
<button
class="flex h-7 w-9 items-center justify-center rounded-xl text-slate-900 hover:bg-primary/10 hover:text-primary dark:text-navy-100 dark:hover:bg-accent-light/10 dark:hover:text-accent-light">
11
</button>
</div>
<div class="grid grid-cols-7 place-items-center">
<button
class="flex h-7 w-9 items-center justify-center rounded-xl text-slate-900 hover:bg-primary/10 hover:text-primary dark:text-navy-100 dark:hover:bg-accent-light/10 dark:hover:text-accent-light">
12
</button>
<button
class="flex h-7 w-9 items-center justify-center rounded-xl text-slate-900 hover:bg-primary/10 hover:text-primary dark:text-navy-100 dark:hover:bg-accent-light/10 dark:hover:text-accent-light">
13
</button>
<button
class="flex h-7 w-9 items-center justify-center rounded-xl font-medium text-primary hover:bg-primary/10 hover:text-primary dark:text-accent-light dark:hover:bg-accent-light/10 dark:hover:text-accent-light">
14
</button>
<button
class="flex h-7 w-9 items-center justify-center rounded-xl text-slate-900 hover:bg-primary/10 hover:text-primary dark:text-navy-100 dark:hover:bg-accent-light/10 dark:hover:text-accent-light">
15
</button>
<button
class="flex h-7 w-9 items-center justify-center rounded-xl text-slate-900 hover:bg-primary/10 hover:text-primary dark:text-navy-100 dark:hover:bg-accent-light/10 dark:hover:text-accent-light">
16
</button>
<button
class="flex h-7 w-9 items-center justify-center rounded-xl text-slate-900 hover:bg-primary/10 hover:text-primary dark:text-navy-100 dark:hover:bg-accent-light/10 dark:hover:text-accent-light">
17
</button>
<button
class="flex h-7 w-9 items-center justify-center rounded-xl text-slate-900 hover:bg-primary/10 hover:text-primary dark:text-navy-100 dark:hover:bg-accent-light/10 dark:hover:text-accent-light">
18
</button>
</div>
<div class="grid grid-cols-7 place-items-center">
<button
class="flex h-7 w-9 items-center justify-center rounded-xl text-slate-900 hover:bg-primary/10 hover:text-primary dark:text-navy-100 dark:hover:bg-accent-light/10 dark:hover:text-accent-light">
19
</button>
<button
class="flex h-7 w-9 items-center justify-center rounded-xl text-slate-900 hover:bg-primary/10 hover:text-primary dark:text-navy-100 dark:hover:bg-accent-light/10 dark:hover:text-accent-light">
20
</button>
<button
class="flex h-7 w-9 items-center justify-center rounded-xl text-slate-900 hover:bg-primary/10 hover:text-primary dark:text-navy-100 dark:hover:bg-accent-light/10 dark:hover:text-accent-light">
21
</button>
<button
class="flex h-7 w-9 items-center justify-center rounded-xl text-slate-900 hover:bg-primary/10 hover:text-primary dark:text-navy-100 dark:hover:bg-accent-light/10 dark:hover:text-accent-light">
22
</button>
<button
class="flex h-7 w-9 items-center justify-center rounded-xl text-slate-900 hover:bg-primary/10 hover:text-primary dark:text-navy-100 dark:hover:bg-accent-light/10 dark:hover:text-accent-light">
23
</button>
<button
class="flex h-7 w-9 items-center justify-center rounded-xl text-slate-900 hover:bg-primary/10 hover:text-primary dark:text-navy-100 dark:hover:bg-accent-light/10 dark:hover:text-accent-light">
24
</button>
<button
class="flex h-7 w-9 items-center justify-center rounded-xl text-slate-900 hover:bg-primary/10 hover:text-primary dark:text-navy-100 dark:hover:bg-accent-light/10 dark:hover:text-accent-light">
25
</button>
</div>
<div class="grid grid-cols-7 place-items-center">
<button
class="flex h-7 w-9 items-center justify-center rounded-xl text-slate-900 hover:bg-primary/10 hover:text-primary dark:text-navy-100 dark:hover:bg-accent-light/10 dark:hover:text-accent-light">
26
</button>
<button
class="flex h-7 w-9 items-center justify-center rounded-xl text-slate-900 hover:bg-primary/10 hover:text-primary dark:text-navy-100 dark:hover:bg-accent-light/10 dark:hover:text-accent-light">
27
</button>
<button
class="flex h-7 w-9 items-center justify-center rounded-xl text-slate-900 hover:bg-primary/10 hover:text-primary dark:text-navy-100 dark:hover:bg-accent-light/10 dark:hover:text-accent-light">
28
</button>
<button
class="flex h-7 w-9 items-center justify-center rounded-xl text-slate-900 hover:bg-primary/10 hover:text-primary dark:text-navy-100 dark:hover:bg-accent-light/10 dark:hover:text-accent-light">
29
</button>
<button
class="flex h-7 w-9 items-center justify-center rounded-xl text-slate-900 hover:bg-primary/10 hover:text-primary dark:text-navy-100 dark:hover:bg-accent-light/10 dark:hover:text-accent-light">
30
</button>
<button
class="flex h-7 w-9 items-center justify-center rounded-xl text-slate-400 hover:bg-primary/10 hover:text-primary dark:text-navy-300 dark:hover:bg-accent-light/10 dark:hover:text-accent-light">
1
</button>
<button
class="flex h-7 w-9 items-center justify-center rounded-xl text-slate-400 hover:bg-primary/10 hover:text-primary dark:text-navy-300 dark:hover:bg-accent-light/10 dark:hover:text-accent-light">
2
</button>
</div>
</div>
</div>
<div class="card">
<div>
<div class="swiper" x-init="$nextTick(() => $el._x_swiper = new Swiper($el, { pagination: { el: '.swiper-pagination', clickable: true } }))">
<div class="swiper-wrapper">
<div class="swiper-slide p-4 sm:p-5">
<div class="flex items-center justify-between">
<a href="#"
class="font-inter font-medium tracking-wide transition-colors hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100">
@twitteraccount
</a>
<i class="fa-brands fa-twitter"></i>
</div>
<p class="mt-3 text-xs+">
Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Doloremque eaque iste libero neque.
</p>
<div class="mt-2 pb-5 text-xs">
<a href="#"
class="text-xs+ text-primary hover:text-primary-focus dark:text-accent-light dark:hover:text-accent">#PHP
</a>
<a href="#"
class="text-xs+ text-primary hover:text-primary-focus dark:text-accent-light dark:hover:text-accent">#ReactJS
</a>
<a href="#"
class="text-xs+ text-primary hover:text-primary-focus dark:text-accent-light dark:hover:text-accent">#NextJS
</a>
</div>
</div>
<div class="swiper-slide p-4 sm:p-5">
<div class="flex items-center justify-between">
<a href="#"
class="font-inter font-medium tracking-wide transition-colors hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100">
@twitteraccount
</a>
<i class="fa-brands fa-twitter"></i>
</div>
<p class="mt-3 text-xs+">
Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Doloremque eaque iste libero neque.
</p>
<div class="mt-2 pb-5 text-xs">
<a href="#"
class="text-xs+ text-primary hover:text-primary-focus dark:text-accent-light dark:hover:text-accent">#PHP
</a>
<a href="#"
class="text-xs+ text-primary hover:text-primary-focus dark:text-accent-light dark:hover:text-accent">#ReactJS
</a>
<a href="#"
class="text-xs+ text-primary hover:text-primary-focus dark:text-accent-light dark:hover:text-accent">#NextJS
</a>
</div>
</div>
<div class="swiper-slide p-4 sm:p-5">
<div class="flex items-center justify-between">
<a href="#"
class="font-inter font-medium tracking-wide transition-colors hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100">
@twitteraccount
</a>
<i class="fa-brands fa-twitter"></i>
</div>
<p class="mt-3 text-xs+">
Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Doloremque eaque iste libero neque.
</p>
<div class="mt-2 pb-5 text-xs">
<a href="#"
class="text-xs+ text-primary hover:text-primary-focus dark:text-accent-light dark:hover:text-accent">#PHP
</a>
<a href="#"
class="text-xs+ text-primary hover:text-primary-focus dark:text-accent-light dark:hover:text-accent">#ReactJS
</a>
<a href="#"
class="text-xs+ text-primary hover:text-primary-focus dark:text-accent-light dark:hover:text-accent">#NextJS
</a>
</div>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</x-app-layout>
resources/views/pages/dashboards-project-boards.blade.php deleted 100644 → 0
View file @ 5bad2db9
<x-app-layout title="Project Board" is-header-blur="true">
<!-- Main Content Wrapper -->
<main class="main-content w-full px-[var(--margin-x)] pb-8">
<div
class="mt-6 flex flex-col items-center justify-between space-y-2 text-center sm:flex-row sm:space-y-0 sm:text-left">
<div>
<h3 class="text-xl font-semibold text-slate-700 dark:text-navy-100">
Projects Board
</h3>
<p class="mt-1 hidden sm:block">List of your ongoing projects</p>
</div>
<button
class="btn space-x-2 bg-primary font-medium text-white shadow-lg shadow-primary/50 hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:shadow-accent/50 dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-indigo-50" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
</svg>
<span> New Project </span>
</button>
</div>
<div class="mt-8 grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-5 lg:grid-cols-3 lg:gap-6 xl:grid-cols-4">
<div class="card shadow-none">
<div class="flex flex-1 flex-col justify-between rounded-lg bg-warning p-4 sm:p-5">
<div>
<div class="flex items-start justify-between">
<img class="h-12 w-12 rounded-lg object-cover object-center"
src="{{ asset('images/800x600.png') }}" alt="image" />
<p class="text-xs+ text-amber-50">May 01, 2021</p>
</div>
<h3 class="mt-3 font-medium text-white line-clamp-2">
Mobile App
</h3>
<p class="text-xs+ text-amber-50">Prototyping</p>
</div>
<div>
<div class="mt-4">
<p class="text-xs+ text-white">Progress</p>
<div class="progress my-2 h-1.5 bg-white/30">
<span class="w-8/12 rounded-full bg-white"></span>
</div>
<p class="text-right text-xs+ font-medium text-white">78%</p>
</div>
<div class="mt-5 flex flex-wrap -space-x-3">
<div class="avatar h-8 w-8 hover:z-10">
<img class="rounded-full border-2 border-warning"
src="{{ asset('images/200x200.png') }}" alt="avatar" />
</div>
<div class="avatar h-8 w-8 hover:z-10">
<div
class="is-initial rounded-full border-2 border-warning bg-info text-xs+ uppercase text-white">
jd
</div>
</div>
<div class="avatar h-8 w-8 hover:z-10">
<img class="rounded-full border-2 border-warning"
src="{{ asset('images/200x200.png') }}" alt="avatar" />
</div>
<div class="avatar h-8 w-8 hover:z-10">
<img class="rounded-full border-2 border-warning"
src="{{ asset('images/200x200.png') }}" alt="avatar" />
</div>
</div>
<div class="mt-4 flex items-center justify-between space-x-2">
<div class="badge h-5.5 rounded-full bg-black/20 px-2 text-xs+ text-white">
1 week left
</div>
<div>
<button
class="btn -mr-1.5 h-8 w-8 rounded-full p-0 text-white hover:bg-white/20 focus:bg-white/20 active:bg-white/25">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round"
d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
<path stroke-linecap="round" stroke-linejoin="round"
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="card shadow-none">
<div class="flex flex-1 flex-col justify-between rounded-lg bg-info/15 p-4 dark:bg-transparent sm:p-5">
<div>
<div class="flex items-start justify-between">
<img class="h-12 w-12 rounded-lg object-cover object-center"
src="{{ asset('images/800x600.png') }}" alt="image" />
<p class="text-xs+">June 04, 2021</p>
</div>
<h3 class="mt-3 font-medium text-slate-700 line-clamp-2 dark:text-navy-100">
Design Learn Management System
</h3>
<p class="text-xs+">UI/UX Design</p>
</div>
<div>
<div class="mt-4">
<p class="text-xs+ text-slate-700 dark:text-navy-100">
Progress
</p>
<div class="progress my-2 h-1.5 bg-info/15 dark:bg-info/25">
<div class="w-4/12 rounded-full bg-info"></div>
</div>
<p class="text-right text-xs+ font-medium text-info">25%</p>
</div>
<div class="mt-5 flex flex-wrap -space-x-3">
<div class="avatar h-8 w-8 hover:z-10">
<img class="rounded-full border-2 border-white dark:border-navy-700"
src="{{ asset('images/200x200.png') }}" alt="avatar" />
</div>
<div class="avatar h-8 w-8 hover:z-10">
<div
class="is-initial rounded-full border-2 border-white bg-warning text-xs+ uppercase text-white dark:border-navy-700">
ii
</div>
</div>
<div class="avatar h-8 w-8 hover:z-10">
<img class="rounded-full border-2 border-white dark:border-navy-700"
src="{{ asset('images/200x200.png') }}" alt="avatar" />
</div>
<div class="avatar h-8 w-8 hover:z-10">
<img class="rounded-full border-2 border-white dark:border-navy-700"
src="{{ asset('images/200x200.png') }}" alt="avatar" />
</div>
</div>
<div class="mt-4 flex items-center justify-between space-x-2">
<div class="badge h-5.5 rounded-full bg-info px-2 text-xs+ text-white">
2 week left
</div>
<div>
<button
class="btn -mr-1.5 h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round"
d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
<path stroke-linecap="round" stroke-linejoin="round"
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="card shadow-none">
<div
class="flex flex-1 flex-col justify-between rounded-lg bg-secondary/15 p-4 dark:bg-transparent sm:p-5">
<div>
<div class="flex items-start justify-between">
<img class="h-12 w-12 rounded-lg object-cover object-center"
src="{{ asset('images/illustrations/chat-ui.svg') }}" alt="image" />
<p class="text-xs+">Oct 27, 2021</p>
</div>
<h3 class="mt-3 font-medium text-slate-700 line-clamp-2 dark:text-navy-100">
Chat Mobile App
</h3>
<p class="text-xs+">Prototyping</p>
</div>
<div>
<div class="mt-4">
<p class="text-xs+ text-slate-700 dark:text-navy-100">
Progress
</p>
<div class="progress my-2 h-1.5 bg-secondary/15 dark:bg-secondary/25">
<div class="w-6/12 rounded-full bg-secondary"></div>
</div>
<p class="text-right text-xs+ font-medium text-secondary">
52%
</p>
</div>
<div class="mt-5 flex flex-wrap -space-x-3">
<div class="avatar h-8 w-8 hover:z-10">
<img class="rounded-full border-2 border-white dark:border-navy-700"
src="{{ asset('images/200x200.png') }}" alt="avatar" />
</div>
<div class="avatar h-8 w-8 hover:z-10">
<div
class="is-initial rounded-full border-2 border-white bg-error text-xs+ uppercase text-white dark:border-navy-700">
pl
</div>
</div>
<div class="avatar h-8 w-8 hover:z-10">
<img class="rounded-full border-2 border-white dark:border-navy-700"
src="{{ asset('images/200x200.png') }}" alt="avatar" />
</div>
<div class="avatar h-8 w-8 hover:z-10">
<img class="rounded-full border-2 border-white dark:border-navy-700"
src="{{ asset('images/200x200.png') }}" alt="avatar" />
</div>
</div>
<div class="mt-4 flex items-center justify-between space-x-2">
<div class="badge h-5.5 rounded-full bg-secondary px-2 text-xs+ text-white">
6 week left
</div>
<div>
<button
class="btn -mr-1.5 h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round"
d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
<path stroke-linecap="round" stroke-linejoin="round"
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="card shadow-none">
<div
class="flex flex-1 flex-col justify-between rounded-lg bg-success/15 p-4 dark:bg-transparent sm:p-5">
<div>
<div class="flex items-start justify-between">
<img class="h-12 w-12 rounded-lg object-cover object-center"
src="{{ asset('images/illustrations/store-ui.svg') }}" alt="image" />
<p class="text-xs+">Sep 16, 2021</p>
</div>
<h3 class="mt-3 font-medium text-slate-700 line-clamp-2 dark:text-navy-100">
Store Dashboard
</h3>
<p class="text-xs+">UI/UX Design</p>
</div>
<div>
<div class="mt-4">
<p class="text-xs+ text-slate-700 dark:text-navy-100">
Progress
</p>
<div class="progress my-2 h-1.5 bg-success/15 dark:bg-success/25">
<div class="w-4/12 rounded-full bg-success"></div>
</div>
<p class="text-right text-xs+ font-medium text-success">
33%
</p>
</div>
<div class="mt-5 flex flex-wrap -space-x-3">
<div class="avatar h-8 w-8 hover:z-10">
<img class="rounded-full border-2 border-white dark:border-navy-700"
src="{{ asset('images/200x200.png') }}" alt="avatar" />
</div>
<div class="avatar h-8 w-8 hover:z-10">
<div
class="is-initial rounded-full border-2 border-white bg-success text-xs+ uppercase text-white dark:border-navy-700">
rt
</div>
</div>
<div class="avatar h-8 w-8 hover:z-10">
<img class="rounded-full border-2 border-white dark:border-navy-700"
src="{{ asset('images/200x200.png') }}" alt="avatar" />
</div>
<div class="avatar h-8 w-8 hover:z-10">
<img class="rounded-full border-2 border-white dark:border-navy-700"
src="{{ asset('images/200x200.png') }}" alt="avatar" />
</div>
</div>
<div class="mt-4 flex items-center justify-between space-x-2">
<div class="badge h-5.5 rounded-full bg-success px-2 text-xs+ text-white">
3 week left
</div>
<div>
<button
class="btn -mr-1.5 h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round"
d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
<path stroke-linecap="round" stroke-linejoin="round"
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="card shadow-none">
<div
class="flex flex-1 flex-col justify-between rounded-lg bg-error/15 p-4 dark:bg-transparent sm:p-5">
<div>
<div class="flex items-start justify-between">
<img class="h-12 w-12 rounded-lg object-cover object-center"
src="{{ asset('images/illustrations/nft.svg') }}" alt="image" />
<p class="text-xs+">Jan 03, 2021</p>
</div>
<h3 class="mt-3 font-medium text-slate-700 line-clamp-2 dark:text-navy-100">
NFT Marketplace App
</h3>
<p class="text-xs+">Prototyping</p>
</div>
<div>
<div class="mt-4">
<p class="text-xs+ text-slate-700 dark:text-navy-100">
Progress
</p>
<div class="progress my-2 h-1.5 bg-error/15 dark:bg-error/25">
<div class="w-6/12 rounded-full bg-error"></div>
</div>
<p class="text-right text-xs+ font-medium text-error">54%</p>
</div>
<div class="mt-5 flex flex-wrap -space-x-3">
<div class="avatar h-8 w-8 hover:z-10">
<img class="rounded-full border-2 border-white dark:border-navy-700"
src="{{ asset('images/200x200.png') }}" alt="avatar" />
</div>
<div class="avatar h-8 w-8 hover:z-10">
<div
class="is-initial rounded-full border-2 border-white bg-warning text-xs+ uppercase text-white dark:border-navy-700">
ew
</div>
</div>
<div class="avatar h-8 w-8 hover:z-10">
<img class="rounded-full border-2 border-white dark:border-navy-700"
src="{{ asset('images/200x200.png') }}" alt="avatar" />
</div>
<div class="avatar h-8 w-8 hover:z-10">
<img class="rounded-full border-2 border-white dark:border-navy-700"
src="{{ asset('images/200x200.png') }}" alt="avatar" />
</div>
</div>
<div class="mt-4 flex items-center justify-between space-x-2">
<div class="badge h-5.5 rounded-full bg-error px-2 text-xs+ text-white">
1 week left
</div>
<div>
<button
class="btn -mr-1.5 h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round"
d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
<path stroke-linecap="round" stroke-linejoin="round"
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="card shadow-none">
<div
class="flex flex-1 flex-col justify-between rounded-lg bg-primary/15 p-4 dark:bg-transparent sm:p-5">
<div>
<div class="flex items-start justify-between">
<img class="h-12 w-12 rounded-lg object-cover object-center"
src="{{ asset('images/800x600.png') }}" alt="image" />
<p class="text-xs+">May 09, 2021</p>
</div>
<h3 class="mt-3 font-medium text-slate-700 line-clamp-2 dark:text-navy-100">
Mobile App
</h3>
<p class="text-xs+">Prototyping</p>
</div>
<div>
<div class="mt-4">
<p class="text-xs+ text-slate-700 dark:text-navy-100">
Progress
</p>
<div class="progress my-2 h-1.5 bg-primary/15 dark:bg-accent/25">
<div class="w-6/12 rounded-full bg-primary dark:bg-accent"></div>
</div>
<p class="text-right text-xs+ font-medium text-primary dark:text-accent-light">
52%
</p>
</div>
<div class="mt-5 flex flex-wrap -space-x-3">
<div class="avatar h-8 w-8 hover:z-10">
<img class="rounded-full border-2 border-white dark:border-navy-700"
src="{{ asset('images/200x200.png') }}" alt="avatar" />
</div>
<div class="avatar h-8 w-8 hover:z-10">
<div
class="is-initial rounded-full border-2 border-white bg-info text-xs+ uppercase text-white dark:border-navy-700">
vf
</div>
</div>
<div class="avatar h-8 w-8 hover:z-10">
<img class="rounded-full border-2 border-white dark:border-navy-700"
src="{{ asset('images/200x200.png') }}" alt="avatar" />
</div>
<div class="avatar h-8 w-8 hover:z-10">
<img class="rounded-full border-2 border-white dark:border-navy-700"
src="{{ asset('images/200x200.png') }}" alt="avatar" />
</div>
</div>
<div class="mt-4 flex items-center justify-between space-x-2">
<div class="badge h-5.5 rounded-full bg-primary px-2 text-xs+ text-white dark:bg-accent">
3 week left
</div>
<div>
<button
class="btn -mr-1.5 h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round"
d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
<path stroke-linecap="round" stroke-linejoin="round"
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="card shadow-none">
<div
class="flex flex-1 flex-col justify-between rounded-lg bg-warning/15 p-4 dark:bg-transparent sm:p-5">
<div>
<div class="flex items-start justify-between">
<img class="h-12 w-12 rounded-lg object-cover object-center"
src="{{ asset('images/illustrations/lms-ui.svg') }}" alt="image" />
<p class="text-xs+">Jan 03, 2021</p>
</div>
<h3 class="mt-3 font-medium text-slate-700 line-clamp-2 dark:text-navy-100">
LMS App Design
</h3>
<p class="text-xs+">UI/UX Design</p>
</div>
<div>
<div class="mt-4">
<p class="text-xs+ text-slate-700 dark:text-navy-100">
Progress
</p>
<div class="progress my-2 h-1.5 bg-warning/15 dark:bg-warning/25">
<div class="w-9/12 rounded-full bg-warning"></div>
</div>
<p class="text-right text-xs+ font-medium text-warning">
78%
</p>
</div>
<div class="mt-5 flex flex-wrap -space-x-3">
<div class="avatar h-8 w-8 hover:z-10">
<img class="rounded-full border-2 border-white dark:border-navy-700"
src="{{ asset('images/200x200.png') }}" alt="avatar" />
</div>
<div class="avatar h-8 w-8 hover:z-10">
<div
class="is-initial rounded-full border-2 border-white bg-info text-xs+ uppercase text-white dark:border-navy-700">
po
</div>
</div>
<div class="avatar h-8 w-8 hover:z-10">
<img class="rounded-full border-2 border-white dark:border-navy-700"
src="{{ asset('images/200x200.png') }}" alt="avatar" />
</div>
<div class="avatar h-8 w-8 hover:z-10">
<img class="rounded-full border-2 border-white dark:border-navy-700"
src="{{ asset('images/200x200.png') }}" alt="avatar" />
</div>
</div>
<div class="mt-4 flex items-center justify-between space-x-2">
<div class="badge h-5.5 rounded-full bg-warning px-2 text-xs+ text-white">
2 week left
</div>
<div>
<button
class="btn -mr-1.5 h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round"
d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
<path stroke-linecap="round" stroke-linejoin="round"
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="card shadow-none">
<div class="flex flex-1 flex-col justify-between rounded-lg bg-info/15 p-4 dark:bg-transparent sm:p-5">
<div>
<div class="flex items-start justify-between">
<img class="h-12 w-12 rounded-lg object-cover object-center"
src="{{ asset('images/800x600.png') }}" alt="image" />
<p class="text-xs+">June 04, 2021</p>
</div>
<h3 class="mt-3 font-medium text-slate-700 line-clamp-2 dark:text-navy-100">
Design Learn Management System
</h3>
<p class="text-xs+">UI/UX Design</p>
</div>
<div>
<div class="mt-4">
<p class="text-xs+ text-slate-700 dark:text-navy-100">
Progress
</p>
<div class="progress my-2 h-1.5 bg-info/15 dark:bg-info/25">
<div class="w-4/12 rounded-full bg-info"></div>
</div>
<p class="text-right text-xs+ font-medium text-info">25%</p>
</div>
<div class="mt-5 flex flex-wrap -space-x-3">
<div class="avatar h-8 w-8 hover:z-10">
<img class="rounded-full border-2 border-white dark:border-navy-700"
src="{{ asset('images/200x200.png') }}" alt="avatar" />
</div>
<div class="avatar h-8 w-8 hover:z-10">
<div
class="is-initial rounded-full border-2 border-white bg-warning text-xs+ uppercase text-white dark:border-navy-700">
ii
</div>
</div>
<div class="avatar h-8 w-8 hover:z-10">
<img class="rounded-full border-2 border-white dark:border-navy-700"
src="{{ asset('images/200x200.png') }}" alt="avatar" />
</div>
<div class="avatar h-8 w-8 hover:z-10">
<img class="rounded-full border-2 border-white dark:border-navy-700"
src="{{ asset('images/200x200.png') }}" alt="avatar" />
</div>
</div>
<div class="mt-4 flex items-center justify-between space-x-2">
<div class="badge h-5.5 rounded-full bg-info px-2 text-xs+ text-white">
2 week left
</div>
<div>
<button
class="btn -mr-1.5 h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round"
d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
<path stroke-linecap="round" stroke-linejoin="round"
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</x-app-layout>
resources/views/pages/dashboards-teacher.blade.php deleted 100644 → 0
View file @ 5bad2db9
<x-app-layout title="Teacher Dashboard" is-header-blur="true">
<!-- Main Content Wrapper -->
<main class="main-content w-full px-[var(--margin-x)] pb-8">
<div class="mt-4 grid grid-cols-12 gap-4 sm:mt-5 sm:gap-5 lg:mt-6 lg:gap-6">
<div class="col-span-12 lg:col-span-8 xl:col-span-9">
<div :class="$store.breakpoints.smAndUp && 'via-purple-300'"
class="card mt-12 bg-gradient-to-l from-pink-300 to-indigo-400 p-5 sm:mt-0 sm:flex-row">
<div class="flex justify-center sm:order-last">
<img class="-mt-16 h-40 sm:mt-0" src="{{ asset('images/illustrations/teacher.svg') }}"
alt="" />
</div>
<div class="mt-2 flex-1 pt-2 text-center text-white sm:mt-0 sm:text-left">
<h3 class="text-xl">
Welcome Back, <span class="font-semibold">Caleb</span>
</h3>
<p class="mt-2 leading-relaxed">
Your student completed
<span class="font-semibold text-navy-700">85%</span> of tasks
</p>
<p>Progress is <span class="font-semibold">excellent!</span></p>
<button
class="btn mt-6 bg-slate-50 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80">
View Lessons
</button>
</div>
</div>
<div class="mt-4 sm:mt-5 lg:mt-6">
<div class="flex h-8 items-center justify-between">
<h2 class="text-base font-medium tracking-wide text-slate-700 dark:text-navy-100">
Week 2 Classes
</h2>
<a href="#"
class="border-b border-dotted border-current pb-0.5 text-xs+ font-medium text-primary outline-none transition-colors duration-300 hover:text-primary/70 focus:text-primary/70 dark:text-accent-light dark:hover:text-accent-light/70 dark:focus:text-accent-light/70">View
All</a>
</div>
<div class="mt-3 grid grid-cols-1 gap-4 sm:grid-cols-3 sm:gap-5">
<div class="card flex-row overflow-hidden">
<div class="h-full w-1 bg-gradient-to-b from-blue-500 to-purple-600"></div>
<div class="flex flex-1 flex-col justify-between p-4 sm:px-5">
<div>
<img class="h-12 w-12 rounded-lg object-cover object-center"
src="{{ asset('images/800x600.png') }}" alt="image" />
<h3 class="mt-3 font-medium text-slate-700 line-clamp-2 dark:text-navy-100">
Basic English
</h3>
<p class="text-xs+">Mon. 08:00 - 09:00</p>
<div class="mt-2 flex space-x-1.5">
<a href="#"
class="tag bg-primary py-1 px-1.5 text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90">
Language
</a>
</div>
</div>
<div class="mt-10 flex justify-between">
<div class="flex -space-x-2">
<div class="avatar h-7 w-7 hover:z-10">
<img class="rounded-full ring ring-white dark:ring-navy-700"
src="{{ asset('images/200x200.png') }}" alt="avatar" />
</div>
<div class="avatar h-7 w-7 hover:z-10">
<div
class="is-initial rounded-full bg-info text-xs+ uppercase text-white ring ring-white dark:ring-navy-700">
jd
</div>
</div>
<div class="avatar h-7 w-7 hover:z-10">
<img class="rounded-full ring ring-white dark:ring-navy-700"
src="{{ asset('images/200x200.png') }}" alt="avatar" />
</div>
</div>
<button
class="btn h-7 w-7 rounded-full bg-slate-150 p-0 font-medium text-slate-800 hover:bg-slate-200 hover:shadow-lg hover:shadow-slate-200/50 focus:bg-slate-200 focus:shadow-lg focus:shadow-slate-200/50 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:hover:shadow-navy-450/50 dark:focus:bg-navy-450 dark:focus:shadow-navy-450/50 dark:active:bg-navy-450/90">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 rotate-45" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M7 11l5-5m0 0l5 5m-5-5v12" />
</svg>
</button>
</div>
</div>
</div>
<div class="card flex-row overflow-hidden">
<div class="h-full w-1 bg-gradient-to-b from-info to-info-focus"></div>
<div class="flex flex-1 flex-col justify-between p-4 sm:px-5">
<div>
<img class="h-12 w-12 rounded-lg object-cover object-center"
src="{{ asset('images/800x600.png') }}" alt="image" />
<h3 class="mt-3 font-medium text-slate-700 line-clamp-2 dark:text-navy-100">
Learn UI/UX Design
</h3>
<p class="text-xs+">Tue. 10:00 - 11:30</p>
<div class="mt-2 flex space-x-1.5">
<a href="#"
class="tag bg-info py-1 px-1.5 text-white hover:bg-info-focus focus:bg-info-focus active:bg-info-focus/90">
UI/UX Design
</a>
</div>
</div>
<div class="mt-10 flex justify-between">
<div class="flex -space-x-2">
<div class="avatar h-7 w-7 hover:z-10">
<img class="rounded-full ring ring-white dark:ring-navy-700"
src="{{ asset('images/200x200.png') }}" alt="avatar" />
</div>
<div class="avatar h-7 w-7 hover:z-10">
<div
class="is-initial rounded-full bg-warning text-xs+ uppercase text-white ring ring-white dark:ring-navy-700">
iu
</div>
</div>
<div class="avatar h-7 w-7 hover:z-10">
<img class="rounded-full ring ring-white dark:ring-navy-700"
src="{{ asset('images/200x200.png') }}" alt="avatar" />
</div>
</div>
<button
class="btn h-7 w-7 rounded-full bg-slate-150 p-0 font-medium text-slate-800 hover:bg-slate-200 hover:shadow-lg hover:shadow-slate-200/50 focus:bg-slate-200 focus:shadow-lg focus:shadow-slate-200/50 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:hover:shadow-navy-450/50 dark:focus:bg-navy-450 dark:focus:shadow-navy-450/50 dark:active:bg-navy-450/90">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 rotate-45" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M7 11l5-5m0 0l5 5m-5-5v12" />
</svg>
</button>
</div>
</div>
</div>
<div class="card flex-row overflow-hidden">
<div class="h-full w-1 bg-gradient-to-b from-secondary-light to-secondary"></div>
<div class="flex flex-1 flex-col justify-between p-4 sm:px-5">
<div>
<img class="h-12 w-12 rounded-lg object-cover object-center"
src="{{ asset('images/800x600.png') }}" alt="image" />
<h3 class="mt-3 font-medium text-slate-700 line-clamp-2 dark:text-navy-100">
Basic of digital marketing
</h3>
<p class="text-xs+">Wed. 09:00 - 11:00</p>
<div class="mt-2 flex space-x-1.5">
<a href="#"
class="tag bg-secondary px-1.5 py-1 text-white hover:bg-secondary-focus focus:bg-secondary-focus active:bg-secondary-focus/90">
Marketing
</a>
</div>
</div>
<div class="mt-10 flex justify-between">
<div class="flex -space-x-2">
<div class="avatar h-7 w-7 hover:z-10">
<img class="rounded-full ring ring-white dark:ring-navy-700"
src="{{ asset('images/200x200.png') }}" alt="avatar" />
</div>
<div class="avatar h-7 w-7 hover:z-10">
<div
class="is-initial rounded-full bg-info text-xs+ uppercase text-white ring ring-white dark:ring-navy-700">
jd
</div>
</div>
<div class="avatar h-7 w-7 hover:z-10">
<img class="rounded-full ring ring-white dark:ring-navy-700"
src="{{ asset('images/200x200.png') }}" alt="avatar" />
</div>
</div>
<button
class="btn h-7 w-7 rounded-full bg-slate-150 p-0 font-medium text-slate-800 hover:bg-slate-200 hover:shadow-lg hover:shadow-slate-200/50 focus:bg-slate-200 focus:shadow-lg focus:shadow-slate-200/50 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:hover:shadow-navy-450/50 dark:focus:bg-navy-450 dark:focus:shadow-navy-450/50 dark:active:bg-navy-450/90">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 rotate-45"
fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M7 11l5-5m0 0l5 5m-5-5v12" />
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="mt-4 sm:mt-5 lg:mt-6">
<div class="flex items-center justify-between">
<h2 class="text-base font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100">
Media for lessons
</h2>
<div class="flex">
<div class="flex items-center" x-data="{ isInputActive: false }">
<label class="block">
<input x-effect="isInputActive === true && $nextTick(() => { $el.focus()});"
:class="isInputActive ? 'w-32 lg:w-48' : 'w-0'"
class="form-input bg-transparent px-1 text-right transition-all duration-100 placeholder:text-slate-500 dark:placeholder:text-navy-200"
placeholder="Search here..." type="text" />
</label>
<button @click="isInputActive = !isInputActive"
class="btn h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
</button>
</div>
<div x-data="usePopper({ placement: 'bottom-end', offset: 4 })" @click.outside="if(isShowPopper) isShowPopper = false"
class="inline-flex">
<button x-ref="popperRef" @click="isShowPopper = !isShowPopper"
class="btn h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
</svg>
</button>
<div x-ref="popperRoot" class="popper-root" :class="isShowPopper && 'show'">
<div
class="popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700">
<ul>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Action</a>
</li>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Another
Action</a>
</li>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Something
else</a>
</li>
</ul>
<div class="my-1 h-px bg-slate-150 dark:bg-navy-500"></div>
<ul>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Separated
Link</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="card mt-3">
<div class="is-scrollbar-hidden min-w-full overflow-x-auto">
<table class="is-hoverable w-full text-left">
<thead>
<tr>
<th
class="whitespace-nowrap rounded-tl-lg bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5">
COURSE NAME
</th>
<th
class="whitespace-nowrap bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5">
FILE NAME
</th>
<th
class="whitespace-nowrap bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5">
PERMISSION
</th>
<th
class="whitespace-nowrap bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5">
ASSIGN
</th>
<th
class="whitespace-nowrap bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5">
SIZE
</th>
<th
class="whitespace-nowrap rounded-tr-lg bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5">
</th>
</tr>
</thead>
<tbody>
<tr class="border-y border-transparent border-b-slate-200 dark:border-b-navy-500">
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<div class="flex items-center space-x-4">
<div
class="relative flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-primary/10 dark:bg-accent">
<svg xmlns="http://www.w3.org/2000/svg"
class="h-5.5 w-5.5 text-primary dark:text-white"
fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
stroke-width="1.5"
d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
</svg>
</div>
<span class="font-medium text-slate-700 dark:text-navy-100">Basic
English</span>
</div>
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<a href="#" class="hover:underline focus:underline">English book.pdf
</a>
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<div class="badge space-x-2.5 text-slate-800 dark:text-navy-100">
<div class="h-2 w-2 rounded-full bg-current"></div>
<span>Only View </span>
</div>
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
13 Members
</td>
<td
class="whitespace-nowrap px-4 py-3 font-medium text-slate-700 dark:text-navy-100 sm:px-5">
56 MB
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<button
class="btn h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5"
fill="none" viewBox="0 0 24 24" stroke="currentColor"
stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
</svg>
</button>
</td>
</tr>
<tr class="border-y border-transparent border-b-slate-200 dark:border-b-navy-500">
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<div class="flex items-center space-x-4">
<div
class="relative flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-primary/10 dark:bg-accent">
<svg xmlns="http://www.w3.org/2000/svg"
class="h-5.5 w-5.5 text-primary dark:text-white"
fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
stroke-width="1.5"
d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
</svg>
</div>
<span class="font-medium text-slate-700 dark:text-navy-100">Grammar and
Punctuation
</span>
</div>
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<a href="#" class="hover:underline focus:underline">Is Correct.docx
</a>
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<div class="badge space-x-2.5 text-secondary dark:text-secondary-light">
<div class="h-2 w-2 rounded-full bg-current"></div>
<span>Can Edit</span>
</div>
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
95 Members
</td>
<td
class="whitespace-nowrap px-4 py-3 font-medium text-slate-700 dark:text-navy-100 sm:px-5">
4.2 MB
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<button
class="btn h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5"
fill="none" viewBox="0 0 24 24" stroke="currentColor"
stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
</svg>
</button>
</td>
</tr>
<tr class="border-y border-transparent border-b-slate-200 dark:border-b-navy-500">
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<div class="flex items-center space-x-4">
<div
class="relative flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-secondary/10 dark:bg-secondary">
<svg xmlns="http://www.w3.org/2000/svg"
class="h-5.5 w-5.5 text-secondary dark:text-white"
fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
stroke-width="1.5"
d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3" />
</svg>
</div>
<span class="font-medium text-slate-700 dark:text-navy-100">Practice
speaking English
</span>
</div>
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<a href="#" class="hover:underline focus:underline">Speaking.mp3
</a>
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<div class="badge space-x-2.5 text-slate-800 dark:text-navy-100">
<div class="h-2 w-2 rounded-full bg-current"></div>
<span>Only View </span>
</div>
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
49 Members
</td>
<td
class="whitespace-nowrap px-4 py-3 font-medium text-slate-700 dark:text-navy-100 sm:px-5">
9 MB
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<button
class="btn h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5"
fill="none" viewBox="0 0 24 24" stroke="currentColor"
stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
</svg>
</button>
</td>
</tr>
<tr class="border-y border-transparent border-b-slate-200 dark:border-b-navy-500">
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<div class="flex items-center space-x-4">
<div
class="relative flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-info/10 dark:bg-info">
<svg xmlns="http://www.w3.org/2000/svg"
class="h-5.5 w-5.5 text-info dark:text-white" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
stroke-width="1.5"
d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4" />
</svg>
</div>
<span class="font-medium text-slate-700 dark:text-navy-100">Basic
English
</span>
</div>
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<a href="#" class="hover:underline focus:underline">
English books.zip
</a>
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<div class="badge space-x-2.5 text-slate-800 dark:text-navy-100">
<div class="h-2 w-2 rounded-full bg-current"></div>
<span>Only View </span>
</div>
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
63 Members
</td>
<td
class="whitespace-nowrap px-4 py-3 font-medium text-slate-700 dark:text-navy-100 sm:px-5">
496 MB
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<button
class="btn h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5"
fill="none" viewBox="0 0 24 24" stroke="currentColor"
stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
</svg>
</button>
</td>
</tr>
<tr class="border-y border-transparent border-b-slate-200 dark:border-b-navy-500">
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<div class="flex items-center space-x-4">
<div
class="relative flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-warning/10 dark:bg-warning">
<svg xmlns="http://www.w3.org/2000/svg"
class="h-5.5 w-5.5 text-warning dark:text-white"
fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
stroke-width="1.5"
d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" />
</svg>
</div>
<span class="font-medium text-slate-700 dark:text-navy-100">Grammar and
Punctuation
</span>
</div>
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<a href="#" class="hover:underline focus:underline">
Video Course.mp4
</a>
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<div class="badge space-x-2.5 text-slate-800 dark:text-navy-100">
<div class="h-2 w-2 rounded-full bg-current"></div>
<span>Only View </span>
</div>
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
47 Members
</td>
<td
class="whitespace-nowrap px-4 py-3 font-medium text-slate-700 dark:text-navy-100 sm:px-5">
245 MB
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<button
class="btn h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5"
fill="none" viewBox="0 0 24 24" stroke="currentColor"
stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
</svg>
</button>
</td>
</tr>
<tr class="border-y border-transparent">
<td class="whitespace-nowrap rounded-bl-lg px-4 py-3 sm:px-5">
<div class="flex items-center space-x-4">
<div
class="relative flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-primary/10 dark:bg-accent">
<svg xmlns="http://www.w3.org/2000/svg"
class="h-5.5 w-5.5 text-primary dark:text-white"
fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
stroke-width="1.5"
d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
</svg>
</div>
<span class="font-medium text-slate-700 dark:text-navy-100">Basic of
digital marketing
</span>
</div>
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<a href="#" class="hover:underline focus:underline">Digital
marketing.pdf
</a>
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<div class="badge space-x-2.5 text-slate-800 dark:text-navy-100">
<div class="h-2 w-2 rounded-full bg-current"></div>
<span>Only View </span>
</div>
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
42 Members
</td>
<td
class="whitespace-nowrap px-4 py-3 font-medium text-slate-700 dark:text-navy-100 sm:px-5">
54 MB
</td>
<td class="whitespace-nowrap rounded-br-lg px-4 py-3 sm:px-5">
<button
class="btn h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5"
fill="none" viewBox="0 0 24 24" stroke="currentColor"
stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
</svg>
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="col-span-12 lg:col-span-4 xl:col-span-3">
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-5 lg:grid-cols-1 lg:gap-6">
<div class="card pb-5">
<div class="mt-3 flex items-center justify-between px-4">
<h2 class="font-medium tracking-wide text-slate-700 dark:text-navy-100">
Working Hours
</h2>
<div x-data="usePopper({ placement: 'bottom-end', offset: 4 })" @click.outside="if(isShowPopper) isShowPopper = false"
class="inline-flex">
<button x-ref="popperRef" @click="isShowPopper = !isShowPopper"
class="btn -mr-1.5 h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
</svg>
</button>
<div x-ref="popperRoot" class="popper-root" :class="isShowPopper && 'show'">
<div
class="popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700">
<ul>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Action</a>
</li>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Another
Action</a>
</li>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Something
else</a>
</li>
</ul>
<div class="my-1 h-px bg-slate-150 dark:bg-navy-500"></div>
<ul>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Separated
Link</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div>
<div x-init="$nextTick(() => {
$el._x_chart = new ApexCharts($el, pages.charts.workingHours);
$el._x_chart.render()
});"></div>
</div>
<div class="px-4 text-center text-xs+ sm:px-5">
<p>Working hours calculated based on your activity</p>
</div>
</div>
<div class="card p-4 lg:order-last">
<div class="space-y-1 text-center font-inter text-xs+">
<div class="flex items-center justify-between px-2 pb-4">
<p class="font-medium text-slate-700 dark:text-navy-100">
January 2022
</p>
<div class="flex space-x-2">
<button
class="btn h-7 w-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
d="M15 19l-7-7 7-7" />
</svg>
</button>
<button
class="btn h-7 w-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
d="M9 5l7 7-7 7" />
</svg>
</button>
</div>
</div>
<div class="grid grid-cols-7 pb-2">
<div class="text-tiny+ font-semibold text-primary dark:text-accent-light">
SUN
</div>
<div class="text-tiny+ font-semibold text-primary dark:text-accent-light">
MON
</div>
<div class="text-tiny+ font-semibold text-primary dark:text-accent-light">
TUE
</div>
<div class="text-tiny+ font-semibold text-primary dark:text-accent-light">
WED
</div>
<div class="text-tiny+ font-semibold text-primary dark:text-accent-light">
THU
</div>
<div class="text-tiny+ font-semibold text-primary dark:text-accent-light">
FRY
</div>
<div class="text-tiny+ font-semibold text-primary dark:text-accent-light">
SAT
</div>
</div>
<div class="grid grid-cols-7 place-items-center">
<button
class="flex h-7 w-9 items-center justify-center rounded-xl text-slate-400 hover:bg-primary/10 hover:text-primary dark:text-navy-300 dark:hover:bg-accent-light/10 dark:hover:text-accent-light">
29
</button>
<button
class="flex h-7 w-9 items-center justify-center rounded-xl text-slate-400 hover:bg-primary/10 hover:text-primary dark:text-navy-300 dark:hover:bg-accent-light/10 dark:hover:text-accent-light">
30
</button>
<button
class="flex h-7 w-9 items-center justify-center rounded-xl text-slate-400 hover:bg-primary/10 hover:text-primary dark:text-navy-300 dark:hover:bg-accent-light/10 dark:hover:text-accent-light">
31
</button>
<button
class="flex h-7 w-9 items-center justify-center rounded-xl text-slate-900 hover:bg-primary/10 hover:text-primary dark:text-navy-100 dark:hover:bg-accent-light/10 dark:hover:text-accent-light">
1
</button>
<button
class="flex h-7 w-9 items-center justify-center rounded-xl text-slate-900 hover:bg-primary/10 hover:text-primary dark:text-navy-100 dark:hover:bg-accent-light/10 dark:hover:text-accent-light">
2
</button>
<button
class="flex h-7 w-9 items-center justify-center rounded-xl text-slate-900 hover:bg-primary/10 hover:text-primary dark:text-navy-100 dark:hover:bg-accent-light/10 dark:hover:text-accent-light">
3
</button>
<button
class="flex h-7 w-9 items-center justify-center rounded-xl text-slate-900 hover:bg-primary/10 hover:text-primary dark:text-navy-100 dark:hover:bg-accent-light/10 dark:hover:text-accent-light">
4
</button>
</div>
<div class="grid grid-cols-7 place-items-center">
<button
class="flex h-7 w-9 items-center justify-center rounded-xl text-slate-900 hover:bg-primary/10 hover:text-primary dark:text-navy-100 dark:hover:bg-accent-light/10 dark:hover:text-accent-light">
5
</button>
<button
class="flex h-7 w-9 items-center justify-center rounded-xl text-slate-900 hover:bg-primary/10 hover:text-primary dark:text-navy-100 dark:hover:bg-accent-light/10 dark:hover:text-accent-light">
6
</button>
<button
class="flex h-7 w-9 items-center justify-center rounded-xl text-slate-900 hover:bg-primary/10 hover:text-primary dark:text-navy-100 dark:hover:bg-accent-light/10 dark:hover:text-accent-light">
7
</button>
<button
class="flex h-7 w-9 items-center justify-center rounded-xl text-slate-900 hover:bg-primary/10 hover:text-primary dark:text-navy-100 dark:hover:bg-accent-light/10 dark:hover:text-accent-light">
8
</button>
<button
class="flex h-7 w-9 items-center justify-center rounded-xl text-slate-900 hover:bg-primary/10 hover:text-primary dark:text-navy-100 dark:hover:bg-accent-light/10 dark:hover:text-accent-light">
9
</button>
<button
class="flex h-7 w-9 items-center justify-center rounded-xl text-slate-900 hover:bg-primary/10 hover:text-primary dark:text-navy-100 dark:hover:bg-accent-light/10 dark:hover:text-accent-light">
10
</button>
<button
class="flex h-7 w-9 items-center justify-center rounded-xl text-slate-900 hover:bg-primary/10 hover:text-primary dark:text-navy-100 dark:hover:bg-accent-light/10 dark:hover:text-accent-light">
11
</button>
</div>
<div class="grid grid-cols-7 place-items-center">
<button
class="flex h-7 w-9 items-center justify-center rounded-xl text-slate-900 hover:bg-primary/10 hover:text-primary dark:text-navy-100 dark:hover:bg-accent-light/10 dark:hover:text-accent-light">
12
</button>
<button
class="flex h-7 w-9 items-center justify-center rounded-xl text-slate-900 hover:bg-primary/10 hover:text-primary dark:text-navy-100 dark:hover:bg-accent-light/10 dark:hover:text-accent-light">
13
</button>
<button
class="flex h-7 w-9 items-center justify-center rounded-xl font-medium text-primary hover:bg-primary/10 hover:text-primary dark:text-accent-light dark:hover:bg-accent-light/10 dark:hover:text-accent-light">
14
</button>
<button
class="flex h-7 w-9 items-center justify-center rounded-xl text-slate-900 hover:bg-primary/10 hover:text-primary dark:text-navy-100 dark:hover:bg-accent-light/10 dark:hover:text-accent-light">
15
</button>
<button
class="flex h-7 w-9 items-center justify-center rounded-xl text-slate-900 hover:bg-primary/10 hover:text-primary dark:text-navy-100 dark:hover:bg-accent-light/10 dark:hover:text-accent-light">
16
</button>
<button
class="flex h-7 w-9 items-center justify-center rounded-xl text-slate-900 hover:bg-primary/10 hover:text-primary dark:text-navy-100 dark:hover:bg-accent-light/10 dark:hover:text-accent-light">
17
</button>
<button
class="flex h-7 w-9 items-center justify-center rounded-xl text-slate-900 hover:bg-primary/10 hover:text-primary dark:text-navy-100 dark:hover:bg-accent-light/10 dark:hover:text-accent-light">
18
</button>
</div>
<div class="grid grid-cols-7 place-items-center">
<button
class="flex h-7 w-9 items-center justify-center rounded-xl text-slate-900 hover:bg-primary/10 hover:text-primary dark:text-navy-100 dark:hover:bg-accent-light/10 dark:hover:text-accent-light">
19
</button>
<button
class="flex h-7 w-9 items-center justify-center rounded-xl text-slate-900 hover:bg-primary/10 hover:text-primary dark:text-navy-100 dark:hover:bg-accent-light/10 dark:hover:text-accent-light">
20
</button>
<button
class="flex h-7 w-9 items-center justify-center rounded-xl text-slate-900 hover:bg-primary/10 hover:text-primary dark:text-navy-100 dark:hover:bg-accent-light/10 dark:hover:text-accent-light">
21
</button>
<button
class="flex h-7 w-9 items-center justify-center rounded-xl text-slate-900 hover:bg-primary/10 hover:text-primary dark:text-navy-100 dark:hover:bg-accent-light/10 dark:hover:text-accent-light">
22
</button>
<button
class="flex h-7 w-9 items-center justify-center rounded-xl text-slate-900 hover:bg-primary/10 hover:text-primary dark:text-navy-100 dark:hover:bg-accent-light/10 dark:hover:text-accent-light">
23
</button>
<button
class="flex h-7 w-9 items-center justify-center rounded-xl text-slate-900 hover:bg-primary/10 hover:text-primary dark:text-navy-100 dark:hover:bg-accent-light/10 dark:hover:text-accent-light">
24
</button>
<button
class="flex h-7 w-9 items-center justify-center rounded-xl text-slate-900 hover:bg-primary/10 hover:text-primary dark:text-navy-100 dark:hover:bg-accent-light/10 dark:hover:text-accent-light">
25
</button>
</div>
<div class="grid grid-cols-7 place-items-center">
<button
class="flex h-7 w-9 items-center justify-center rounded-xl text-slate-900 hover:bg-primary/10 hover:text-primary dark:text-navy-100 dark:hover:bg-accent-light/10 dark:hover:text-accent-light">
26
</button>
<button
class="flex h-7 w-9 items-center justify-center rounded-xl text-slate-900 hover:bg-primary/10 hover:text-primary dark:text-navy-100 dark:hover:bg-accent-light/10 dark:hover:text-accent-light">
27
</button>
<button
class="flex h-7 w-9 items-center justify-center rounded-xl text-slate-900 hover:bg-primary/10 hover:text-primary dark:text-navy-100 dark:hover:bg-accent-light/10 dark:hover:text-accent-light">
28
</button>
<button
class="flex h-7 w-9 items-center justify-center rounded-xl text-slate-900 hover:bg-primary/10 hover:text-primary dark:text-navy-100 dark:hover:bg-accent-light/10 dark:hover:text-accent-light">
29
</button>
<button
class="flex h-7 w-9 items-center justify-center rounded-xl text-slate-900 hover:bg-primary/10 hover:text-primary dark:text-navy-100 dark:hover:bg-accent-light/10 dark:hover:text-accent-light">
30
</button>
<button
class="flex h-7 w-9 items-center justify-center rounded-xl text-slate-400 hover:bg-primary/10 hover:text-primary dark:text-navy-300 dark:hover:bg-accent-light/10 dark:hover:text-accent-light">
1
</button>
<button
class="flex h-7 w-9 items-center justify-center rounded-xl text-slate-400 hover:bg-primary/10 hover:text-primary dark:text-navy-300 dark:hover:bg-accent-light/10 dark:hover:text-accent-light">
2
</button>
</div>
</div>
</div>
<div class="sm:col-span-2 lg:col-span-1">
<div class="flex h-8 items-center justify-between">
<h2 class="font-medium tracking-wide text-slate-700 dark:text-navy-100">
Students
</h2>
<a href="#"
class="border-b border-dotted border-current pb-0.5 text-xs+ font-medium text-primary outline-none transition-colors duration-300 hover:text-primary/70 focus:text-primary/70 dark:text-accent-light dark:hover:text-accent-light/70 dark:focus:text-accent-light/70">View
All</a>
</div>
<div class="mt-3 grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-x-5 lg:grid-cols-1">
<div class="card p-3">
<div class="flex items-center justify-between space-x-2">
<div class="flex items-center space-x-3">
<div class="avatar h-10 w-10">
<img class="rounded-full" src="{{ asset('images/200x200.png') }}"
alt="avatar" />
<div
class="absolute right-0 h-3 w-3 rounded-full border-2 border-white bg-primary dark:border-navy-700 dark:bg-accent">
</div>
</div>
<div>
<p class="font-medium text-slate-700 line-clamp-1 dark:text-navy-100">
Travis Fuller
</p>
<p class="mt-0.5 text-xs text-slate-400 line-clamp-1 dark:text-navy-300">
65% completed
</p>
</div>
</div>
<div class="relative cursor-pointer">
<button
class="btn h-8 w-8 rounded-full bg-slate-150 p-0 font-medium text-slate-700 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-100 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5"
fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
stroke-width="1.5"
d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
</svg>
</button>
<div
class="absolute top-0 right-0 -m-1 flex h-4 min-w-[1rem] items-center justify-center rounded-full bg-primary px-1 text-tiny font-medium leading-none text-white dark:bg-accent">
2
</div>
</div>
</div>
</div>
<div class="card p-3">
<div class="flex items-center justify-between space-x-2">
<div class="flex items-center space-x-3">
<div class="avatar h-10 w-10">
<img class="rounded-full" src="{{ asset('images/200x200.png') }}"
alt="avatar" />
</div>
<div>
<p class="font-medium text-slate-700 line-clamp-1 dark:text-navy-100">
Konnor Guzman
</p>
<p class="mt-0.5 text-xs text-slate-400 line-clamp-1 dark:text-navy-300">
78% completed
</p>
</div>
</div>
<div class="relative cursor-pointer">
<button
class="btn h-8 w-8 rounded-full bg-slate-150 p-0 font-medium text-slate-700 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-100 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5"
fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
stroke-width="1.5"
d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
</svg>
</button>
</div>
</div>
</div>
<div class="card p-3">
<div class="flex items-center justify-between space-x-2">
<div class="flex items-center space-x-3">
<div class="avatar h-10 w-10">
<img class="rounded-full" src="{{ asset('images/200x200.png') }}"
alt="avatar" />
</div>
<div>
<p class="font-medium text-slate-700 line-clamp-1 dark:text-navy-100">
Alfredo Elliott
</p>
<p class="mt-0.5 text-xs text-slate-400 line-clamp-1 dark:text-navy-300">
58% completed
</p>
</div>
</div>
<div class="relative cursor-pointer">
<button
class="btn h-8 w-8 rounded-full bg-slate-150 p-0 font-medium text-slate-700 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-100 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5"
fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
stroke-width="1.5"
d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
</svg>
</button>
<div
class="absolute top-0 right-0 -m-1 flex h-4 min-w-[1rem] items-center justify-center rounded-full bg-primary px-1 text-tiny font-medium leading-none text-white dark:bg-accent">
3
</div>
</div>
</div>
</div>
<div class="card p-3">
<div class="flex items-center justify-between space-x-2">
<div class="flex items-center space-x-3">
<div class="avatar h-10 w-10">
<img class="rounded-full" src="{{ asset('images/200x200.png') }}"
alt="avatar" />
<div
class="absolute right-0 h-3 w-3 rounded-full border-2 border-white bg-primary dark:border-navy-700 dark:bg-accent">
</div>
</div>
<div>
<p class="font-medium text-slate-700 line-clamp-1 dark:text-navy-100">
Derrick Simmons
</p>
<p class="mt-0.5 text-xs text-slate-400 line-clamp-1 dark:text-navy-300">
65% completed
</p>
</div>
</div>
<div class="relative cursor-pointer">
<button
class="btn h-8 w-8 rounded-full bg-slate-150 p-0 font-medium text-slate-700 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-100 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5"
fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
stroke-width="1.5"
d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</x-app-layout>
resources/views/pages/dashboards-travel.blade.php deleted 100644 → 0
View file @ 5bad2db9
<x-app-layout title="Travel Dashboard" is-header-blur="true">
<!-- Main Content Wrapper -->
<main class="main-content w-full pb-8">
<div
class="mt-4 grid grid-cols-12 gap-4 px-[var(--margin-x)] transition-all duration-[.25s] sm:mt-5 sm:gap-5 lg:mt-6 lg:gap-6">
<div class="card col-span-12 lg:col-span-8 xl:col-span-9">
<div class="mt-3 flex items-center justify-between px-4 sm:px-5">
<h2 class="text-base font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100">
Travels History
</h2>
<div class="flex">
<div class="flex items-center" x-data="{ isInputActive: false }">
<label class="block">
<input x-effect="isInputActive === true && $nextTick(() => { $el.focus()});"
:class="isInputActive ? 'w-32 lg:w-48' : 'w-0'"
class="form-input bg-transparent px-1 text-right transition-all duration-100 placeholder:text-slate-500 dark:placeholder:text-navy-200"
placeholder="Search here..." type="text" />
</label>
<button @click="isInputActive = !isInputActive"
class="btn h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
</button>
</div>
<div x-data="usePopper({ placement: 'bottom-end', offset: 4 })" @click.outside="if(isShowPopper) isShowPopper = false"
class="inline-flex">
<button x-ref="popperRef" @click="isShowPopper = !isShowPopper"
class="btn -mr-1.5 h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
</svg>
</button>
<div x-ref="popperRoot" class="popper-root" :class="isShowPopper && 'show'">
<div
class="popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700">
<ul>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Action</a>
</li>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Another
Action</a>
</li>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Something
else</a>
</li>
</ul>
<div class="my-1 h-px bg-slate-150 dark:bg-navy-500"></div>
<ul>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Separated
Link</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="mt-5 grid grid-cols-1 gap-4 px-4 sm:grid-cols-3 sm:px-5">
<div
class="relative flex flex-col overflow-hidden rounded-lg bg-gradient-to-br from-info to-info-focus p-3.5">
<p class="text-xs uppercase text-sky-100">Total Booking</p>
<div class="flex items-end justify-between space-x-2">
<p class="mt-4 text-2xl font-medium text-white">31,556</p>
<a href="#"
class="border-b border-dotted border-current pb-0.5 text-xs font-medium text-sky-100 outline-none transition-colors duration-300 line-clamp-1 hover:text-white focus:text-white">Get
Report
</a>
</div>
<div class="mask is-reuleaux-triangle absolute top-0 right-0 -m-3 h-16 w-16 bg-white/20"></div>
</div>
<div
class="relative flex flex-col overflow-hidden rounded-lg bg-gradient-to-br from-amber-400 to-orange-600 p-3.5">
<p class="text-xs uppercase text-amber-50">Total Revenue</p>
<div class="flex items-end justify-between space-x-2">
<p class="mt-4 text-2xl font-medium text-white">$61,556</p>
<a href="#"
class="border-b border-dotted border-current pb-0.5 text-xs font-medium text-amber-50 outline-none transition-colors duration-300 line-clamp-1 hover:text-white focus:text-white">Get
Report
</a>
</div>
<div class="mask is-diamond absolute top-0 right-0 -m-3 h-16 w-16 bg-white/20"></div>
</div>
<div
class="relative flex flex-col overflow-hidden rounded-lg bg-gradient-to-br from-pink-500 to-rose-500 p-3.5">
<p class="text-xs uppercase text-pink-100">Total Debt</p>
<div class="flex items-end justify-between space-x-2">
<p class="mt-4 text-2xl font-medium text-white">$12,556</p>
<a href="#"
class="border-b border-dotted border-current pb-0.5 text-xs font-medium text-pink-100 outline-none transition-colors duration-300 line-clamp-1 hover:text-white focus:text-white">Get
Report
</a>
</div>
<div class="mask is-hexagon-2 absolute top-0 right-0 -m-3 h-16 w-16 bg-white/20"></div>
</div>
</div>
<div class="scrollbar-sm mt-5 min-w-full overflow-x-auto">
<table class="is-hoverable w-full text-left">
<tbody>
<tr class="border-y border-transparent border-b-slate-200 dark:border-b-navy-500">
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<div class="flex items-center space-x-4">
<div class="h-12 w-12">
<img class="h-full w-full rounded-lg"
src="{{ asset('images/800x800.png') }}" alt="image" />
</div>
<div>
<p class="font-medium text-slate-600 dark:text-navy-100">
Glacier National Park
</p>
<p class="mt-1 text-xs text-slate-400 dark:text-navy-300">
Unated States
</p>
</div>
</div>
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">5 Night</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<i class="fa-solid fa-plane-departure"></i>
&hairsp;
<span>05 Dec 2018</span>
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<i class="fa-solid fa-plane-arrival"></i>
&hairsp;
<span>12 Dec 2018</span>
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">2 Adult</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<p class="font-medium text-slate-700 dark:text-navy-100">
$120
</p>
</td>
</tr>
<tr class="border-y border-transparent border-b-slate-200 dark:border-b-navy-500">
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<div class="flex items-center space-x-4">
<div class="h-12 w-12">
<img class="h-full w-full rounded-lg"
src="{{ asset('images/800x800.png') }}" alt="image" />
</div>
<div>
<p class="font-medium text-slate-600 dark:text-navy-100">
Tahiti
</p>
<p class="mt-1 text-xs text-slate-400 dark:text-navy-300">
French
</p>
</div>
</div>
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">4 Night</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<i class="fa-solid fa-plane-departure"></i>
&hairsp;
<span>08 Dec 2018</span>
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<i class="fa-solid fa-plane-arrival"></i>
&hairsp;
<span>14 Dec 2018</span>
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">3 Adult</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<p class="font-medium text-slate-700 dark:text-navy-100">
$140
</p>
</td>
</tr>
<tr class="border-y border-transparent border-b-slate-200 dark:border-b-navy-500">
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<div class="flex items-center space-x-4">
<div class="h-12 w-12">
<img class="h-full w-full rounded-lg"
src="{{ asset('images/800x800.png') }}" alt="image" />
</div>
<div>
<p class="font-medium text-slate-600 dark:text-navy-100">
Argentine Patagonia
</p>
<p class="mt-1 text-xs text-slate-400 dark:text-navy-300">
Argentine
</p>
</div>
</div>
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
12 Night
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<i class="fa-solid fa-plane-departure"></i>
&hairsp;
<span>11 Dec 2018</span>
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<i class="fa-solid fa-plane-arrival"></i>
&hairsp;
<span>23 Dec 2018</span>
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">6 Adult</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<p class="font-medium text-slate-700 dark:text-navy-100">
$300
</p>
</td>
</tr>
<tr class="border-y border-transparent border-b-slate-200 dark:border-b-navy-500">
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<div class="flex items-center space-x-4">
<div class="h-12 w-12">
<img class="h-full w-full rounded-lg"
src="{{ asset('images/800x800.png') }}" alt="image" />
</div>
<div>
<p class="font-medium text-slate-600 dark:text-navy-100">
Amalfi Coast
</p>
<p class="mt-1 text-xs text-slate-400 dark:text-navy-300">
Italy
</p>
</div>
</div>
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">2 Night</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<i class="fa-solid fa-plane-departure"></i>
&hairsp;
<span>10 Dec 2018</span>
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<i class="fa-solid fa-plane-arrival"></i>
&hairsp;
<span>12 Dec 2018</span>
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">1 Adult</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<p class="font-medium text-slate-700 dark:text-navy-100">
$80
</p>
</td>
</tr>
<tr class="border-y border-transparent border-b-slate-200 dark:border-b-navy-500">
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<div class="flex items-center space-x-4">
<div class="h-12 w-12">
<img class="h-full w-full rounded-lg"
src="{{ asset('images/800x800.png') }}" alt="image" />
</div>
<div>
<p class="font-medium text-slate-600 dark:text-navy-100">
Great Barrier Reef
</p>
<p class="mt-1 text-xs text-slate-400 dark:text-navy-300">
Australia
</p>
</div>
</div>
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">4 Night</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<i class="fa-solid fa-plane-departure"></i>
&hairsp;
<span>01 Dec 2018</span>
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<i class="fa-solid fa-plane-arrival"></i>
&hairsp;
<span>05 Dec 2018</span>
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">3 Adult</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<p class="font-medium text-slate-700 dark:text-navy-100">
$100
</p>
</td>
</tr>
</tbody>
</table>
</div>
<div
class="flex flex-col justify-between space-y-4 px-4 py-4 sm:flex-row sm:items-center sm:space-y-0 sm:px-5">
<div class="text-xs+">1 - 10 of 10 entries</div>
<ol class="pagination">
<li class="rounded-l-full bg-slate-150 dark:bg-navy-500">
<a href="#"
class="flex h-8 w-8 items-center justify-center rounded-full text-slate-500 transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:text-navy-200 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none"
viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
</svg>
</a>
</li>
<li class="bg-slate-150 dark:bg-navy-500">
<a href="#"
class="flex h-8 min-w-[2rem] items-center justify-center rounded-full px-3 leading-tight transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">1</a>
</li>
<li class="bg-slate-150 dark:bg-navy-500">
<a href="#"
class="flex h-8 min-w-[2rem] items-center justify-center rounded-full bg-primary px-3 leading-tight text-white transition-colors hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90">2</a>
</li>
<li class="bg-slate-150 dark:bg-navy-500">
<a href="#"
class="flex h-8 min-w-[2rem] items-center justify-center rounded-full px-3 leading-tight transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">3</a>
</li>
<li class="bg-slate-150 dark:bg-navy-500">
<a href="#"
class="flex h-8 min-w-[2rem] items-center justify-center rounded-full px-3 leading-tight transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">4</a>
</li>
<li class="bg-slate-150 dark:bg-navy-500">
<a href="#"
class="flex h-8 min-w-[2rem] items-center justify-center rounded-full px-3 leading-tight transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">5</a>
</li>
<li class="rounded-r-full bg-slate-150 dark:bg-navy-500">
<a href="#"
class="flex h-8 w-8 items-center justify-center rounded-full text-slate-500 transition-colors hover:bg-slate-300 focus:bg-slate-300 active:bg-slate-300/80 dark:text-navy-200 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9 5l7 7-7 7" />
</svg>
</a>
</li>
</ol>
</div>
</div>
<div
class="col-span-12 grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-5 lg:col-span-4 lg:grid-cols-1 lg:gap-6 xl:col-span-3">
<div class="card pb-5">
<div class="my-3 flex h-8 items-center justify-between px-4 sm:px-5">
<h2 class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100">
Analytics
</h2>
<div x-data="usePopper({ placement: 'bottom-end', offset: 4 })" @click.outside="if(isShowPopper) isShowPopper = false"
class="inline-flex">
<button x-ref="popperRef" @click="isShowPopper = !isShowPopper"
class="btn -mr-1.5 h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
</svg>
</button>
<div x-ref="popperRoot" class="popper-root" :class="isShowPopper && 'show'">
<div
class="popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700">
<ul>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Action</a>
</li>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Another
Action</a>
</li>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Something
else</a>
</li>
</ul>
<div class="my-1 h-px bg-slate-150 dark:bg-navy-500"></div>
<ul>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Separated
Link</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div>
<div x-init="$nextTick(() => {
$el._x_chart = new ApexCharts($el, pages.charts.travelAnalytics);
$el._x_chart.render()
});"></div>
</div>
<div class="mx-auto mt-3 max-w-xs px-4 text-center text-xs+ sm:px-5">
<p>Travel analytics calculated based on travels count</p>
</div>
</div>
<div class="card">
<div class="mt-3 flex items-center justify-between px-4 sm:px-5">
<h2 class="font-medium tracking-wide text-slate-700 dark:text-navy-100">
Expense
</h2>
<div x-data="usePopper({ placement: 'bottom-end', offset: 4 })" @click.outside="if(isShowPopper) isShowPopper = false"
class="inline-flex">
<button x-ref="popperRef" @click="isShowPopper = !isShowPopper"
class="btn -mr-2 h-7 w-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
</svg>
</button>
<div x-ref="popperRoot" class="popper-root" :class="isShowPopper && 'show'">
<div
class="popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700">
<ul>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Action</a>
</li>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Another
Action</a>
</li>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Something
else</a>
</li>
</ul>
<div class="my-1 h-px bg-slate-150 dark:bg-navy-500"></div>
<ul>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Separated
Link</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<p class="grow px-4 text-xl font-semibold text-slate-700 dark:text-navy-100 sm:px-5">
$34.6k
</p>
<div class="ax-transparent-gridline">
<div x-init="$nextTick(() => {
$el._x_chart = new ApexCharts($el, pages.charts.travelExpense);
$el._x_chart.render()
});"></div>
</div>
</div>
</div>
</div>
<div class="mt-4 pl-[var(--margin-x)] transition-all duration-[.25s] sm:mt-5 lg:mt-6">
<div class="rounded-l-lg bg-slate-150 pt-4 pb-1 dark:bg-navy-800">
<h2
class="px-4 text-base font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 sm:px-5 lg:text-lg">
Top Hotels
</h2>
<div class="scrollbar-sm mt-4 flex space-x-4 overflow-x-auto px-4 pb-4 sm:px-5">
<div class="flex w-72 shrink-0 flex-col">
<img class="h-48 w-full rounded-2xl object-cover object-center"
src="{{ asset('images/800x600.png') }}" alt="image" />
<div class="card mx-2 -mt-8 grow rounded-2xl p-3.5">
<div class="flex space-x-2">
<div class="badge rounded-full bg-info py-1 uppercase text-white">
plus
</div>
<div class="flex flex-wrap items-center font-inter text-xs uppercase">
<p>3 beds</p>
<div class="mx-2 my-1 w-px self-stretch bg-slate-200 dark:bg-navy-500"></div>
<p>3 Adult</p>
</div>
</div>
<div class="mt-2">
<a href="#"
class="text-sm+ font-medium text-slate-700 line-clamp-1 hover:text-primary focus:text-primary dark:text-navy-100 dark:hover:text-accent-light dark:focus:text-accent-light">Emerald
Bay Inn.</a>
</div>
<div class="flex items-end justify-between">
<p class="mt-2">
<span class="text-base font-medium text-slate-700 dark:text-navy-100">$100</span>
<span class="text-xs text-slate-400 dark:text-navy-300">/day</span>
</p>
<p class="flex shrink-0 items-center space-x-1">
<svg xmlns="http://www.w3.org/2000/svg" stroke="currentColor"
class="h-3.5 w-3.5 text-slate-400 dark:text-navy-300" fill="none"
viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
d="M13.948 4.29l1.643 3.169c.224.44.82.864 1.325.945l2.977.477c1.905.306 2.353 1.639.98 2.953l-2.314 2.233c-.392.378-.607 1.107-.486 1.63l.663 2.763c.523 2.188-.681 3.034-2.688 1.89l-2.791-1.593c-.504-.288-1.335-.288-1.848 0l-2.791 1.594c-1.997 1.143-3.21.288-2.688-1.89l.663-2.765c.12-.522-.094-1.251-.486-1.63l-2.315-2.232c-1.362-1.314-.924-2.647.98-2.953l2.978-.477c.495-.081 1.092-.504 1.316-.945l1.643-3.17c.896-1.719 2.352-1.719 3.239 0z" />
</svg>
<span>4.9</span>
</p>
</div>
</div>
</div>
<div class="flex w-72 shrink-0 flex-col">
<img class="h-48 w-full rounded-2xl object-cover object-center"
src="{{ asset('images/800x600.png') }}" alt="image" />
<div class="card mx-2 -mt-8 grow rounded-2xl p-3.5">
<div class="flex space-x-2">
<div class="badge rounded-full bg-warning py-1 uppercase text-white">
lux
</div>
<div class="flex flex-wrap items-center font-inter text-xs uppercase">
<p>2 beds</p>
<div class="mx-2 my-1 w-px self-stretch bg-slate-200 dark:bg-navy-500"></div>
<p>5 Adult</p>
</div>
</div>
<div class="mt-2">
<a href="#"
class="text-sm+ font-medium text-slate-700 line-clamp-1 hover:text-primary focus:text-primary dark:text-navy-100 dark:hover:text-accent-light dark:focus:text-accent-light">Crowne
Plaza.</a>
</div>
<div class="flex items-end justify-between">
<p class="mt-2">
<span class="text-base font-medium text-slate-700 dark:text-navy-100">$80</span>
<span class="text-xs text-slate-400 dark:text-navy-300">/day</span>
</p>
<p class="flex shrink-0 items-center space-x-1">
<svg xmlns="http://www.w3.org/2000/svg" stroke="currentColor"
class="h-3.5 w-3.5 text-slate-400 dark:text-navy-300" fill="none"
viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
d="M13.948 4.29l1.643 3.169c.224.44.82.864 1.325.945l2.977.477c1.905.306 2.353 1.639.98 2.953l-2.314 2.233c-.392.378-.607 1.107-.486 1.63l.663 2.763c.523 2.188-.681 3.034-2.688 1.89l-2.791-1.593c-.504-.288-1.335-.288-1.848 0l-2.791 1.594c-1.997 1.143-3.21.288-2.688-1.89l.663-2.765c.12-.522-.094-1.251-.486-1.63l-2.315-2.232c-1.362-1.314-.924-2.647.98-2.953l2.978-.477c.495-.081 1.092-.504 1.316-.945l1.643-3.17c.896-1.719 2.352-1.719 3.239 0z" />
</svg>
<span>4.8</span>
</p>
</div>
</div>
</div>
<div class="flex w-72 shrink-0 flex-col">
<img class="h-48 w-full rounded-2xl object-cover object-center"
src="{{ asset('images/800x600.png') }}" alt="image" />
<div class="card mx-2 -mt-8 grow rounded-2xl p-3.5">
<div class="flex space-x-2">
<div class="badge rounded-full bg-secondary py-1 uppercase text-white">
Penthouse
</div>
<div class="flex flex-wrap items-center font-inter text-xs uppercase">
<p>3 beds</p>
<div class="mx-2 my-1 w-px self-stretch bg-slate-200 dark:bg-navy-500"></div>
<p>3 Adult</p>
</div>
</div>
<div class="mt-2">
<a href="#"
class="text-sm+ font-medium text-slate-700 line-clamp-1 hover:text-primary focus:text-primary dark:text-navy-100 dark:hover:text-accent-light dark:focus:text-accent-light">Sunset
Lodge.</a>
</div>
<div class="flex items-end justify-between">
<p class="mt-2">
<span class="text-base font-medium text-slate-700 dark:text-navy-100">$100</span>
<span class="text-xs text-slate-400 dark:text-navy-300">/day</span>
</p>
<p class="flex shrink-0 items-center space-x-1">
<svg xmlns="http://www.w3.org/2000/svg" stroke="currentColor"
class="h-3.5 w-3.5 text-slate-400 dark:text-navy-300" fill="none"
viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
d="M13.948 4.29l1.643 3.169c.224.44.82.864 1.325.945l2.977.477c1.905.306 2.353 1.639.98 2.953l-2.314 2.233c-.392.378-.607 1.107-.486 1.63l.663 2.763c.523 2.188-.681 3.034-2.688 1.89l-2.791-1.593c-.504-.288-1.335-.288-1.848 0l-2.791 1.594c-1.997 1.143-3.21.288-2.688-1.89l.663-2.765c.12-.522-.094-1.251-.486-1.63l-2.315-2.232c-1.362-1.314-.924-2.647.98-2.953l2.978-.477c.495-.081 1.092-.504 1.316-.945l1.643-3.17c.896-1.719 2.352-1.719 3.239 0z" />
</svg>
<span>4.9</span>
</p>
</div>
</div>
</div>
<div class="flex w-72 shrink-0 flex-col">
<img class="h-48 w-full rounded-2xl object-cover object-center"
src="{{ asset('images/800x600.png') }}" alt="image" />
<div class="card mx-2 -mt-8 grow rounded-2xl p-3.5">
<div class="flex space-x-2">
<div class="badge rounded-full bg-info py-1 uppercase text-white">
plus
</div>
<div class="flex flex-wrap items-center font-inter text-xs uppercase">
<p>1 beds</p>
<div class="mx-2 my-1 w-px self-stretch bg-slate-200 dark:bg-navy-500"></div>
<p>2 Adult</p>
</div>
</div>
<div class="mt-2">
<a href="#"
class="text-sm+ font-medium text-slate-700 line-clamp-1 hover:text-primary focus:text-primary dark:text-navy-100 dark:hover:text-accent-light dark:focus:text-accent-light">Hotel
Elite.</a>
</div>
<div class="flex items-end justify-between">
<p class="mt-2">
<span class="text-base font-medium text-slate-700 dark:text-navy-100">$120</span>
<span class="text-xs text-slate-400 dark:text-navy-300">/day</span>
</p>
<p class="flex shrink-0 items-center space-x-1">
<svg xmlns="http://www.w3.org/2000/svg" stroke="currentColor"
class="h-3.5 w-3.5 text-slate-400 dark:text-navy-300" fill="none"
viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
d="M13.948 4.29l1.643 3.169c.224.44.82.864 1.325.945l2.977.477c1.905.306 2.353 1.639.98 2.953l-2.314 2.233c-.392.378-.607 1.107-.486 1.63l.663 2.763c.523 2.188-.681 3.034-2.688 1.89l-2.791-1.593c-.504-.288-1.335-.288-1.848 0l-2.791 1.594c-1.997 1.143-3.21.288-2.688-1.89l.663-2.765c.12-.522-.094-1.251-.486-1.63l-2.315-2.232c-1.362-1.314-.924-2.647.98-2.953l2.978-.477c.495-.081 1.092-.504 1.316-.945l1.643-3.17c.896-1.719 2.352-1.719 3.239 0z" />
</svg>
<span>4.9</span>
</p>
</div>
</div>
</div>
<div class="flex w-72 shrink-0 flex-col">
<img class="h-48 w-full rounded-2xl object-cover object-center"
src="{{ asset('images/800x600.png') }}" alt="image" />
<div class="card mx-2 -mt-8 grow rounded-2xl p-3.5">
<div class="flex space-x-2">
<div class="badge rounded-full bg-warning py-1 uppercase text-white">
lux
</div>
<div class="flex flex-wrap items-center font-inter text-xs uppercase">
<p>2 beds</p>
<div class="mx-2 my-1 w-px self-stretch bg-slate-200 dark:bg-navy-500"></div>
<p>5 Adult</p>
</div>
</div>
<div class="mt-2">
<a href="#"
class="text-sm+ font-medium text-slate-700 line-clamp-1 hover:text-primary focus:text-primary dark:text-navy-100 dark:hover:text-accent-light dark:focus:text-accent-light">Hotel
Bliss.</a>
</div>
<div class="flex items-end justify-between">
<p class="mt-2">
<span class="text-base font-medium text-slate-700 dark:text-navy-100">$90</span>
<span class="text-xs text-slate-400 dark:text-navy-300">/day</span>
</p>
<p class="flex shrink-0 items-center space-x-1">
<svg xmlns="http://www.w3.org/2000/svg" stroke="currentColor"
class="h-3.5 w-3.5 text-slate-400 dark:text-navy-300" fill="none"
viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
d="M13.948 4.29l1.643 3.169c.224.44.82.864 1.325.945l2.977.477c1.905.306 2.353 1.639.98 2.953l-2.314 2.233c-.392.378-.607 1.107-.486 1.63l.663 2.763c.523 2.188-.681 3.034-2.688 1.89l-2.791-1.593c-.504-.288-1.335-.288-1.848 0l-2.791 1.594c-1.997 1.143-3.21.288-2.688-1.89l.663-2.765c.12-.522-.094-1.251-.486-1.63l-2.315-2.232c-1.362-1.314-.924-2.647.98-2.953l2.978-.477c.495-.081 1.092-.504 1.316-.945l1.643-3.17c.896-1.719 2.352-1.719 3.239 0z" />
</svg>
<span>4.5</span>
</p>
</div>
</div>
</div>
<div class="flex w-72 shrink-0 flex-col">
<img class="h-48 w-full rounded-2xl object-cover object-center"
src="{{ asset('images/800x600.png') }}" alt="image" />
<div class="card mx-2 -mt-8 grow rounded-2xl p-3.5">
<div class="flex space-x-2">
<div class="badge rounded-full bg-info py-1 uppercase text-white">
plus
</div>
<div class="flex flex-wrap items-center font-inter text-xs uppercase">
<p>3 beds</p>
<div class="mx-2 my-1 w-px self-stretch bg-slate-200 dark:bg-navy-500"></div>
<p>3 Adult</p>
</div>
</div>
<div class="mt-2">
<a href="#"
class="text-sm+ font-medium text-slate-700 line-clamp-1 hover:text-primary focus:text-primary dark:text-navy-100 dark:hover:text-accent-light dark:focus:text-accent-light">Emerald
Bay Inn.</a>
</div>
<div class="flex items-end justify-between">
<p class="mt-2">
<span class="text-base font-medium text-slate-700 dark:text-navy-100">$100</span>
<span class="text-xs text-slate-400 dark:text-navy-300">/day</span>
</p>
<p class="flex shrink-0 items-center space-x-1">
<svg xmlns="http://www.w3.org/2000/svg" stroke="currentColor"
class="h-3.5 w-3.5 text-slate-400 dark:text-navy-300" fill="none"
viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
d="M13.948 4.29l1.643 3.169c.224.44.82.864 1.325.945l2.977.477c1.905.306 2.353 1.639.98 2.953l-2.314 2.233c-.392.378-.607 1.107-.486 1.63l.663 2.763c.523 2.188-.681 3.034-2.688 1.89l-2.791-1.593c-.504-.288-1.335-.288-1.848 0l-2.791 1.594c-1.997 1.143-3.21.288-2.688-1.89l.663-2.765c.12-.522-.094-1.251-.486-1.63l-2.315-2.232c-1.362-1.314-.924-2.647.98-2.953l2.978-.477c.495-.081 1.092-.504 1.316-.945l1.643-3.17c.896-1.719 2.352-1.719 3.239 0z" />
</svg>
<span>4.9</span>
</p>
</div>
</div>
</div>
<div class="flex w-72 shrink-0 flex-col">
<img class="h-48 w-full rounded-2xl object-cover object-center"
src="{{ asset('images/800x600.png') }}" alt="image" />
<div class="card mx-2 -mt-8 grow rounded-2xl p-3.5">
<div class="flex space-x-2">
<div class="badge rounded-full bg-warning py-1 uppercase text-white">
lux
</div>
<div class="flex flex-wrap items-center font-inter text-xs uppercase">
<p>2 beds</p>
<div class="mx-2 my-1 w-px self-stretch bg-slate-200 dark:bg-navy-500"></div>
<p>5 Adult</p>
</div>
</div>
<div class="mt-2">
<a href="#"
class="text-sm+ font-medium text-slate-700 line-clamp-1 hover:text-primary focus:text-primary dark:text-navy-100 dark:hover:text-accent-light dark:focus:text-accent-light">Crowne
Plaza.</a>
</div>
<div class="flex items-end justify-between">
<p class="mt-2">
<span class="text-base font-medium text-slate-700 dark:text-navy-100">$80</span>
<span class="text-xs text-slate-400 dark:text-navy-300">/day</span>
</p>
<p class="flex shrink-0 items-center space-x-1">
<svg xmlns="http://www.w3.org/2000/svg" stroke="currentColor"
class="h-3.5 w-3.5 text-slate-400 dark:text-navy-300" fill="none"
viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
d="M13.948 4.29l1.643 3.169c.224.44.82.864 1.325.945l2.977.477c1.905.306 2.353 1.639.98 2.953l-2.314 2.233c-.392.378-.607 1.107-.486 1.63l.663 2.763c.523 2.188-.681 3.034-2.688 1.89l-2.791-1.593c-.504-.288-1.335-.288-1.848 0l-2.791 1.594c-1.997 1.143-3.21.288-2.688-1.89l.663-2.765c.12-.522-.094-1.251-.486-1.63l-2.315-2.232c-1.362-1.314-.924-2.647.98-2.953l2.978-.477c.495-.081 1.092-.504 1.316-.945l1.643-3.17c.896-1.719 2.352-1.719 3.239 0z" />
</svg>
<span>4.8</span>
</p>
</div>
</div>
</div>
<div class="flex w-72 shrink-0 flex-col">
<img class="h-48 w-full rounded-2xl object-cover object-center"
src="{{ asset('images/800x600.png') }}" alt="image" />
<div class="card mx-2 -mt-8 grow rounded-2xl p-3.5">
<div class="flex space-x-2">
<div class="badge rounded-full bg-secondary py-1 uppercase text-white">
Penthouse
</div>
<div class="flex flex-wrap items-center font-inter text-xs uppercase">
<p>3 beds</p>
<div class="mx-2 my-1 w-px self-stretch bg-slate-200 dark:bg-navy-500"></div>
<p>3 Adult</p>
</div>
</div>
<div class="mt-2">
<a href="#"
class="text-sm+ font-medium text-slate-700 line-clamp-1 hover:text-primary focus:text-primary dark:text-navy-100 dark:hover:text-accent-light dark:focus:text-accent-light">Sunset
Lodge.</a>
</div>
<div class="flex items-end justify-between">
<p class="mt-2">
<span class="text-base font-medium text-slate-700 dark:text-navy-100">$100</span>
<span class="text-xs text-slate-400 dark:text-navy-300">/day</span>
</p>
<p class="flex shrink-0 items-center space-x-1">
<svg xmlns="http://www.w3.org/2000/svg" stroke="currentColor"
class="h-3.5 w-3.5 text-slate-400 dark:text-navy-300" fill="none"
viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
d="M13.948 4.29l1.643 3.169c.224.44.82.864 1.325.945l2.977.477c1.905.306 2.353 1.639.98 2.953l-2.314 2.233c-.392.378-.607 1.107-.486 1.63l.663 2.763c.523 2.188-.681 3.034-2.688 1.89l-2.791-1.593c-.504-.288-1.335-.288-1.848 0l-2.791 1.594c-1.997 1.143-3.21.288-2.688-1.89l.663-2.765c.12-.522-.094-1.251-.486-1.63l-2.315-2.232c-1.362-1.314-.924-2.647.98-2.953l2.978-.477c.495-.081 1.092-.504 1.316-.945l1.643-3.17c.896-1.719 2.352-1.719 3.239 0z" />
</svg>
<span>4.9</span>
</p>
</div>
</div>
</div>
<div class="flex w-72 shrink-0 flex-col">
<img class="h-48 w-full rounded-2xl object-cover object-center"
src="{{ asset('images/800x600.png') }}" alt="image" />
<div class="card mx-2 -mt-8 grow rounded-2xl p-3.5">
<div class="flex space-x-2">
<div class="badge rounded-full bg-info py-1 uppercase text-white">
plus
</div>
<div class="flex flex-wrap items-center font-inter text-xs uppercase">
<p>1 beds</p>
<div class="mx-2 my-1 w-px self-stretch bg-slate-200 dark:bg-navy-500"></div>
<p>2 Adult</p>
</div>
</div>
<div class="mt-2">
<a href="#"
class="text-sm+ font-medium text-slate-700 line-clamp-1 hover:text-primary focus:text-primary dark:text-navy-100 dark:hover:text-accent-light dark:focus:text-accent-light">Hotel
Elite.</a>
</div>
<div class="flex items-end justify-between">
<p class="mt-2">
<span class="text-base font-medium text-slate-700 dark:text-navy-100">$120</span>
<span class="text-xs text-slate-400 dark:text-navy-300">/day</span>
</p>
<p class="flex shrink-0 items-center space-x-1">
<svg xmlns="http://www.w3.org/2000/svg" stroke="currentColor"
class="h-3.5 w-3.5 text-slate-400 dark:text-navy-300" fill="none"
viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
d="M13.948 4.29l1.643 3.169c.224.44.82.864 1.325.945l2.977.477c1.905.306 2.353 1.639.98 2.953l-2.314 2.233c-.392.378-.607 1.107-.486 1.63l.663 2.763c.523 2.188-.681 3.034-2.688 1.89l-2.791-1.593c-.504-.288-1.335-.288-1.848 0l-2.791 1.594c-1.997 1.143-3.21.288-2.688-1.89l.663-2.765c.12-.522-.094-1.251-.486-1.63l-2.315-2.232c-1.362-1.314-.924-2.647.98-2.953l2.978-.477c.495-.081 1.092-.504 1.316-.945l1.643-3.17c.896-1.719 2.352-1.719 3.239 0z" />
</svg>
<span>4.9</span>
</p>
</div>
</div>
</div>
<div class="flex w-72 shrink-0 flex-col">
<img class="h-48 w-full rounded-2xl object-cover object-center"
src="{{ asset('images/800x600.png') }}" alt="image" />
<div class="card mx-2 -mt-8 grow rounded-2xl p-3.5">
<div class="flex space-x-2">
<div class="badge rounded-full bg-warning py-1 uppercase text-white">
lux
</div>
<div class="flex flex-wrap items-center font-inter text-xs uppercase">
<p>2 beds</p>
<div class="mx-2 my-1 w-px self-stretch bg-slate-200 dark:bg-navy-500"></div>
<p>5 Adult</p>
</div>
</div>
<div class="mt-2">
<a href="#"
class="text-sm+ font-medium text-slate-700 line-clamp-1 hover:text-primary focus:text-primary dark:text-navy-100 dark:hover:text-accent-light dark:focus:text-accent-light">Hotel
Bliss.</a>
</div>
<div class="flex items-end justify-between">
<p class="mt-2">
<span class="text-base font-medium text-slate-700 dark:text-navy-100">$90</span>
<span class="text-xs text-slate-400 dark:text-navy-300">/day</span>
</p>
<p class="flex shrink-0 items-center space-x-1">
<svg xmlns="http://www.w3.org/2000/svg" stroke="currentColor"
class="h-3.5 w-3.5 text-slate-400 dark:text-navy-300" fill="none"
viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
d="M13.948 4.29l1.643 3.169c.224.44.82.864 1.325.945l2.977.477c1.905.306 2.353 1.639.98 2.953l-2.314 2.233c-.392.378-.607 1.107-.486 1.63l.663 2.763c.523 2.188-.681 3.034-2.688 1.89l-2.791-1.593c-.504-.288-1.335-.288-1.848 0l-2.791 1.594c-1.997 1.143-3.21.288-2.688-1.89l.663-2.765c.12-.522-.094-1.251-.486-1.63l-2.315-2.232c-1.362-1.314-.924-2.647.98-2.953l2.978-.477c.495-.081 1.092-.504 1.316-.945l1.643-3.17c.896-1.719 2.352-1.719 3.239 0z" />
</svg>
<span>4.5</span>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</x-app-layout>
resources/views/pages/dashboards-widget-contacts.blade.php deleted 100644 → 0
View file @ 5bad2db9
<x-app-layout title="Widget Contact" is-header-blur="true">
<!-- Main Content Wrapper -->
<main class="main-content w-full px-[var(--margin-x)] pb-8">
<div class="flex items-center space-x-4 py-5 lg:py-6">
<h2 class="text-xl font-medium text-slate-800 dark:text-navy-50 lg:text-2xl">
Contact Widgets
</h2>
<div class="hidden h-full py-1 sm:flex">
<div class="h-full w-px bg-slate-300 dark:bg-navy-600"></div>
</div>
<ul class="hidden flex-wrap items-center space-x-2 sm:flex">
<li class="flex items-center space-x-2">
<a class="text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
href="#">Dashboards</a>
<svg x-ignore xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24"
stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
</svg>
</li>
<li>Contact Widgets</li>
</ul>
</div>
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-5 lg:grid-cols-3 lg:gap-6 xl:grid-cols-4">
<div class="space-y-4 sm:space-y-5 lg:space-y-6">
<div class="card items-center p-4 sm:p-5 lg:p-7">
<div class="avatar h-16 w-16">
<img class="mask is-squircle" src="{{ asset('images/200x200.png') }}" alt="avatar" />
</div>
<h3 class="mt-3 text-base font-medium text-slate-700 dark:text-navy-100">
Konnor Guzman
</h3>
<p class="text-slate-400 dark:text-navy-300">is calling</p>
<div class="mt-6 flex space-x-6">
<button
class="btn h-9 w-9 rounded-full bg-success p-0 font-medium text-white hover:bg-success-focus focus:bg-success-focus active:bg-success-focus/90">
<i class="fa-solid fa-phone"></i>
</button>
<button
class="btn h-9 w-9 rounded-full bg-error p-0 font-medium text-white hover:bg-error-focus focus:bg-error-focus active:bg-error-focus/90">
<i class="fa-solid fa-phone rotate-[135deg]"></i>
</button>
</div>
</div>
<div class="card items-center p-4 sm:p-5 lg:p-7">
<div class="avatar h-16 w-16">
<img class="mask is-squircle" src="{{ asset('images/200x200.png') }}" alt="avatar" />
</div>
<h3 class="mt-3 text-base font-medium text-slate-700 dark:text-navy-100">
Travis Fuller
</h3>
<p class="text-slate-400 dark:text-navy-300">00:01</p>
<div class="mt-6 grid grid-cols-3 gap-4">
<button
class="btn h-9 w-9 rounded-full p-0 text-slate-700 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-navy-100 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
<i class="fa-regular fa-user text-base"></i>
</button>
<button
class="btn h-9 w-9 rounded-full p-0 text-slate-700 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-navy-100 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
<i class="fa-solid fa-microphone-lines-slash"></i>
</button>
<button
class="btn h-9 w-9 rounded-full p-0 text-slate-700 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-navy-100 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
<i class="fa-solid fa-voicemail"></i>
</button>
<button
class="btn h-9 w-9 rounded-full p-0 text-slate-700 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-navy-100 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
<i class="fa-solid fa-volume-high"></i>
</button>
<button
class="btn h-9 w-9 rounded-full bg-error p-0 font-medium text-white hover:bg-error-focus focus:bg-error-focus active:bg-error-focus/90">
<i class="fa-solid fa-phone rotate-[135deg]"></i>
</button>
<button
class="btn h-9 w-9 rounded-full p-0 text-slate-700 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-navy-100 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24">
<path fill="currentColor"
d="M5.045 21c1.13 0 2.046-.96 2.046-2.143 0-1.183-.916-2.143-2.046-2.143S3 17.674 3 18.857C3 20.041 3.916 21 5.045 21zM12 14.143c1.13 0 2.046-.96 2.046-2.143 0-1.183-.916-2.143-2.046-2.143s-2.045.96-2.045 2.143c0 1.184.915 2.143 2.045 2.143zM12 7.286c1.13 0 2.046-.96 2.046-2.143C14.046 3.959 13.13 3 12 3s-2.045.96-2.045 2.143c0 1.183.915 2.143 2.045 2.143zM5.046 7.286c1.13 0 2.045-.96 2.045-2.143C7.091 3.959 6.176 3 5.046 3S3 3.96 3 5.143c0 1.183.916 2.143 2.046 2.143zM5.045 14.143c1.13 0 2.046-.96 2.046-2.143 0-1.183-.916-2.143-2.046-2.143S3 10.817 3 12c0 1.184.916 2.143 2.045 2.143zM12 21c1.13 0 2.046-.96 2.046-2.143 0-1.183-.916-2.143-2.046-2.143s-2.045.96-2.045 2.143C9.955 20.041 10.87 21 12 21zM18.954 21c1.13 0 2.046-.96 2.046-2.143 0-1.183-.916-2.143-2.046-2.143s-2.045.96-2.045 2.143c0 1.184.916 2.143 2.045 2.143zM18.954 7.286c1.13 0 2.046-.96 2.046-2.143C21 3.959 20.084 3 18.954 3s-2.045.96-2.045 2.143c0 1.183.916 2.143 2.045 2.143zM18.954 14.143c1.13 0 2.046-.96 2.046-2.143 0-1.183-.916-2.143-2.046-2.143s-2.045.96-2.045 2.143c0 1.184.916 2.143 2.045 2.143z" />
</svg>
</button>
</div>
</div>
</div>
<div class="card px-4 pb-4 sm:px-5">
<div class="my-3 flex h-8 items-center justify-between">
<h2 class="text-sm+ font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100">
Contact List
</h2>
<div x-data="usePopper({ placement: 'bottom-end', offset: 4 })" @click.outside="if(isShowPopper) isShowPopper = false"
class="inline-flex">
<button x-ref="popperRef" @click="isShowPopper = !isShowPopper"
class="btn -mr-1.5 h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
</svg>
</button>
<div x-ref="popperRoot" class="popper-root" :class="isShowPopper && 'show'">
<div
class="popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700">
<ul>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Action</a>
</li>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Another
Action</a>
</li>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Something
else</a>
</li>
</ul>
<div class="my-1 h-px bg-slate-150 dark:bg-navy-500"></div>
<ul>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Separated
Link</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<label class="relative flex">
<input
class="form-input peer h-9 w-full rounded-full border border-slate-300 bg-transparent px-3 py-2 pl-9 placeholder:text-slate-400/70 hover:z-10 hover:border-slate-400 focus:z-10 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
placeholder="112 Contacts" type="text" />
<span
class="pointer-events-none absolute flex h-full w-10 items-center justify-center text-slate-400 peer-focus:text-primary dark:text-navy-300 dark:peer-focus:text-accent">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5 transition-colors duration-200"
fill="currentColor" viewBox="0 0 24 24">
<path
d="M3.316 13.781l.73-.171-.73.171zm0-5.457l.73.171-.73-.171zm15.473 0l.73-.171-.73.171zm0 5.457l.73.171-.73-.171zm-5.008 5.008l-.171-.73.171.73zm-5.457 0l-.171.73.171-.73zm0-15.473l-.171-.73.171.73zm5.457 0l.171-.73-.171.73zM20.47 21.53a.75.75 0 101.06-1.06l-1.06 1.06zM4.046 13.61a11.198 11.198 0 010-5.115l-1.46-.342a12.698 12.698 0 000 5.8l1.46-.343zm14.013-5.115a11.196 11.196 0 010 5.115l1.46.342a12.698 12.698 0 000-5.8l-1.46.343zm-4.45 9.564a11.196 11.196 0 01-5.114 0l-.342 1.46c1.907.448 3.892.448 5.8 0l-.343-1.46zM8.496 4.046a11.198 11.198 0 015.115 0l.342-1.46a12.698 12.698 0 00-5.8 0l.343 1.46zm0 14.013a5.97 5.97 0 01-4.45-4.45l-1.46.343a7.47 7.47 0 005.568 5.568l.342-1.46zm5.457 1.46a7.47 7.47 0 005.568-5.567l-1.46-.342a5.97 5.97 0 01-4.45 4.45l.342 1.46zM13.61 4.046a5.97 5.97 0 014.45 4.45l1.46-.343a7.47 7.47 0 00-5.568-5.567l-.342 1.46zm-5.457-1.46a7.47 7.47 0 00-5.567 5.567l1.46.342a5.97 5.97 0 014.45-4.45l-.343-1.46zm8.652 15.28l3.665 3.664 1.06-1.06-3.665-3.665-1.06 1.06z" />
</svg>
</span>
</label>
<div class="mt-4 space-y-3.5" x-data="{ expandedItem: 'item-1' }">
<div x-data="accordionItem('item-1')">
<div class="flex items-center justify-between">
<div class="flex space-x-4">
<div class="avatar h-10 w-10">
<img class="rounded-full" src="{{ asset('images/200x200.png') }}"
alt="avatar" />
</div>
<div>
<h3 class="font-medium text-slate-700 line-clamp-1 dark:text-navy-100">
Konnor Guzman
</h3>
<p class="mt-1 text-xs line-clamp-1">(01) 22 888 4444</p>
</div>
</div>
<button @click="expanded = !expanded"
class="btn h-7 w-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
<i :class="expanded && '-rotate-180'"
class="fas fa-chevron-down transition-transform"></i>
</button>
</div>
<div x-show="expanded" x-collapse>
<div class="flex justify-between pt-4">
<button
class="btn h-7 w-7 rounded-full bg-success/10 p-0 text-success hover:bg-success/20 focus:bg-success/20 active:bg-success/25">
<i class="fa-solid fa-phone text-xs"></i>
</button>
<button
class="btn h-7 w-7 rounded-full bg-warning/10 p-0 text-warning hover:bg-warning/20 focus:bg-warning/20 active:bg-warning/25">
<i class="fa-solid fa-video text-xs"></i>
</button>
<button
class="btn h-7 w-7 rounded-full bg-secondary/10 p-0 text-secondary hover:bg-secondary/20 focus:bg-secondary/20 active:bg-secondary/25 dark:bg-secondary-light/10 dark:text-secondary-light dark:hover:bg-secondary-light/20 dark:focus:bg-secondary-light/20 dark:active:bg-secondary-light/25">
<i class="fa-regular fa-comment text-xs"></i>
</button>
<button
class="btn h-7 w-7 rounded-full bg-info/10 p-0 text-info hover:bg-info/20 focus:bg-info/20 active:bg-info/25">
<i class="fa-regular fa-envelope text-xs"></i>
</button>
<button
class="btn h-7 w-7 rounded-full bg-slate-150 p-0 text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
<i class="fa-solid fa-ellipsis"></i>
</button>
</div>
</div>
</div>
<div x-data="accordionItem('item-2')">
<div class="flex items-center justify-between">
<div class="flex space-x-4">
<div class="avatar h-10 w-10">
<img class="rounded-full" src="{{ asset('images/200x200.png') }}"
alt="avatar" />
</div>
<div>
<h3 class="font-medium text-slate-700 line-clamp-1 dark:text-navy-100">
Alfredo Elliott
</h3>
<p class="mt-1 text-xs line-clamp-1">(095)-800-8313</p>
</div>
</div>
<button @click="expanded = !expanded"
class="btn h-7 w-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
<i :class="expanded && '-rotate-180'"
class="fas fa-chevron-down transition-transform"></i>
</button>
</div>
<div x-show="expanded" x-collapse>
<div class="flex justify-between pt-4">
<button
class="btn h-7 w-7 rounded-full bg-success/10 p-0 text-success hover:bg-success/20 focus:bg-success/20 active:bg-success/25">
<i class="fa-solid fa-phone text-xs"></i>
</button>
<button
class="btn h-7 w-7 rounded-full bg-warning/10 p-0 text-warning hover:bg-warning/20 focus:bg-warning/20 active:bg-warning/25">
<i class="fa-solid fa-video text-xs"></i>
</button>
<button
class="btn h-7 w-7 rounded-full bg-secondary/10 p-0 text-secondary hover:bg-secondary/20 focus:bg-secondary/20 active:bg-secondary/25 dark:bg-secondary-light/10 dark:text-secondary-light dark:hover:bg-secondary-light/20 dark:focus:bg-secondary-light/20 dark:active:bg-secondary-light/25">
<i class="fa-regular fa-comment text-xs"></i>
</button>
<button
class="btn h-7 w-7 rounded-full bg-info/10 p-0 text-info hover:bg-info/20 focus:bg-info/20 active:bg-info/25">
<i class="fa-regular fa-envelope text-xs"></i>
</button>
<button
class="btn h-7 w-7 rounded-full bg-slate-150 p-0 text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
<i class="fa-solid fa-ellipsis"></i>
</button>
</div>
</div>
</div>
<div x-data="accordionItem('item-3')">
<div class="flex items-center justify-between">
<div class="flex space-x-4">
<div class="avatar h-10 w-10">
<div class="is-initial rounded-full bg-info text-sm+ uppercase text-white">
ds
</div>
</div>
<div>
<h3 class="font-medium text-slate-700 line-clamp-1 dark:text-navy-100">
Derrick Simmons
</h3>
<p class="mt-1 text-xs line-clamp-1">(350)-813-3861</p>
</div>
</div>
<button @click="expanded = !expanded"
class="btn h-7 w-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
<i :class="expanded && '-rotate-180'"
class="fas fa-chevron-down transition-transform"></i>
</button>
</div>
<div x-show="expanded" x-collapse>
<div class="flex justify-between pt-4">
<button
class="btn h-7 w-7 rounded-full bg-success/10 p-0 text-success hover:bg-success/20 focus:bg-success/20 active:bg-success/25">
<i class="fa-solid fa-phone text-xs"></i>
</button>
<button
class="btn h-7 w-7 rounded-full bg-warning/10 p-0 text-warning hover:bg-warning/20 focus:bg-warning/20 active:bg-warning/25">
<i class="fa-solid fa-video text-xs"></i>
</button>
<button
class="btn h-7 w-7 rounded-full bg-secondary/10 p-0 text-secondary hover:bg-secondary/20 focus:bg-secondary/20 active:bg-secondary/25 dark:bg-secondary-light/10 dark:text-secondary-light dark:hover:bg-secondary-light/20 dark:focus:bg-secondary-light/20 dark:active:bg-secondary-light/25">
<i class="fa-regular fa-comment text-xs"></i>
</button>
<button
class="btn h-7 w-7 rounded-full bg-info/10 p-0 text-info hover:bg-info/20 focus:bg-info/20 active:bg-info/25">
<i class="fa-regular fa-envelope text-xs"></i>
</button>
<button
class="btn h-7 w-7 rounded-full bg-slate-150 p-0 text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
<i class="fa-solid fa-ellipsis"></i>
</button>
</div>
</div>
</div>
<div x-data="accordionItem('item-4')">
<div class="flex items-center justify-between">
<div class="flex space-x-4">
<div class="avatar h-10 w-10">
<img class="rounded-full" src="{{ asset('images/200x200.png') }}"
alt="avatar" />
</div>
<div>
<h3 class="font-medium text-slate-700 line-clamp-1 dark:text-navy-100">
Henry Curtis
</h3>
<p class="mt-1 text-xs line-clamp-1">(675)-975-0083</p>
</div>
</div>
<button @click="expanded = !expanded"
class="btn h-7 w-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
<i :class="expanded && '-rotate-180'"
class="fas fa-chevron-down transition-transform"></i>
</button>
</div>
<div x-show="expanded" x-collapse>
<div class="flex justify-between pt-4">
<button
class="btn h-7 w-7 rounded-full bg-success/10 p-0 text-success hover:bg-success/20 focus:bg-success/20 active:bg-success/25">
<i class="fa-solid fa-phone text-xs"></i>
</button>
<button
class="btn h-7 w-7 rounded-full bg-warning/10 p-0 text-warning hover:bg-warning/20 focus:bg-warning/20 active:bg-warning/25">
<i class="fa-solid fa-video text-xs"></i>
</button>
<button
class="btn h-7 w-7 rounded-full bg-secondary/10 p-0 text-secondary hover:bg-secondary/20 focus:bg-secondary/20 active:bg-secondary/25 dark:bg-secondary-light/10 dark:text-secondary-light dark:hover:bg-secondary-light/20 dark:focus:bg-secondary-light/20 dark:active:bg-secondary-light/25">
<i class="fa-regular fa-comment text-xs"></i>
</button>
<button
class="btn h-7 w-7 rounded-full bg-info/10 p-0 text-info hover:bg-info/20 focus:bg-info/20 active:bg-info/25">
<i class="fa-regular fa-envelope text-xs"></i>
</button>
<button
class="btn h-7 w-7 rounded-full bg-slate-150 p-0 text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
<i class="fa-solid fa-ellipsis"></i>
</button>
</div>
</div>
</div>
<div x-data="accordionItem('item-5')">
<div class="flex items-center justify-between">
<div class="flex space-x-4">
<div class="avatar h-10 w-10">
<img class="rounded-full" src="{{ asset('images/200x200.png') }}"
alt="avatar" />
</div>
<div>
<h3 class="font-medium text-slate-700 line-clamp-1 dark:text-navy-100">
John Doe
</h3>
<p class="mt-1 text-xs line-clamp-1">(727)-810-3880</p>
</div>
</div>
<button @click="expanded = !expanded"
class="btn h-7 w-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
<i :class="expanded && '-rotate-180'"
class="fas fa-chevron-down transition-transform"></i>
</button>
</div>
<div x-show="expanded" x-collapse>
<div class="flex justify-between pt-4">
<button
class="btn h-7 w-7 rounded-full bg-success/10 p-0 text-success hover:bg-success/20 focus:bg-success/20 active:bg-success/25">
<i class="fa-solid fa-phone text-xs"></i>
</button>
<button
class="btn h-7 w-7 rounded-full bg-warning/10 p-0 text-warning hover:bg-warning/20 focus:bg-warning/20 active:bg-warning/25">
<i class="fa-solid fa-video text-xs"></i>
</button>
<button
class="btn h-7 w-7 rounded-full bg-secondary/10 p-0 text-secondary hover:bg-secondary/20 focus:bg-secondary/20 active:bg-secondary/25 dark:bg-secondary-light/10 dark:text-secondary-light dark:hover:bg-secondary-light/20 dark:focus:bg-secondary-light/20 dark:active:bg-secondary-light/25">
<i class="fa-regular fa-comment text-xs"></i>
</button>
<button
class="btn h-7 w-7 rounded-full bg-info/10 p-0 text-info hover:bg-info/20 focus:bg-info/20 active:bg-info/25">
<i class="fa-regular fa-envelope text-xs"></i>
</button>
<button
class="btn h-7 w-7 rounded-full bg-slate-150 p-0 text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
<i class="fa-solid fa-ellipsis"></i>
</button>
</div>
</div>
</div>
<div x-data="accordionItem('item-6')">
<div class="flex items-center justify-between">
<div class="flex space-x-4">
<div class="avatar h-10 w-10">
<img class="rounded-full" src="{{ asset('images/200x200.png') }}"
alt="avatar" />
</div>
<div>
<h3 class="font-medium text-slate-700 line-clamp-1 dark:text-navy-100">
Travis Fuller
</h3>
<p class="mt-1 text-xs line-clamp-1">(654)-245-9324</p>
</div>
</div>
<button @click="expanded = !expanded"
class="btn h-7 w-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
<i :class="expanded && '-rotate-180'"
class="fas fa-chevron-down transition-transform"></i>
</button>
</div>
<div x-show="expanded" x-collapse>
<div class="flex justify-between pt-4">
<button
class="btn h-7 w-7 rounded-full bg-success/10 p-0 text-success hover:bg-success/20 focus:bg-success/20 active:bg-success/25">
<i class="fa-solid fa-phone text-xs"></i>
</button>
<button
class="btn h-7 w-7 rounded-full bg-warning/10 p-0 text-warning hover:bg-warning/20 focus:bg-warning/20 active:bg-warning/25">
<i class="fa-solid fa-video text-xs"></i>
</button>
<button
class="btn h-7 w-7 rounded-full bg-secondary/10 p-0 text-secondary hover:bg-secondary/20 focus:bg-secondary/20 active:bg-secondary/25 dark:bg-secondary-light/10 dark:text-secondary-light dark:hover:bg-secondary-light/20 dark:focus:bg-secondary-light/20 dark:active:bg-secondary-light/25">
<i class="fa-regular fa-comment text-xs"></i>
</button>
<button
class="btn h-7 w-7 rounded-full bg-info/10 p-0 text-info hover:bg-info/20 focus:bg-info/20 active:bg-info/25">
<i class="fa-regular fa-envelope text-xs"></i>
</button>
<button
class="btn h-7 w-7 rounded-full bg-slate-150 p-0 text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
<i class="fa-solid fa-ellipsis"></i>
</button>
</div>
</div>
</div>
<div x-data="accordionItem('item-7')">
<div class="flex items-center justify-between">
<div class="flex space-x-4">
<div class="avatar h-10 w-10">
<img class="rounded-full" src="{{ asset('images/200x200.png') }}"
alt="avatar" />
</div>
<div>
<h3 class="font-medium text-slate-700 line-clamp-1 dark:text-navy-100">
Raul Bradley
</h3>
<p class="mt-1 text-xs line-clamp-1">(350)-813-3861</p>
</div>
</div>
<button @click="expanded = !expanded"
class="btn h-7 w-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
<i :class="expanded && '-rotate-180'"
class="fas fa-chevron-down transition-transform"></i>
</button>
</div>
<div x-show="expanded" x-collapse>
<div class="flex justify-between pt-4">
<button
class="btn h-7 w-7 rounded-full bg-success/10 p-0 text-success hover:bg-success/20 focus:bg-success/20 active:bg-success/25">
<i class="fa-solid fa-phone text-xs"></i>
</button>
<button
class="btn h-7 w-7 rounded-full bg-warning/10 p-0 text-warning hover:bg-warning/20 focus:bg-warning/20 active:bg-warning/25">
<i class="fa-solid fa-video text-xs"></i>
</button>
<button
class="btn h-7 w-7 rounded-full bg-secondary/10 p-0 text-secondary hover:bg-secondary/20 focus:bg-secondary/20 active:bg-secondary/25 dark:bg-secondary-light/10 dark:text-secondary-light dark:hover:bg-secondary-light/20 dark:focus:bg-secondary-light/20 dark:active:bg-secondary-light/25">
<i class="fa-regular fa-comment text-xs"></i>
</button>
<button
class="btn h-7 w-7 rounded-full bg-info/10 p-0 text-info hover:bg-info/20 focus:bg-info/20 active:bg-info/25">
<i class="fa-regular fa-envelope text-xs"></i>
</button>
<button
class="btn h-7 w-7 rounded-full bg-slate-150 p-0 text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
<i class="fa-solid fa-ellipsis"></i>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="card px-4 pb-4 sm:px-5">
<div class="my-3 flex h-8 items-center justify-between">
<h2 class="text-sm+ font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100">
Contact Info
</h2>
<div x-data="usePopper({ placement: 'bottom-end', offset: 4 })" @click.outside="if(isShowPopper) isShowPopper = false"
class="inline-flex">
<button x-ref="popperRef" @click="isShowPopper = !isShowPopper"
class="btn -mr-1.5 h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
</svg>
</button>
<div x-ref="popperRoot" class="popper-root" :class="isShowPopper && 'show'">
<div
class="popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700">
<ul>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Action</a>
</li>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Another
Action</a>
</li>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Something
else</a>
</li>
</ul>
<div class="my-1 h-px bg-slate-150 dark:bg-navy-500"></div>
<ul>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Separated
Link</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="avatar h-16 w-16">
<img class="mask is-squircle" src="{{ asset('images/200x200.png') }}" alt="avatar" />
</div>
<h3 class="mt-2 text-base font-medium text-slate-700 dark:text-navy-100">
Travis Fuller
</h3>
<p class="text-xs text-slate-400 dark:text-navy-300">Family</p>
<div class="my-3 h-px bg-slate-200 dark:bg-navy-500"></div>
<div class="space-y-3.5">
<div class="flex items-center justify-between">
<p class="line-clamp-1">(01) 22 888 4444</p>
<div class="flex space-x-1.5">
<button
class="btn h-7 w-7 rounded-full bg-success/10 p-0 text-success hover:bg-success/20 focus:bg-success/20 active:bg-success/25">
<i class="fa-solid fa-phone text-xs"></i>
</button>
<button
class="btn h-7 w-7 rounded-full bg-info/10 p-0 text-info hover:bg-info/20 focus:bg-info/20 active:bg-info/25">
<i class="fa-regular fa-envelope text-xs"></i>
</button>
</div>
</div>
<div class="flex items-center justify-between">
<p class="line-clamp-1">(727)-810-3880</p>
<div class="flex space-x-1.5">
<button
class="btn h-7 w-7 rounded-full bg-success/10 p-0 text-success hover:bg-success/20 focus:bg-success/20 active:bg-success/25">
<i class="fa-solid fa-phone text-xs"></i>
</button>
<button
class="btn h-7 w-7 rounded-full bg-info/10 p-0 text-info hover:bg-info/20 focus:bg-info/20 active:bg-info/25">
<i class="fa-regular fa-envelope text-xs"></i>
</button>
</div>
</div>
<div class="flex items-center justify-between">
<p class="line-clamp-1">raul@example.com</p>
<div class="flex space-x-1.5">
<button
class="btn h-7 w-7 rounded-full bg-info/10 p-0 text-info hover:bg-info/20 focus:bg-info/20 active:bg-info/25">
<i class="fa-regular fa-envelope text-xs"></i>
</button>
</div>
</div>
</div>
<div class="my-3 h-px bg-slate-200 dark:bg-navy-500"></div>
<div class="space-y-3.5">
<div class="flex items-center justify-between">
<div>
<p>12 Sep. 20:30</p>
<p class="text-xs">incoming call</p>
</div>
<div>
<div class="badge rounded-full bg-error/10 text-error dark:bg-error/15">
Missed
</div>
</div>
</div>
<div class="flex items-center justify-between">
<div>
<p>13 Sep. 21:45</p>
<p class="text-xs">incoming call</p>
</div>
<div>
<div class="badge rounded-full bg-info/10 text-info dark:bg-info/15">
1m 33s
</div>
</div>
</div>
<div class="flex items-center justify-between">
<div>
<p>04 Oct. 12:14</p>
<p class="text-xs">incoming call</p>
</div>
<div>
<div class="badge rounded-full bg-info/10 text-info dark:bg-info/15">
45s
</div>
</div>
</div>
<div class="flex items-center justify-between">
<div>
<p>21 Oct. 14:42</p>
<p class="text-xs">incoming call</p>
</div>
<div>
<div class="badge rounded-full bg-info/10 text-info dark:bg-info/15">
6m 14s
</div>
</div>
</div>
</div>
</div>
<div class="space-y-4 sm:space-y-5 lg:space-y-6">
<div class="card px-4 pb-4 sm:px-5">
<div class="my-3 flex h-8 items-center justify-between">
<h2 class="text-sm+ font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100">
Call Setting
</h2>
<div x-data="usePopper({ placement: 'bottom-end', offset: 4 })" @click.outside="if(isShowPopper) isShowPopper = false"
class="inline-flex">
<button x-ref="popperRef" @click="isShowPopper = !isShowPopper"
class="btn -mr-1.5 h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
</svg>
</button>
<div x-ref="popperRoot" class="popper-root" :class="isShowPopper && 'show'">
<div
class="popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700">
<ul>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Action</a>
</li>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Another
Action</a>
</li>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Something
else</a>
</li>
</ul>
<div class="my-1 h-px bg-slate-150 dark:bg-navy-500"></div>
<ul>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Separated
Link</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<div class="mt-4 space-y-3.5">
<label class="flex items-center justify-between space-x-2">
<span class="font-medium">Voice chat </span>
<input checked
class="form-switch is-outline h-5 w-10 rounded-full border border-slate-400/70 bg-transparent before:rounded-full before:bg-slate-300 checked:!border-success checked:before:!bg-success dark:border-navy-400 dark:before:bg-navy-300"
type="checkbox" />
</label>
<label class="flex items-center justify-between space-x-2">
<span class="font-medium">Video chat </span>
<input checked
class="form-switch is-outline h-5 w-10 rounded-full border border-slate-400/70 bg-transparent before:rounded-full before:bg-slate-300 checked:border-primary checked:before:bg-primary dark:border-navy-400 dark:before:bg-navy-300 dark:checked:border-accent dark:checked:before:bg-accent"
type="checkbox" />
</label>
<label class="flex items-center justify-between space-x-2">
<span class="font-medium">Realtime chat</span>
<input checked
class="form-switch is-outline h-5 w-10 rounded-full border border-slate-400/70 bg-transparent before:rounded-full before:bg-slate-300 checked:border-secondary checked:before:bg-secondary dark:border-navy-400 dark:before:bg-navy-300 dark:checked:border-secondary-light dark:checked:before:bg-secondary-light"
type="checkbox" />
</label>
<label class="flex items-center justify-between space-x-2">
<span class="font-medium">Incoming calls </span>
<input checked
class="form-switch is-outline h-5 w-10 rounded-full border border-slate-400/70 bg-transparent before:rounded-full before:bg-slate-300 checked:!border-warning checked:before:!bg-warning dark:border-navy-400 dark:before:bg-navy-300"
type="checkbox" />
</label>
</div>
<button
class="btn mt-6 space-x-2 bg-primary font-medium text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90">
<i class="fa-regular fa-check-circle"></i>
<span> Apply Changes </span>
</button>
</div>
<div class="card p-4 sm:p-5">
<div class="flex space-x-4">
<div>
<div
class="flex h-8 w-8 items-center justify-center rounded-lg bg-primary/10 text-primary dark:bg-accent-light/10 dark:text-accent-light">
<i class="fa-solid fa-phone"></i>
</div>
</div>
<div class="space-y-2">
<p class="text-base font-medium tracking-wide text-slate-700 dark:text-navy-100">
WebRTC Module
</p>
<p>Lorem ipsum dolor sit amet, consectetur</p>
</div>
</div>
<div class="mt-6 flex items-center justify-between">
<div class="space-x-1.5">
<button
class="btn h-8 w-8 rounded-full bg-slate-150 p-0 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
<i class="fa-solid fa-info"></i>
</button>
<button
class="btn h-8 w-8 rounded-full bg-error p-0 font-medium text-white hover:bg-error-focus focus:bg-error-focus active:bg-error-focus/90">
<i class="fa-regular fa-trash-alt"></i>
</button>
</div>
<input
class="form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
type="checkbox" />
</div>
</div>
</div>
</div>
</main>
</x-app-layout>
resources/views/pages/dashboards-widget-ui.blade.php deleted 100644 → 0
View file @ 5bad2db9
<x-app-layout title="Widget UI" is-header-blur="true">
<!-- Main Content Wrapper -->
<main class="main-content w-full px-[var(--margin-x)] pb-8">
<div class="flex items-center space-x-4 py-5 lg:py-6">
<h2 class="text-xl font-medium text-slate-800 dark:text-navy-50 lg:text-2xl">
Widget UI
</h2>
<div class="hidden h-full py-1 sm:flex">
<div class="h-full w-px bg-slate-300 dark:bg-navy-600"></div>
</div>
<ul class="hidden flex-wrap items-center space-x-2 sm:flex">
<li class="flex items-center space-x-2">
<a class="text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
href="#">Dashboards</a>
<svg x-ignore xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
</svg>
</li>
<li>Widget UI</li>
</ul>
</div>
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-5 lg:grid-cols-3 lg:gap-6 xl:grid-cols-4">
<div class="space-y-4 sm:space-y-5 lg:space-y-6">
<div class="card px-4 pb-4 sm:px-5">
<div class="my-3 flex h-8 items-center justify-between">
<h2 class="text-sm+ font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100">
Labels
</h2>
<div x-data="usePopper({ placement: 'bottom-end', offset: 4 })" @click.outside="if(isShowPopper) isShowPopper = false"
class="inline-flex">
<button x-ref="popperRef" @click="isShowPopper = !isShowPopper"
class="btn -mr-1.5 h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
</svg>
</button>
<div x-ref="popperRoot" class="popper-root" :class="isShowPopper && 'show'">
<div
class="popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700">
<ul>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Action</a>
</li>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Another
Action</a>
</li>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Something
else</a>
</li>
</ul>
<div class="my-1 h-px bg-slate-150 dark:bg-navy-500"></div>
<ul>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Separated
Link</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="inline-space flex flex-wrap">
<a href="#"
class="tag bg-slate-150 text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-100 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
Icon
</a>
<a href="#"
class="tag bg-slate-150 text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-100 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
UI/UX
</a>
<a href="#"
class="tag bg-primary text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90">
Bootstrap
</a>
<a href="#"
class="tag bg-slate-150 text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-100 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
Tailwind
</a>
<a href="#"
class="tag bg-primary text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90">
React
</a>
<a href="#"
class="tag bg-slate-150 text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-100 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
Alpine
</a>
<a href="#"
class="tag bg-primary text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90">
Design
</a>
</div>
</div>
<div class="card p-3">
<img class="h-48 rounded-lg object-cover object-center" src="{{ asset('images/800x600.png') }}"
alt="image" />
<div class="mt-3">
<p class="font-medium tracking-wide text-slate-700 dark:text-navy-100">
❤ Instagram Post
</p>
<p class="mt-1 text-xs+">
Lorem ipsum dolor sit amet, consectetur adipisicing elit?
</p>
<div class="mt-2 text-xs">
<a href="#"
class="text-xs+ text-primary hover:text-primary-focus dark:text-accent-light dark:hover:text-accent">#PHP
</a>
<a href="#"
class="text-xs+ text-primary hover:text-primary-focus dark:text-accent-light dark:hover:text-accent">#ReactJS
</a>
<a href="#"
class="text-xs+ text-primary hover:text-primary-focus dark:text-accent-light dark:hover:text-accent">#NextJS
</a>
</div>
</div>
</div>
<div class="card p-4">
<div class="flex items-center justify-between">
<a href="#"
class="font-inter font-medium tracking-wide transition-colors hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100">
@twitteraccount
</a>
<i class="fa-brands fa-twitter"></i>
</div>
<p class="mt-3 text-xs+">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Doloremque eaque iste libero neque.
</p>
<div class="mt-2 text-xs">
<a href="#"
class="text-xs+ text-primary hover:text-primary-focus dark:text-accent-light dark:hover:text-accent">#PHP
</a>
<a href="#"
class="text-xs+ text-primary hover:text-primary-focus dark:text-accent-light dark:hover:text-accent">#ReactJS
</a>
<a href="#"
class="text-xs+ text-primary hover:text-primary-focus dark:text-accent-light dark:hover:text-accent">#NextJS
</a>
</div>
</div>
<div class="card p-4">
<div class="flex -space-x-px">
<input
class="form-input h-10 w-full rounded-l-lg border border-slate-300 bg-transparent px-3 py-2 placeholder:text-slate-400/70 hover:z-10 hover:border-slate-400 focus:z-10 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
placeholder="Search here..." type="text" />
<button
class="btn z-2 h-10 w-10 shrink-0 rounded-l-none bg-primary p-0 font-medium text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
</button>
</div>
<div class="mt-3 text-center">
<a href="#"
class="tag rounded-full bg-info/10 text-info hover:bg-info/20 focus:bg-info/20 active:bg-info/25">
Apps
</a>
<a href="#"
class="tag rounded-full bg-info/10 text-info hover:bg-info/20 focus:bg-info/20 active:bg-info/25">
Repair
</a>
<a href="#"
class="tag rounded-full bg-info/10 text-info hover:bg-info/20 focus:bg-info/20 active:bg-info/25">
Billing
</a>
</div>
</div>
<div class="card flex-row justify-between">
<div class="p-4">
<div class="flex space-x-4">
<div class="avatar h-10 w-10">
<img class="rounded-full" src="{{ asset('images/200x200.png') }}" alt="avatar" />
</div>
<div>
<h3 class="font-medium text-slate-700 line-clamp-1 dark:text-navy-100">
Konnor Guzman
</h3>
<p class="text-xs line-clamp-1">Web Developer</p>
</div>
</div>
<p class="mt-2 text-xs+">
Lorem ipsum dolor sit amet, consectetur.
</p>
</div>
<div class="my-3 mr-2 flex flex-col space-y-1">
<button
class="btn h-7 w-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5" fill="none"
viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round"
d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
</svg>
</button>
<button
class="btn h-7 w-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5" fill="none"
viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round"
d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
</svg>
</button>
<button
class="btn h-7 w-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5" fill="none"
viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
</svg>
</button>
</div>
</div>
</div>
<div class="space-y-4 sm:space-y-5 lg:space-y-6">
<div class="card p-3">
<div class="grid grid-cols-3 gap-3">
<img src="{{ asset('images/800x600.png') }}" class="rounded-lg object-cover object-center"
alt="image" />
<img src="{{ asset('images/800x600.png') }}" class="rounded-lg object-cover object-center"
alt="image" />
<img src="{{ asset('images/800x600.png') }}" class="rounded-lg object-cover object-center"
alt="image" />
<img src="{{ asset('images/800x600.png') }}" class="rounded-lg object-cover object-center"
alt="image" />
<img src="{{ asset('images/800x600.png') }}" class="rounded-lg object-cover object-center"
alt="image" />
<img src="{{ asset('images/800x600.png') }}" class="rounded-lg object-cover object-center"
alt="image" />
</div>
</div>
<div class="card flex-row space-x-4 p-3">
<div class="w-12 shrink-0">
<img class="w-full" src="{{ asset('images/illustrations/creativedesign-char.svg') }}"
alt="image" />
</div>
<div>
<p class="text-base font-medium tracking-wide text-slate-700 dark:text-navy-100">
Design Updated
</p>
<p class="mt-2 text-xs+">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
<div class="mt-3 flex flex-wrap -space-x-2">
<div class="avatar h-7 w-7 hover:z-10">
<img class="rounded-full ring ring-white dark:ring-navy-700"
src="{{ asset('images/200x200.png') }}" alt="avatar" />
</div>
<div class="avatar h-7 w-7 hover:z-10">
<div
class="is-initial rounded-full bg-info text-xs+ uppercase text-white ring ring-white dark:ring-navy-700">
jd
</div>
</div>
<div class="avatar h-7 w-7 hover:z-10">
<img class="rounded-full ring ring-white dark:ring-navy-700"
src="{{ asset('images/200x200.png') }}" alt="avatar" />
</div>
</div>
</div>
</div>
<div class="flex space-x-4 sm:space-x-5 lg:space-x-6">
<div class="card flex-1 p-4">
<div class="flex grow flex-col items-center">
<div class="flex h-16 w-12 items-center justify-center rounded-full bg-info">
<i class="fa-solid fa-person-walking text-2xl text-white"></i>
</div>
<p class="mt-2 font-medium">Walking</p>
</div>
<div class="mt-3 text-center">
<p class="text-3xl font-semibold text-slate-600 dark:text-navy-100">
234
</p>
<p class="text-xs+">meter</p>
</div>
</div>
<div class="card flex-1 p-4">
<div class="flex grow flex-col items-center">
<div class="flex h-16 w-12 items-center justify-center rounded-full bg-warning">
<i class="fa-solid fa-clock-rotate-left text-xl text-white"></i>
</div>
<p class="mt-2 font-medium">Time</p>
</div>
<div class="mt-3 text-center">
<p class="text-3xl font-semibold text-slate-600 dark:text-navy-100">
16
</p>
<p class="text-xs+">minutes</p>
</div>
</div>
</div>
<div class="card px-4 pb-4 sm:px-5">
<div class="my-3 flex h-8 items-center justify-between">
<h2 class="text-sm+ font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100">
Maybe You Know
</h2>
<div x-data="usePopper({ placement: 'bottom-end', offset: 4 })" @click.outside="if(isShowPopper) isShowPopper = false"
class="inline-flex">
<button x-ref="popperRef" @click="isShowPopper = !isShowPopper"
class="btn -mr-1.5 h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
</svg>
</button>
<div x-ref="popperRoot" class="popper-root" :class="isShowPopper && 'show'">
<div
class="popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700">
<ul>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Action</a>
</li>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Another
Action</a>
</li>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Something
else</a>
</li>
</ul>
<div class="my-1 h-px bg-slate-150 dark:bg-navy-500"></div>
<ul>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Separated
Link</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="grid grid-cols-2 gap-3">
<div
class="relative flex flex-col items-center justify-center rounded-lg border border-slate-200 p-4 dark:border-navy-500">
<div class="absolute top-0 right-0 mx-2 my-1">
<button
class="text-slate-400 transition-colors hover:text-slate-800 focus:text-slate-800 dark:text-navy-300 dark:hover:text-navy-100 dark:focus:text-navy-100">
<i class="fa-solid fa-xmark"></i>
</button>
</div>
<div class="avatar h-10 w-10">
<img class="mask is-hexagon" src="{{ asset('images/200x200.png') }}"
alt="avatar" />
</div>
<p class="mt-1.5 font-medium text-slate-700 line-clamp-1 dark:text-navy-100">
John D.
</p>
<button
class="btn mt-3 h-6 rounded-full bg-slate-150 px-3 text-xs font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
Follow
</button>
</div>
<div
class="relative flex flex-col items-center justify-center rounded-lg border border-slate-200 p-4 dark:border-navy-500">
<div class="absolute top-0 right-0 mx-2 my-1">
<button
class="text-slate-400 transition-colors hover:text-slate-800 focus:text-slate-800 dark:text-navy-300 dark:hover:text-navy-100 dark:focus:text-navy-100">
<i class="fa-solid fa-xmark"></i>
</button>
</div>
<div class="avatar h-10 w-10">
<img class="mask is-hexagon" src="{{ asset('images/200x200.png') }}"
alt="avatar" />
</div>
<p class="mt-1.5 font-medium text-slate-700 line-clamp-1 dark:text-navy-100">
Travis F.
</p>
<button
class="btn mt-3 h-6 rounded-full bg-slate-150 px-3 text-xs font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
Follow
</button>
</div>
<div
class="relative flex flex-col items-center justify-center rounded-lg border border-slate-200 p-4 dark:border-navy-500">
<div class="absolute top-0 right-0 mx-2 my-1">
<button
class="text-slate-400 transition-colors hover:text-slate-800 focus:text-slate-800 dark:text-navy-300 dark:hover:text-navy-100 dark:focus:text-navy-100">
<i class="fa-solid fa-xmark"></i>
</button>
</div>
<div class="avatar h-10 w-10">
<img class="mask is-hexagon" src="{{ asset('images/200x200.png') }}"
alt="avatar" />
</div>
<p class="mt-1.5 font-medium text-slate-700 line-clamp-1 dark:text-navy-100">
Alfredo E.
</p>
<button
class="btn mt-3 h-6 rounded-full bg-slate-150 px-3 text-xs font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
Follow
</button>
</div>
<div
class="relative flex flex-col items-center justify-center rounded-lg border border-slate-200 p-4 dark:border-navy-500">
<div class="absolute top-0 right-0 mx-2 my-1">
<button
class="text-slate-400 transition-colors hover:text-slate-800 focus:text-slate-800 dark:text-navy-300 dark:hover:text-navy-100 dark:focus:text-navy-100">
<i class="fa-solid fa-xmark"></i>
</button>
</div>
<div class="avatar h-10 w-10">
<img class="mask is-hexagon" src="{{ asset('images/200x200.png') }}"
alt="avatar" />
</div>
<p class="mt-1.5 font-medium text-slate-700 line-clamp-1 dark:text-navy-100">
Raul B.
</p>
<button
class="btn mt-3 h-6 rounded-full bg-slate-150 px-3 text-xs font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
Follow
</button>
</div>
</div>
</div>
<div class="card flex-row items-center space-x-4 p-4">
<div class="flex flex-wrap -space-x-2">
<div class="avatar h-10 w-10 hover:z-10">
<img class="rounded-full ring ring-white dark:ring-navy-700"
src="{{ asset('images/200x200.png') }}" alt="avatar" />
</div>
<div class="avatar h-10 w-10 hover:z-10">
<img class="rounded-full ring ring-white dark:ring-navy-700"
src="{{ asset('images/200x200.png') }}" alt="avatar" />
</div>
</div>
<div>
<p class="text-base font-medium tracking-wide text-slate-700 dark:text-navy-100">
Happy Birthday
</p>
<div class="flex text-xs+">
<a href="#"
class="text-primary hover:text-primary-focus dark:text-accent-light dark:hover:text-accent">Konnor</a>
<div class="mx-2 my-1 w-px bg-slate-200 dark:bg-navy-500"></div>
<a href="#"
class="text-primary hover:text-primary-focus dark:text-accent-light dark:hover:text-accent">John</a>
</div>
</div>
</div>
</div>
<div class="space-y-4 sm:space-y-5 lg:space-y-6">
<div class="card p-4 sm:p-5">
<div class="flex items-center justify-between">
<p class="text-sm+ font-medium tracking-wide text-slate-700 dark:text-navy-100">
Share
</p>
<button
class="btn h-7 w-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
<i class="fa-solid fa-arrow-up-right-from-square"></i>
</button>
</div>
<div class="mt-4 grid grid-cols-4 gap-3">
<div class="text-center">
<div class="avatar h-10 w-10">
<img class="rounded-full" src="{{ asset('images/200x200.png') }}" alt="avatar" />
</div>
<p class="mt-1.5 text-xs+ font-medium text-slate-700 line-clamp-1 dark:text-navy-100">
John
</p>
</div>
<div class="text-center">
<div class="avatar h-10 w-10">
<img class="rounded-full" src="{{ asset('images/200x200.png') }}" alt="avatar" />
</div>
<p class="mt-1.5 text-xs+ font-medium text-slate-700 line-clamp-1 dark:text-navy-100">
Doe
</p>
</div>
<div class="text-center">
<div class="avatar h-10 w-10">
<img class="rounded-full" src="{{ asset('images/200x200.png') }}" alt="avatar" />
</div>
<p class="mt-1.5 text-xs+ font-medium text-slate-700 line-clamp-1 dark:text-navy-100">
Raul
</p>
</div>
<div class="text-center">
<div class="avatar h-10 w-10">
<img class="rounded-full" src="{{ asset('images/200x200.png') }}" alt="avatar" />
</div>
<p class="mt-1.5 text-xs+ font-medium text-slate-700 line-clamp-1 dark:text-navy-100">
Alfredo
</p>
</div>
<div class="text-center">
<div class="avatar h-10 w-10">
<img class="rounded-full" src="{{ asset('images/200x200.png') }}" alt="avatar" />
</div>
<p class="mt-1.5 text-xs+ font-medium text-slate-700 line-clamp-1 dark:text-navy-100">
Travis
</p>
</div>
<div class="text-center">
<div class="avatar h-10 w-10">
<img class="rounded-full" src="{{ asset('images/200x200.png') }}" alt="avatar" />
</div>
<p class="mt-1.5 text-xs+ font-medium text-slate-700 line-clamp-1 dark:text-navy-100">
Curtis
</p>
</div>
<div class="text-center">
<div class="avatar h-10 w-10">
<img class="rounded-full" src="{{ asset('images/200x200.png') }}" alt="avatar" />
</div>
<p class="mt-1.5 text-xs+ font-medium text-slate-700 line-clamp-1 dark:text-navy-100">
Konnor
</p>
</div>
<div class="text-center">
<div class="avatar h-10 w-10">
<img class="rounded-full" src="{{ asset('images/200x200.png') }}" alt="avatar" />
</div>
<p class="mt-1.5 text-xs+ font-medium text-slate-700 line-clamp-1 dark:text-navy-100">
Guzman
</p>
</div>
</div>
</div>
<div class="card space-y-4 p-4 sm:p-5">
<div class="flex items-center space-x-4">
<div class="h-5 w-5 rounded border-2 bg-transparent dark:border-navy-400"></div>
<p>Not Color</p>
</div>
<div class="flex items-center space-x-4">
<div class="h-5 w-5 rounded border-2 border-primary bg-transparent dark:border-accent"></div>
<p>Primary Color</p>
</div>
<div class="flex items-center space-x-4">
<div
class="h-5 w-5 rounded border-2 border-secondary bg-transparent dark:border-secondary-light">
</div>
<p>Secondary Color</p>
</div>
<div class="flex items-center space-x-4">
<div class="h-5 w-5 rounded border-2 border-info bg-transparent"></div>
<p>Info Color</p>
</div>
<div class="flex items-center space-x-4">
<div class="h-5 w-5 rounded border-2 border-success bg-transparent"></div>
<p>Success Color</p>
</div>
<div class="flex items-center space-x-4">
<div class="h-5 w-5 rounded border-2 border-warning bg-transparent"></div>
<p>Warning Color</p>
</div>
<div class="flex items-center space-x-4">
<div class="h-5 w-5 rounded border-2 border-error bg-transparent"></div>
<p>Error Color</p>
</div>
</div>
<div class="card px-4 pb-5 sm:px-5">
<div class="my-3 flex h-8 items-center justify-between">
<h2 class="text-sm+ font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100">
Statistic
</h2>
<div x-data="usePopper({ placement: 'bottom-end', offset: 4 })" @click.outside="if(isShowPopper) isShowPopper = false"
class="inline-flex">
<button x-ref="popperRef" @click="isShowPopper = !isShowPopper"
class="btn -mr-1.5 h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
</svg>
</button>
<div x-ref="popperRoot" class="popper-root" :class="isShowPopper && 'show'">
<div
class="popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700">
<ul>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Action</a>
</li>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Another
Action</a>
</li>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Something
else</a>
</li>
</ul>
<div class="my-1 h-px bg-slate-150 dark:bg-navy-500"></div>
<ul>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Separated
Link</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="space-y-4">
<div class="flex items-center space-x-3">
<div class="mask is-squircle flex h-10 w-10 items-center justify-center bg-warning/10">
<i class="fa-solid fa-history text-xl text-warning"></i>
</div>
<div class="grow space-y-1">
<div class="flex justify-between">
<p class="font-medium">Pending</p>
<p class="text-warning">50%</p>
</div>
<div class="progress h-1.5 bg-slate-150 dark:bg-navy-500">
<div class="w-6/12 rounded-full bg-warning"></div>
</div>
</div>
</div>
<div class="flex items-center space-x-3">
<div
class="mask is-squircle flex h-10 w-10 items-center justify-center bg-primary/10 dark:bg-accent-light/10">
<i class="fa-solid fa-spinner text-xl text-primary dark:text-accent-light"></i>
</div>
<div class="grow space-y-1">
<div class="flex justify-between">
<p class="font-medium">In Progress</p>
<p class="text-primary dark:text-accent-light">75%</p>
</div>
<div class="progress h-1.5 bg-slate-150 dark:bg-navy-500">
<div class="w-9/12 rounded-full bg-primary dark:bg-accent"></div>
</div>
</div>
</div>
<div class="flex items-center space-x-3">
<div class="mask is-squircle flex h-10 w-10 items-center justify-center bg-success/10">
<i class="fa-regular fa-circle-check text-xl text-success"></i>
</div>
<div class="grow space-y-1">
<div class="flex justify-between">
<p class="font-medium">Completed</p>
<p class="text-success">25%</p>
</div>
<div class="progress h-1.5 bg-slate-150 dark:bg-navy-500">
<div class="w-3/12 rounded-full bg-success"></div>
</div>
</div>
</div>
<div class="flex items-center space-x-3">
<div class="mask is-squircle flex h-10 w-10 items-center justify-center bg-error/10">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-error" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M15 12H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<div class="grow space-y-1">
<div class="flex justify-between">
<p class="font-medium">Cancelled</p>
<p class="text-error">25%</p>
</div>
<div class="progress h-1.5 bg-slate-150 dark:bg-navy-500">
<div class="w-3/12 rounded-full bg-error"></div>
</div>
</div>
</div>
</div>
</div>
<div class="card p-4 sm:p-5">
<h3 class="font-medium tracking-wide text-slate-700 dark:text-navy-100">
Technologies
</h3>
<div class="mt-4 flex h-1.5 space-x-1">
<div class="w-4/12 rounded-full bg-primary dark:bg-accent"></div>
<div class="w-3/12 rounded-full bg-secondary"></div>
<div class="w-2/12 rounded-full bg-success"></div>
<div class="w-2/12 rounded-full bg-warning"></div>
<div class="w-1/12 rounded-full bg-error"></div>
</div>
<div class="inline-space mt-3 flex flex-wrap">
<div class="badge space-x-2.5 p-0 text-primary dark:text-accent-light">
<div class="h-2 w-2 rounded-full bg-current"></div>
<span>HTML</span>
</div>
<div class="badge space-x-2.5 p-0 text-secondary dark:text-secondary-light">
<div class="h-2 w-2 rounded-full bg-current"></div>
<span>CSS</span>
</div>
<div class="badge space-x-2.5 p-0 text-success">
<div class="h-2 w-2 rounded-full bg-current"></div>
<span>JavaScript</span>
</div>
<div class="badge space-x-2.5 p-0 text-warning">
<div class="h-2 w-2 rounded-full bg-current"></div>
<span>Vue</span>
</div>
<div class="badge space-x-2.5 p-0 text-error">
<div class="h-2 w-2 rounded-full bg-current"></div>
<span>Go</span>
</div>
</div>
</div>
</div>
<div class="space-y-4 sm:space-y-5 lg:space-y-6">
<div class="card">
<div class="absolute top-0 left-0 p-4">
<p>Daily Visits</p>
<p class="text-3xl font-semibold text-slate-700 dark:text-navy-100">
234
</p>
</div>
<div>
<div x-init="$nextTick(() => {
$el._x_chart = new ApexCharts($el, pages.charts.dailyVisitWidget);
$el._x_chart.render()
});"></div>
</div>
</div>
<div class="card p-4 sm:p-5">
<div class="flex items-center justify-between">
<div
class="mask is-squircle flex h-10 w-10 items-center justify-center bg-primary/10 dark:bg-accent-light/10">
<i class="fa fa-user text-xl text-primary dark:text-accent-light"></i>
</div>
<div class="flex items-center space-x-2">
<span class="text-success">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20"
fill="currentColor">
<path fill-rule="evenodd"
d="M12 7a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0V8.414l-4.293 4.293a1 1 0 01-1.414 0L8 10.414l-4.293 4.293a1 1 0 01-1.414-1.414l5-5a1 1 0 011.414 0L11 10.586 14.586 7H12z"
clip-rule="evenodd" />
</svg>
</span>
<span class="text-base font-semibold text-slate-700 dark:text-navy-100">
1.2%
</span>
</div>
</div>
<div class="mt-4 flex items-end justify-between">
<div>
<p class="text-3xl font-semibold text-slate-700 dark:text-navy-100">
1024
</p>
<p>New Users</p>
</div>
<div class="mt-3 flex flex-wrap -space-x-2">
<div class="avatar h-6 w-6 hover:z-10">
<img class="rounded-full ring ring-white dark:ring-navy-700"
src="{{ asset('images/200x200.png') }}" alt="avatar" />
</div>
<div class="avatar h-6 w-6 hover:z-10">
<div
class="is-initial rounded-full bg-info text-xs+ uppercase text-white ring ring-white dark:ring-navy-700">
jd
</div>
</div>
<div class="avatar h-6 w-6 hover:z-10">
<img class="rounded-full ring ring-white dark:ring-navy-700"
src="{{ asset('images/200x200.png') }}" alt="avatar" />
</div>
</div>
</div>
</div>
<div class="card flex-row justify-between p-4 sm:p-5">
<div>
<p class="text-base font-medium text-slate-700 dark:text-navy-100">
New Products
</p>
<div class="mt-4 flex items-baseline space-x-1">
<p class="text-2xl font-semibold text-slate-700 dark:text-navy-100">
21
</p>
<p class="text-xs text-success">+21%</p>
</div>
<p class="text-xs+">Lorem ipsum dolor sit amet</p>
</div>
<div class="mask is-squircle flex h-10 w-10 items-center justify-center bg-warning/10">
<i class="fa fa-gift text-xl text-warning"></i>
</div>
<div class="absolute bottom-0 right-0 overflow-hidden rounded-lg">
<i class="fa fa-gift translate-x-1/4 translate-y-1/4 text-5xl opacity-15"></i>
</div>
</div>
<div class="card bg-primary p-4 dark:bg-accent">
<div class="flex items-center space-x-3">
<div class="flex">
<div class="avatar">
<img class="rounded-full" src="{{ asset('images/200x200.png') }}" alt="avatar" />
</div>
</div>
<div>
<p class="font-medium text-white">John Doe</p>
<p class="text-xs text-indigo-100">55 min ago</p>
</div>
</div>
<div class="mt-2">
<p class="text-xs+ text-indigo-100">
Lorem ipsum dolor sit amet, consectetur.
</p>
</div>
<div class="pt-2">
<div class="badge rounded-full border border-white text-white">
Tag 1
</div>
</div>
</div>
<div class="card p-4 sm:p-5">
<div class="flex items-center space-x-2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5 text-slate-400 dark:text-navy-300"
fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
</svg>
<p class="text-xs+">June 23, 2021</p>
</div>
<p class="mt-4 text-base font-medium text-slate-700 dark:text-navy-100">
UI/UX Design, Mobile Design
</p>
<div class="mt-2">
<div class="badge h-5 bg-success/10 px-2 text-success dark:bg-success/15">
UI/UX Design
</div>
<div class="badge h-5 bg-warning/10 px-2 text-warning dark:bg-warning/15">
Mobile
</div>
</div>
<div class="mt-5 flex flex-wrap -space-x-2">
<div class="avatar h-6 w-6 hover:z-10">
<img class="rounded-full ring ring-white dark:ring-navy-700"
src="{{ asset('images/200x200.png') }}" alt="avatar" />
</div>
<div class="avatar h-6 w-6 hover:z-10">
<div
class="is-initial rounded-full bg-info text-xs+ uppercase text-white ring ring-white dark:ring-navy-700">
jd
</div>
</div>
<div class="avatar h-6 w-6 hover:z-10">
<img class="rounded-full ring ring-white dark:ring-navy-700"
src="{{ asset('images/200x200.png') }}" alt="avatar" />
</div>
</div>
</div>
<div class="card">
<h3 class="p-4 text-sm+ font-medium tracking-wide text-slate-700 dark:text-navy-100 sm:p-5">
New Followers
</h3>
<div class="is-scrollbar-hidden flex space-x-4 overflow-x-auto px-5 pb-4 sm:px-5">
<div class="text-center">
<div class="avatar h-10 w-10">
<img class="rounded-full" src="{{ asset('images/200x200.png') }}" alt="avatar" />
</div>
<p class="mt-1.5 text-xs+ font-medium text-slate-700 line-clamp-1 dark:text-navy-100">
John
</p>
</div>
<div class="text-center">
<div class="avatar h-10 w-10">
<img class="rounded-full" src="{{ asset('images/200x200.png') }}" alt="avatar" />
</div>
<p class="mt-1.5 text-xs+ font-medium text-slate-700 line-clamp-1 dark:text-navy-100">
Doe
</p>
</div>
<div class="text-center">
<div class="avatar h-10 w-10">
<img class="rounded-full" src="{{ asset('images/200x200.png') }}" alt="avatar" />
</div>
<p class="mt-1.5 text-xs+ font-medium text-slate-700 line-clamp-1 dark:text-navy-100">
Raul
</p>
</div>
<div class="text-center">
<div class="avatar h-10 w-10">
<img class="rounded-full" src="{{ asset('images/200x200.png') }}" alt="avatar" />
</div>
<p class="mt-1.5 text-xs+ font-medium text-slate-700 line-clamp-1 dark:text-navy-100">
Alfredo
</p>
</div>
<div class="text-center">
<div class="avatar h-10 w-10">
<img class="rounded-full" src="{{ asset('images/200x200.png') }}" alt="avatar" />
</div>
<p class="mt-1.5 text-xs+ font-medium text-slate-700 line-clamp-1 dark:text-navy-100">
Travis
</p>
</div>
<div class="text-center">
<div class="avatar h-10 w-10">
<img class="rounded-full" src="{{ asset('images/200x200.png') }}" alt="avatar" />
</div>
<p class="mt-1.5 text-xs+ font-medium text-slate-700 line-clamp-1 dark:text-navy-100">
Curtis
</p>
</div>
<div class="text-center">
<div class="avatar h-10 w-10">
<img class="rounded-full" src="{{ asset('images/200x200.png') }}" alt="avatar" />
</div>
<p class="mt-1.5 text-xs+ font-medium text-slate-700 line-clamp-1 dark:text-navy-100">
Konnor
</p>
</div>
<div class="text-center">
<div class="avatar h-10 w-10">
<img class="rounded-full" src="{{ asset('images/200x200.png') }}" alt="avatar" />
</div>
<p class="mt-1.5 text-xs+ font-medium text-slate-700 line-clamp-1 dark:text-navy-100">
Guzman
</p>
</div>
</div>
</div>
</div>
</div>
</main>
</x-app-layout>
resources/views/pages/dashboards-workspaces.blade.php deleted 100644 → 0
View file @ 5bad2db9
<x-app-layout title="Workspace Dashboard" is-header-blur="true">
<!-- Main Content Wrapper -->
<main class="main-content w-full px-[var(--margin-x)] pb-8">
<div class="mt-5 flex items-center justify-between">
<h3 class="text-lg font-medium text-slate-700 line-clamp-1 dark:text-navy-50">
Workspaces Overview
</h3>
<div class="flex">
<button
class="btn h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round"
d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
</button>
<button
class="btn h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round"
d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</button>
</div>
</div>
<div class="mt-4 grid grid-cols-12 gap-4 sm:gap-5 lg:gap-6">
<div class="card group col-span-12 lg:col-span-7">
<div class="mt-3 flex items-center justify-between px-4 sm:px-5">
<div class="flex flex-1 items-center justify-between space-x-2 sm:flex-initial">
<h2 class="text-sm+ font-medium tracking-wide text-slate-700 dark:text-navy-100">
Server traffic
</h2>
<div x-data="usePopper({ placement: 'bottom-start', offset: 4 })" @click.outside="if(isShowPopper) isShowPopper = false"
:class="!isShowPopper && 'sm:opacity-0'"
class="inline-flex focus-within:opacity-100 group-hover:opacity-100">
<button x-ref="popperRef" @click="isShowPopper = !isShowPopper"
class="btn h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
</svg>
</button>
<div x-ref="popperRoot" class="popper-root" :class="isShowPopper && 'show'">
<div
class="popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700">
<ul>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Action</a>
</li>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Another
Action</a>
</li>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Something
else</a>
</li>
</ul>
<div class="my-1 h-px bg-slate-150 dark:bg-navy-500"></div>
<ul>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Separated
Link</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="hidden justify-between space-x-4 text-xs+ sm:flex" x-data="{ activeTab: 'tabAll' }">
<button @click="activeTab = 'tabRecent'" class="font-medium tracking-wide"
:class="activeTab === 'tabRecent' && 'text-primary dark:text-accent-light'">
Last 7 days
</button>
<button @click="activeTab = 'tabAll'" class="font-medium tracking-wide"
:class="activeTab === 'tabAll' && 'text-primary dark:text-accent-light'">
All time
</button>
</div>
</div>
<div class="ax-transparent-gridline pr-2">
<div x-init="$nextTick(() => {
$el._x_chart = new ApexCharts($el, pages.charts.serverTraffic);
$el._x_chart.render()
});"></div>
</div>
</div>
<div class="order-first col-span-12 grid grid-cols-2 gap-4 sm:order-none sm:gap-5 lg:col-span-5 lg:gap-6">
<div class="card row-span-2 justify-between py-5 px-2 text-center">
<p class="font-medium tracking-wide text-slate-700 dark:text-navy-100">
CPU Usage
</p>
<div class="ax-transparent-gridline pr-1">
<div x-init="$nextTick(() => {
$el._x_chart = new ApexCharts($el, pages.charts.cpuUsage);
$el._x_chart.render()
});"></div>
</div>
<p class="mt-4 text-xs+">
Daily usage is
<span class="font-medium text-slate-700 dark:text-navy-100">Good</span>
</p>
</div>
<div class="card justify-center p-4">
<div class="flex items-center space-x-3">
<div>
<div x-init="$nextTick(() => {
$el._x_chart = new ApexCharts($el, pages.charts.storageUsage);
$el._x_chart.render()
});"></div>
</div>
<div class="text-xs+ font-medium text-slate-700 dark:text-navy-100">
Storage Usage
</div>
</div>
</div>
<div class="card justify-center p-4">
<div class="flex items-center space-x-3">
<div>
<div x-init="$nextTick(() => {
$el._x_chart = new ApexCharts($el, pages.charts.memoryUsage);
$el._x_chart.render()
});"></div>
</div>
<div class="text-xs+ font-medium text-slate-700 dark:text-navy-100">
Memory Usage
</div>
</div>
</div>
<div class="card flex-row overflow-hidden">
<div class="h-full w-1 shrink-0 bg-primary dark:bg-accent"></div>
<div class="p-4 font-inter">
<div class="flex items-baseline space-x-2">
<p class="text-2xl font-semibold text-slate-700 dark:text-navy-100">
4.54
</p>
<p class="text-xs">/12 GB</p>
</div>
<p class="text-xs">Daily traffic</p>
</div>
</div>
<div class="card flex-row overflow-hidden">
<div class="h-full w-1 shrink-0 bg-info"></div>
<div class="p-4 font-inter">
<div class="flex items-baseline space-x-2">
<p class="text-2xl font-semibold text-slate-700 dark:text-navy-100">
14.54
</p>
<p class="text-xs">/12 GB</p>
</div>
<p class="text-xs">Hourly traffic</p>
</div>
</div>
</div>
</div>
<div class="mt-4 sm:mt-5 lg:mt-6">
<div class="flex items-center justify-between">
<h2 class="text-base font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100">
Monitoring Workspaces
</h2>
<div class="flex">
<div class="flex items-center" x-data="{ isInputActive: false }">
<label class="block">
<input x-effect="isInputActive === true && $nextTick(() => { $el.focus()});"
:class="isInputActive ? 'w-32 lg:w-48' : 'w-0'"
class="form-input bg-transparent px-1 text-right transition-all duration-100 placeholder:text-slate-500 dark:placeholder:text-navy-200"
placeholder="Search here..." type="text" />
</label>
<button @click="isInputActive = !isInputActive"
class="btn h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
</button>
</div>
<div x-data="usePopper({ placement: 'bottom-end', offset: 4 })" @click.outside="if(isShowPopper) isShowPopper = false"
class="inline-flex">
<button x-ref="popperRef" @click="isShowPopper = !isShowPopper"
class="btn h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
</svg>
</button>
<div x-ref="popperRoot" class="popper-root" :class="isShowPopper && 'show'">
<div
class="popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700">
<ul>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Action</a>
</li>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Another
Action</a>
</li>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Something
else</a>
</li>
</ul>
<div class="my-1 h-px bg-slate-150 dark:bg-navy-500"></div>
<ul>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Separated
Link</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="mt-3 grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-5 lg:grid-cols-3 lg:gap-6">
<div class="card space-y-6 p-4 sm:px-5">
<div class="flex items-center justify-between">
<div>
<p class="text-lg font-semibold uppercase text-primary dark:text-accent-light">
Id: 5988745
</p>
</div>
<div x-data="usePopper({ placement: 'bottom-end', offset: 4 })" @click.outside="if(isShowPopper) isShowPopper = false"
class="inline-flex">
<button x-ref="popperRef" @click="isShowPopper = !isShowPopper"
class="btn -mr-1.5 h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
</svg>
</button>
<div x-ref="popperRoot" class="popper-root" :class="isShowPopper && 'show'">
<div
class="popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700">
<ul>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Action</a>
</li>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Another
Action</a>
</li>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Something
else</a>
</li>
</ul>
<div class="my-1 h-px bg-slate-150 dark:bg-navy-500"></div>
<ul>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Separated
Link</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div>
<p class="text-xs uppercase">Current Status</p>
<p class="text-base font-medium text-success">Up for 7 hours</p>
</div>
<div class="flex grow justify-between space-x-2">
<div>
<p class="text-xs+ text-slate-400 dark:text-navy-300">
Total Uptime
</p>
<p class="text-lg font-semibold text-slate-700 dark:text-navy-100">
96.4%
</p>
</div>
<div>
<p class="text-xs+ text-slate-400 dark:text-navy-300">
Response
</p>
<p class="text-lg font-semibold text-slate-700 dark:text-navy-100">
3.4 s
</p>
</div>
<div>
<p class="text-xs+ text-slate-400 dark:text-navy-300">
Memory
</p>
<p class="text-lg font-semibold text-slate-700 dark:text-navy-100">
14 GB
</p>
</div>
</div>
<div class="space-y-3">
<div class="flex justify-between">
<p class="text-xs uppercase text-slate-400 dark:text-navy-300">
Country
</p>
<p class="text-xs uppercase text-slate-400 dark:text-navy-300">
traffic
</p>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center space-x-2">
<img class="h-6 w-6" src="{{ asset('images/flags/usa-round.svg') }}"
alt="flag" />
<p class="font-medium text-slate-700 dark:text-navy-100">
Unated States
</p>
</div>
<div class="font-inter">
<span class="text-right font-medium text-slate-700 dark:text-navy-100">4.5 GB</span>
<span class="text-xs">/8 GB</span>
</div>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center space-x-2">
<img class="h-6 w-6" src="{{ asset('images/flags/russia-round.svg') }}"
alt="flag" />
<p class="font-medium text-slate-700 dark:text-navy-100">
Russia
</p>
</div>
<div class="font-inter">
<span class="text-right font-medium text-slate-700 dark:text-navy-100">6.22 GB</span>
<span class="text-xs">/12 GB</span>
</div>
</div>
</div>
<div class="flex flex-wrap space-x-2">
<div class="badge bg-info/10 text-info dark:bg-info/15">
195.161.66.25
</div>
<div class="badge bg-info/10 text-info dark:bg-info/15">
215.122.127.155
</div>
</div>
</div>
<div class="card space-y-6 p-4 sm:px-5">
<div class="flex items-center justify-between">
<div>
<p class="text-lg font-semibold uppercase text-primary dark:text-accent-light">
Id: 6518869
</p>
</div>
<div x-data="usePopper({ placement: 'bottom-end', offset: 4 })" @click.outside="if(isShowPopper) isShowPopper = false"
class="inline-flex">
<button x-ref="popperRef" @click="isShowPopper = !isShowPopper"
class="btn -mr-1.5 h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
</svg>
</button>
<div x-ref="popperRoot" class="popper-root" :class="isShowPopper && 'show'">
<div
class="popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700">
<ul>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Action</a>
</li>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Another
Action</a>
</li>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Something
else</a>
</li>
</ul>
<div class="my-1 h-px bg-slate-150 dark:bg-navy-500"></div>
<ul>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Separated
Link</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div>
<p class="text-xs uppercase">Current Status</p>
<p class="text-base font-medium text-success">Up for 2 hours</p>
</div>
<div class="flex grow justify-between space-x-2">
<div>
<p class="text-xs+ text-slate-400 dark:text-navy-300">
Total Uptime
</p>
<p class="text-lg font-semibold text-slate-700 dark:text-navy-100">
98.2%
</p>
</div>
<div>
<p class="text-xs+ text-slate-400 dark:text-navy-300">
Response
</p>
<p class="text-lg font-semibold text-slate-700 dark:text-navy-100">
4.3 s
</p>
</div>
<div>
<p class="text-xs+ text-slate-400 dark:text-navy-300">
Memory
</p>
<p class="text-lg font-semibold text-slate-700 dark:text-navy-100">
22 GB
</p>
</div>
</div>
<div class="space-y-3">
<div class="flex justify-between">
<p class="text-xs uppercase text-slate-400 dark:text-navy-300">
Country
</p>
<p class="text-xs uppercase text-slate-400 dark:text-navy-300">
traffic
</p>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center space-x-2">
<img class="h-6 w-6" src="{{ asset('images/flags/australia-round.svg') }}"
alt="flag" />
<p class="font-medium text-slate-700 dark:text-navy-100">
Australia
</p>
</div>
<div class="font-inter">
<span class="text-right font-medium text-slate-700 dark:text-navy-100">3.76 GB</span>
<span class="text-xs">/5 GB</span>
</div>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center space-x-2">
<img class="h-6 w-6" src="{{ asset('images/flags/united-kingdom-round.svg') }}"
alt="flag" />
<p class="font-medium text-slate-700 dark:text-navy-100">
UK
</p>
</div>
<div class="font-inter">
<span class="text-right font-medium text-slate-700 dark:text-navy-100">6.65 GB</span>
<span class="text-xs">/10 GB</span>
</div>
</div>
</div>
<div class="flex flex-wrap space-x-2">
<div class="badge bg-info/10 text-info dark:bg-info/15">
195.161.66.25
</div>
<div class="badge bg-info/10 text-info dark:bg-info/15">
215.122.127.155
</div>
</div>
</div>
<div class="card space-y-6 p-4 sm:px-5">
<div class="flex items-center justify-between">
<div>
<p class="text-lg font-semibold uppercase text-primary dark:text-accent-light">
Id: 3591458
</p>
</div>
<div x-data="usePopper({ placement: 'bottom-end', offset: 4 })" @click.outside="if(isShowPopper) isShowPopper = false"
class="inline-flex">
<button x-ref="popperRef" @click="isShowPopper = !isShowPopper"
class="btn -mr-1.5 h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
</svg>
</button>
<div x-ref="popperRoot" class="popper-root" :class="isShowPopper && 'show'">
<div
class="popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700">
<ul>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Action</a>
</li>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Another
Action</a>
</li>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Something
else</a>
</li>
</ul>
<div class="my-1 h-px bg-slate-150 dark:bg-navy-500"></div>
<ul>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Separated
Link</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div>
<p class="text-xs uppercase">Current Status</p>
<p class="text-base font-medium text-warning">
Down for 22 minutes
</p>
</div>
<div class="flex grow justify-between space-x-2">
<div>
<p class="text-xs+ text-slate-400 dark:text-navy-300">
Total Uptime
</p>
<p class="text-lg font-semibold text-slate-700 dark:text-navy-100">
95.7%
</p>
</div>
<div>
<p class="text-xs+ text-slate-400 dark:text-navy-300">
Response
</p>
<p class="text-lg font-semibold text-slate-700 dark:text-navy-100">
2.1 s
</p>
</div>
<div>
<p class="text-xs+ text-slate-400 dark:text-navy-300">
Memory
</p>
<p class="text-lg font-semibold text-slate-700 dark:text-navy-100">
6 GB
</p>
</div>
</div>
<div class="space-y-3">
<div class="flex justify-between">
<p class="text-xs uppercase text-slate-400 dark:text-navy-300">
Country
</p>
<p class="text-xs uppercase text-slate-400 dark:text-navy-300">
traffic
</p>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center space-x-2">
<img class="h-6 w-6" src="{{ asset('images/flags/brazil-round.svg') }}"
alt="flag" />
<p class="font-medium text-slate-700 dark:text-navy-100">
Brazil
</p>
</div>
<div class="font-inter">
<span class="text-right font-medium text-slate-700 dark:text-navy-100">6.1 GB</span>
<span class="text-xs">/20 GB</span>
</div>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center space-x-2">
<img class="h-6 w-6" src="{{ asset('images/flags/spain-round.svg') }}"
alt="flag" />
<p class="font-medium text-slate-700 dark:text-navy-100">
Spain
</p>
</div>
<div class="font-inter">
<span class="text-right font-medium text-slate-700 dark:text-navy-100">5.02 GB</span>
<span class="text-xs">/10 GB</span>
</div>
</div>
</div>
<div class="flex flex-wrap space-x-2">
<div class="badge bg-info/10 text-info dark:bg-info/15">
195.161.66.25
</div>
<div class="badge bg-info/10 text-info dark:bg-info/15">
215.122.127.155
</div>
</div>
</div>
<div class="card space-y-6 p-4 sm:px-5">
<div class="flex items-center justify-between">
<div>
<p class="text-lg font-semibold uppercase text-primary dark:text-accent-light">
Id: 9462157
</p>
</div>
<div x-data="usePopper({ placement: 'bottom-end', offset: 4 })" @click.outside="if(isShowPopper) isShowPopper = false"
class="inline-flex">
<button x-ref="popperRef" @click="isShowPopper = !isShowPopper"
class="btn -mr-1.5 h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
</svg>
</button>
<div x-ref="popperRoot" class="popper-root" :class="isShowPopper && 'show'">
<div
class="popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700">
<ul>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Action</a>
</li>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Another
Action</a>
</li>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Something
else</a>
</li>
</ul>
<div class="my-1 h-px bg-slate-150 dark:bg-navy-500"></div>
<ul>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Separated
Link</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div>
<p class="text-xs uppercase">Current Status</p>
<p class="text-base font-medium text-success">
Up for 48 hours
</p>
</div>
<div class="flex grow justify-between space-x-2">
<div>
<p class="text-xs+ text-slate-400 dark:text-navy-300">
Total Uptime
</p>
<p class="text-lg font-semibold text-slate-700 dark:text-navy-100">
98.7%
</p>
</div>
<div>
<p class="text-xs+ text-slate-400 dark:text-navy-300">
Response
</p>
<p class="text-lg font-semibold text-slate-700 dark:text-navy-100">
1.7 s
</p>
</div>
<div>
<p class="text-xs+ text-slate-400 dark:text-navy-300">
Memory
</p>
<p class="text-lg font-semibold text-slate-700 dark:text-navy-100">
9 GB
</p>
</div>
</div>
<div class="space-y-3">
<div class="flex justify-between">
<p class="text-xs uppercase text-slate-400 dark:text-navy-300">
Country
</p>
<p class="text-xs uppercase text-slate-400 dark:text-navy-300">
traffic
</p>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center space-x-2">
<img class="h-6 w-6" src="{{ asset('images/flags/india-round.svg') }}"
alt="flag" />
<p class="font-medium text-slate-700 dark:text-navy-100">
India
</p>
</div>
<div class="font-inter">
<span class="text-right font-medium text-slate-700 dark:text-navy-100">4.5 GB</span>
<span class="text-xs">/12 GB</span>
</div>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center space-x-2">
<img class="h-6 w-6" src="{{ asset('images/flags/russia-round.svg') }}"
alt="flag" />
<p class="font-medium text-slate-700 dark:text-navy-100">
Russia
</p>
</div>
<div class="font-inter">
<span class="text-right font-medium text-slate-700 dark:text-navy-100">6.2 GB</span>
<span class="text-xs">/8 GB</span>
</div>
</div>
</div>
<div class="flex flex-wrap space-x-2">
<div class="badge bg-info/10 text-info dark:bg-info/15">
195.161.66.25
</div>
<div class="badge bg-info/10 text-info dark:bg-info/15">
215.122.127.155
</div>
</div>
</div>
<div class="card space-y-6 p-4 sm:px-5">
<div class="flex items-center justify-between">
<div>
<p class="text-lg font-semibold uppercase text-primary dark:text-accent-light">
Id: 6517997
</p>
</div>
<div x-data="usePopper({ placement: 'bottom-end', offset: 4 })" @click.outside="if(isShowPopper) isShowPopper = false"
class="inline-flex">
<button x-ref="popperRef" @click="isShowPopper = !isShowPopper"
class="btn -mr-1.5 h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
</svg>
</button>
<div x-ref="popperRoot" class="popper-root" :class="isShowPopper && 'show'">
<div
class="popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700">
<ul>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Action</a>
</li>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Another
Action</a>
</li>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Something
else</a>
</li>
</ul>
<div class="my-1 h-px bg-slate-150 dark:bg-navy-500"></div>
<ul>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Separated
Link</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div>
<p class="text-xs uppercase">Current Status</p>
<p class="text-base font-medium text-warning">
Down for 6 minutes
</p>
</div>
<div class="flex grow justify-between space-x-2">
<div>
<p class="text-xs+ text-slate-400 dark:text-navy-300">
Total Uptime
</p>
<p class="text-lg font-semibold text-slate-700 dark:text-navy-100">
95.43%
</p>
</div>
<div>
<p class="text-xs+ text-slate-400 dark:text-navy-300">
Response
</p>
<p class="text-lg font-semibold text-slate-700 dark:text-navy-100">
4.65 s
</p>
</div>
<div>
<p class="text-xs+ text-slate-400 dark:text-navy-300">
Memory
</p>
<p class="text-lg font-semibold text-slate-700 dark:text-navy-100">
12 GB
</p>
</div>
</div>
<div class="space-y-3">
<div class="flex justify-between">
<p class="text-xs uppercase text-slate-400 dark:text-navy-300">
Country
</p>
<p class="text-xs uppercase text-slate-400 dark:text-navy-300">
traffic
</p>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center space-x-2">
<img class="h-6 w-6" src="{{ asset('images/flags/china-round.svg') }}"
alt="flag" />
<p class="font-medium text-slate-700 dark:text-navy-100">
China
</p>
</div>
<div class="font-inter">
<span class="text-right font-medium text-slate-700 dark:text-navy-100">6.6 GB</span>
<span class="text-xs">/10 GB</span>
</div>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center space-x-2">
<img class="h-6 w-6" src="{{ asset('images/flags/usa-round.svg') }}"
alt="flag" />
<p class="font-medium text-slate-700 dark:text-navy-100">
United States
</p>
</div>
<div class="font-inter">
<span class="text-right font-medium text-slate-700 dark:text-navy-100">9.9 GB</span>
<span class="text-xs">/11 GB</span>
</div>
</div>
</div>
<div class="flex flex-wrap space-x-2">
<div class="badge bg-info/10 text-info dark:bg-info/15">
195.161.66.25
</div>
<div class="badge bg-info/10 text-info dark:bg-info/15">
215.122.127.155
</div>
</div>
</div>
<div class="card space-y-6 p-4 sm:px-5">
<div class="flex items-center justify-between">
<div>
<p class="text-lg font-semibold uppercase text-primary dark:text-accent-light">
Id: 7958652
</p>
</div>
<div x-data="usePopper({ placement: 'bottom-end', offset: 4 })" @click.outside="if(isShowPopper) isShowPopper = false"
class="inline-flex">
<button x-ref="popperRef" @click="isShowPopper = !isShowPopper"
class="btn -mr-1.5 h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
</svg>
</button>
<div x-ref="popperRoot" class="popper-root" :class="isShowPopper && 'show'">
<div
class="popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700">
<ul>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Action</a>
</li>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Another
Action</a>
</li>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Something
else</a>
</li>
</ul>
<div class="my-1 h-px bg-slate-150 dark:bg-navy-500"></div>
<ul>
<li>
<a href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">Separated
Link</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div>
<p class="text-xs uppercase">Current Status</p>
<p class="text-base font-medium text-success">Up for 2 hours</p>
</div>
<div class="flex grow justify-between space-x-2">
<div>
<p class="text-xs+ text-slate-400 dark:text-navy-300">
Total Uptime
</p>
<p class="text-lg font-semibold text-slate-700 dark:text-navy-100">
97.27%
</p>
</div>
<div>
<p class="text-xs+ text-slate-400 dark:text-navy-300">
Response
</p>
<p class="text-lg font-semibold text-slate-700 dark:text-navy-100">
3.88 s
</p>
</div>
<div>
<p class="text-xs+ text-slate-400 dark:text-navy-300">
Memory
</p>
<p class="text-lg font-semibold text-slate-700 dark:text-navy-100">
10 GB
</p>
</div>
</div>
<div class="space-y-3">
<div class="flex justify-between">
<p class="text-xs uppercase text-slate-400 dark:text-navy-300">
Country
</p>
<p class="text-xs uppercase text-slate-400 dark:text-navy-300">
traffic
</p>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center space-x-2">
<img class="h-6 w-6" src="{{ asset('images/flags/italy-round.svg') }}"
alt="flag" />
<p class="font-medium text-slate-700 dark:text-navy-100">
Italy
</p>
</div>
<div class="font-inter">
<span class="text-right font-medium text-slate-700 dark:text-navy-100">14.5 GB</span>
<span class="text-xs">/20 GB</span>
</div>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center space-x-2">
<img class="h-6 w-6" src="{{ asset('images/flags/switzerland-round.svg') }}"
alt="flag" />
<p class="font-medium text-slate-700 dark:text-navy-100">
Switzerland
</p>
</div>
<div class="font-inter">
<span class="text-right font-medium text-slate-700 dark:text-navy-100">9.4 GB</span>
<span class="text-xs">/16 GB</span>
</div>
</div>
</div>
<div class="flex flex-wrap space-x-2">
<div class="badge bg-info/10 text-info dark:bg-info/15">
195.161.66.25
</div>
<div class="badge bg-info/10 text-info dark:bg-info/15">
215.122.127.155
</div>
</div>
</div>
</div>
</div>
</main>
</x-app-layout>
resources/views/pages/elements-alert.blade.php deleted 100644 → 0
View file @ 5bad2db9
<x-app-layout title="Alert Element" is-sidebar-open="true" is-header-blur="true">
<main class="main-content w-full px-[var(--margin-x)] pb-8">
<div class="flex items-center space-x-4 py-5 lg:py-6">
<h2
class="text-xl font-medium text-slate-800 dark:text-navy-50 lg:text-2xl"
>
Alert
</h2>
<div class="hidden h-full py-1 sm:flex">
<div class="h-full w-px bg-slate-300 dark:bg-navy-600"></div>
</div>
<ul class="hidden flex-wrap items-center space-x-2 sm:flex">
<li class="flex items-center space-x-2">
<a
class="text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
href="#"
>Elements</a
>
<svg
x-ignore
xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9 5l7 7-7 7"
/>
</svg>
</li>
<li>Alert</li>
</ul>
</div>
<div class="grid grid-cols-1 gap-4 sm:gap-5 lg:grid-cols-2 lg:gap-6">
<!-- Basic Alert -->
<div class="card px-4 pb-4 sm:px-5">
<div class="my-3 flex h-8 items-center justify-between">
<h2
class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base"
>
Basic Alert
</h2>
<label class="flex items-center space-x-2">
<span class="text-xs text-slate-400 dark:text-navy-300"
>Code</span
>
<input
@change="helpers.toggleCode"
class="form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
type="checkbox"
/>
</label>
</div>
<div class="max-w-2xl">
<p>
The alert component is used to convey important information to
the user through the use of contextual types, icons, and colors
</p>
<div class="mt-5 space-y-4">
<div
class="alert flex rounded-lg bg-slate-200 px-4 py-4 text-slate-600 dark:bg-navy-500 dark:text-navy-100 sm:px-5"
>
This is simple alert
</div>
<div
class="alert flex rounded-lg bg-primary px-4 py-4 text-white dark:bg-accent sm:px-5"
>
This is simple alert
</div>
<div
class="alert flex rounded-lg bg-secondary px-4 py-4 text-white sm:px-5"
>
This is simple alert
</div>
<div
class="alert flex rounded-lg bg-info px-4 py-4 text-white sm:px-5"
>
This is simple alert
</div>
<div
class="alert flex rounded-lg bg-success px-4 py-4 text-white sm:px-5"
>
This is simple alert
</div>
<div
class="alert flex rounded-lg bg-warning px-4 py-4 text-white sm:px-5"
>
This is simple alert
</div>
<div
class="alert flex rounded-lg bg-error px-4 py-4 text-white sm:px-5"
>
This is simple alert
</div>
</div>
</div>
<div class="code-wrapper hidden pt-4">
<pre
class="is-scrollbar-hidden max-h-96 overflow-auto rounded-lg"
x-init="hljs.highlightElement($el)"
>
<code class="language-html" x-ignore>
&lt;div&#13;&#10; class=&quot;alert flex rounded-lg bg-slate-200 px-4 py-4 text-slate-600 dark:bg-navy-500 dark:text-navy-100 sm:px-5&quot;&#13;&#10; &gt;&#13;&#10; This is simple alert&#13;&#10; &lt;/div&gt;&#13;&#10;&#13;&#10; &lt;div&#13;&#10; class=&quot;alert flex rounded-lg bg-primary px-4 py-4 text-white dark:bg-accent sm:px-5&quot;&#13;&#10; &gt;&#13;&#10; This is simple alert&#13;&#10; &lt;/div&gt;&#13;&#10;&#13;&#10; &lt;div class=&quot;alert flex rounded-lg bg-secondary px-4 py-4 text-white sm:px-5&quot;&gt;&#13;&#10; This is simple alert&#13;&#10; &lt;/div&gt;&#13;&#10;&#13;&#10; &lt;div class=&quot;alert flex rounded-lg bg-info px-4 py-4 text-white sm:px-5&quot;&gt;&#13;&#10; This is simple alert&#13;&#10; &lt;/div&gt;&#13;&#10;&#13;&#10; &lt;div class=&quot;alert flex rounded-lg bg-success px-4 py-4 text-white sm:px-5&quot;&gt;&#13;&#10; This is simple alert&#13;&#10; &lt;/div&gt;&#13;&#10;&#13;&#10; &lt;div class=&quot;alert flex rounded-lg bg-warning px-4 py-4 text-white sm:px-5&quot;&gt;&#13;&#10; This is simple alert&#13;&#10; &lt;/div&gt;&#13;&#10;&#13;&#10; &lt;div class=&quot;alert flex rounded-lg bg-error px-4 py-4 text-white sm:px-5&quot;&gt;&#13;&#10; This is simple alert&#13;&#10; &lt;/div&gt;</code>
</pre>
</div>
</div>
<!-- Outlined Alert -->
<div class="card px-4 pb-4 sm:px-5">
<div class="my-3 flex h-8 items-center justify-between">
<h2
class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base"
>
Outlined Alert
</h2>
<label class="flex items-center space-x-2">
<span class="text-xs text-slate-400 dark:text-navy-300"
>Code</span
>
<input
@change="helpers.toggleCode"
class="form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
type="checkbox"
/>
</label>
</div>
<div class="max-w-2xl">
<p>Alerts can be outlied. Check out code for detail of usage.</p>
<div class="mt-5 space-y-4">
<div
class="alert flex rounded-lg border border-slate-300 px-4 py-4 text-slate-800 dark:border-navy-450 dark:text-navy-50 sm:px-5"
>
This is simple alert
</div>
<div
class="alert flex rounded-lg border border-primary px-4 py-4 text-primary dark:border-accent dark:text-accent-light sm:px-5"
>
This is simple alert
</div>
<div
class="alert flex rounded-lg border border-secondary px-4 py-4 text-secondary dark:border-secondary dark:text-secondary-light sm:px-5"
>
This is simple alert
</div>
<div
class="alert flex rounded-lg border border-info px-4 py-4 text-info sm:px-5"
>
This is simple alert
</div>
<div
class="alert flex rounded-lg border border-success px-4 py-4 text-success sm:px-5"
>
This is simple alert
</div>
<div
class="alert flex rounded-lg border border-warning px-4 py-4 text-warning sm:px-5"
>
This is simple alert
</div>
<div
class="alert flex rounded-lg border border-error px-4 py-4 text-error sm:px-5"
>
This is simple alert
</div>
</div>
</div>
<div class="code-wrapper hidden pt-4">
<pre
class="is-scrollbar-hidden max-h-96 overflow-auto rounded-lg"
x-init="hljs.highlightElement($el)"
>
<code class="language-html" x-ignore>
&lt;div&#13;&#10; class=&quot;alert flex rounded-lg border border-slate-300 px-4 py-4 text-slate-800 dark:border-navy-450 dark:text-navy-50 sm:px-5&quot;&#13;&#10; &gt;&#13;&#10; This is simple alert&#13;&#10; &lt;/div&gt;&#13;&#10;&#13;&#10; &lt;div&#13;&#10; class=&quot;alert flex rounded-lg border border-primary px-4 py-4 text-primary dark:border-accent dark:text-accent-light sm:px-5&quot;&#13;&#10; &gt;&#13;&#10; This is simple alert&#13;&#10; &lt;/div&gt;&#13;&#10;&#13;&#10; &lt;div&#13;&#10; class=&quot;alert flex rounded-lg border border-secondary px-4 py-4 text-secondary dark:border-secondary dark:text-secondary-light sm:px-5&quot;&#13;&#10; &gt;&#13;&#10; This is simple alert&#13;&#10; &lt;/div&gt;&#13;&#10;&#13;&#10; &lt;div&#13;&#10; class=&quot;alert flex rounded-lg border border-info px-4 py-4 text-info sm:px-5&quot;&#13;&#10; &gt;&#13;&#10; This is simple alert&#13;&#10; &lt;/div&gt;&#13;&#10;&#13;&#10; &lt;div&#13;&#10; class=&quot;alert flex rounded-lg border border-success px-4 py-4 text-success sm:px-5&quot;&#13;&#10; &gt;&#13;&#10; This is simple alert&#13;&#10; &lt;/div&gt;&#13;&#10;&#13;&#10; &lt;div&#13;&#10; class=&quot;alert flex rounded-lg border border-warning px-4 py-4 text-warning sm:px-5&quot;&#13;&#10; &gt;&#13;&#10; This is simple alert&#13;&#10; &lt;/div&gt;&#13;&#10;&#13;&#10; &lt;div&#13;&#10; class=&quot;alert flex rounded-lg border border-error px-4 py-4 text-error sm:px-5&quot;&#13;&#10; &gt;&#13;&#10; This is simple alert&#13;&#10; &lt;/div&gt;</code>
</pre>
</div>
</div>
<!-- Soft Color Alert -->
<div class="card px-4 pb-4 sm:px-5">
<div class="my-3 flex h-8 items-center justify-between">
<h2
class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base"
>
Outlined Alert
</h2>
<label class="flex items-center space-x-2">
<span class="text-xs text-slate-400 dark:text-navy-300"
>Code</span
>
<input
@change="helpers.toggleCode"
class="form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
type="checkbox"
/>
</label>
</div>
<div class="max-w-2xl">
<p>
Alerts can have a soft colors. To do this, you should use some
opacity. Check out code for detail of usage.
</p>
<div class="mt-5 space-y-4">
<div
class="alert flex rounded-full bg-primary/10 py-4 px-4 text-primary dark:bg-accent-light/15 dark:text-accent-light sm:px-5"
>
This is simple alert
</div>
<div
class="alert flex rounded-full bg-secondary/10 py-4 px-4 text-secondary dark:bg-secondary-light/15 dark:text-secondary-light sm:px-5"
>
This is simple alert
</div>
<div
class="alert flex rounded-full bg-info/10 py-4 px-4 text-info dark:bg-info/15 sm:px-5"
>
This is simple alert
</div>
<div
class="alert flex rounded-full bg-success/10 py-4 px-4 text-success dark:bg-success/15 sm:px-5"
>
This is simple alert
</div>
<div
class="alert flex rounded-full bg-warning/10 py-4 px-4 text-warning dark:bg-warning/15 sm:px-5"
>
This is simple alert
</div>
<div
class="alert flex rounded-full bg-error/10 py-4 px-4 text-error dark:bg-error/15 sm:px-5"
>
This is simple alert
</div>
</div>
</div>
<div class="code-wrapper hidden pt-4">
<pre
class="is-scrollbar-hidden max-h-96 overflow-auto rounded-lg"
x-init="hljs.highlightElement($el)"
>
<code class="language-html" x-ignore>
&lt;div&#13;&#10; class=&quot;alert flex rounded-full bg-primary/10 py-4 px-4 text-primary dark:bg-accent-light/15 dark:text-accent-light sm:px-5&quot;&#13;&#10; &gt;&#13;&#10; This is simple alert&#13;&#10; &lt;/div&gt;&#13;&#10;&#13;&#10; &lt;div&#13;&#10; class=&quot;alert flex rounded-full bg-secondary/10 py-4 px-4 text-secondary dark:bg-secondary-light/15 dark:text-secondary-light sm:px-5&quot;&#13;&#10; &gt;&#13;&#10; This is simple alert&#13;&#10; &lt;/div&gt;&#13;&#10;&#13;&#10; &lt;div&#13;&#10; class=&quot;alert flex rounded-full bg-info/10 py-4 px-4 text-info dark:bg-info/15 sm:px-5&quot;&#13;&#10; &gt;&#13;&#10; This is simple alert&#13;&#10; &lt;/div&gt;&#13;&#10;&#13;&#10; &lt;div&#13;&#10; class=&quot;alert flex rounded-full bg-success/10 py-4 px-4 text-success dark:bg-success/15 sm:px-5&quot;&#13;&#10; &gt;&#13;&#10; This is simple alert&#13;&#10; &lt;/div&gt;&#13;&#10;&#13;&#10; &lt;div&#13;&#10; class=&quot;alert flex rounded-full bg-warning/10 py-4 px-4 text-warning dark:bg-warning/15 sm:px-5&quot;&#13;&#10; &gt;&#13;&#10; This is simple alert&#13;&#10; &lt;/div&gt;&#13;&#10;&#13;&#10; &lt;div&#13;&#10; class=&quot;alert flex rounded-full bg-error/10 py-4 px-4 text-error dark:bg-error/15 sm:px-5&quot;&#13;&#10; &gt;&#13;&#10; This is simple alert&#13;&#10; &lt;/div&gt;&#13;&#10;</code>
</pre>
</div>
</div>
<!-- Bordered Alert -->
<div class="card px-4 pb-4 sm:px-5">
<div class="my-3 flex h-8 items-center justify-between">
<h2
class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base"
>
Bordered Alert
</h2>
<label class="flex items-center space-x-2">
<span class="text-xs text-slate-400 dark:text-navy-300"
>Code</span
>
<input
@change="helpers.toggleCode"
class="form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
type="checkbox"
/>
</label>
</div>
<div class="max-w-2xl">
<p>
Alerts can have a border. Check out code for detail of usage.
</p>
<div class="mt-5 space-y-4">
<div
class="alert flex rounded-full border border-primary bg-primary/10 py-4 px-4 text-primary dark:border-accent dark:bg-accent-light/15 dark:text-accent-light sm:px-5"
>
This is simple alert
</div>
<div
class="alert flex overflow-hidden rounded-lg bg-secondary/10 text-secondary dark:bg-secondary-light/15 dark:text-secondary-light"
>
<div class="w-1.5 bg-secondary"></div>
<div class="p-4">This is simple alert</div>
</div>
<div
class="alert flex overflow-hidden rounded-lg border border-info text-info"
>
<div class="bg-info p-3 text-white">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
</div>
<div class="px-4 py-3 sm:px-5">This is simple alert</div>
</div>
<div
class="alert flex rounded-lg border border-success/30 bg-success/10 py-4 px-4 text-success sm:px-5"
>
This is simple alert
</div>
<div
class="alert flex overflow-hidden rounded-lg bg-warning/10 text-warning dark:bg-warning/15"
>
<div class="flex flex-1 items-center space-x-3 p-4">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
/>
</svg>
<div class="flex-1">This is simple alert</div>
</div>
<div class="w-1.5 bg-warning"></div>
</div>
<div
class="alert flex space-x-2 rounded-lg border border-error px-4 py-4 text-error"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fill-rule="evenodd"
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z"
clip-rule="evenodd"
/>
</svg>
<p>This is simple alert</p>
</div>
</div>
</div>
<div class="code-wrapper hidden pt-4">
<pre
class="is-scrollbar-hidden max-h-96 overflow-auto rounded-lg"
x-init="hljs.highlightElement($el)"
>
<code class="language-html" x-ignore>
&lt;div&#13;&#10; class=&quot;alert flex rounded-full border border-primary bg-primary/10 py-4 px-4 text-primary dark:border-accent dark:bg-accent-light/15 dark:text-accent-light sm:px-5&quot;&#13;&#10; &gt;&#13;&#10; This is simple alert&#13;&#10; &lt;/div&gt;&#13;&#10;&#13;&#10; &lt;div&#13;&#10; class=&quot;alert flex overflow-hidden rounded-lg bg-secondary/10 text-secondary dark:bg-secondary-light/15 dark:text-secondary-light&quot;&#13;&#10; &gt;&#13;&#10; &lt;div class=&quot;w-1.5 bg-secondary&quot;&gt;&lt;/div&gt;&#13;&#10; &lt;div class=&quot;p-4&quot;&gt;This is simple alert&lt;/div&gt;&#13;&#10; &lt;/div&gt;&#13;&#10;&#13;&#10; &lt;div&#13;&#10; class=&quot;alert flex overflow-hidden rounded-lg border border-info text-info&quot;&#13;&#10; &gt;&#13;&#10; &lt;div class=&quot;bg-info p-3 text-white&quot;&gt;&#13;&#10; &lt;svg&#13;&#10; xmlns=&quot;http://www.w3.org/2000/svg&quot;&#13;&#10; class=&quot;h-5 w-5&quot;&#13;&#10; fill=&quot;none&quot;&#13;&#10; viewBox=&quot;0 0 24 24&quot;&#13;&#10; stroke=&quot;currentColor&quot;&#13;&#10; &gt;&#13;&#10; &lt;path&#13;&#10; stroke-linecap=&quot;round&quot;&#13;&#10; stroke-linejoin=&quot;round&quot;&#13;&#10; stroke-width=&quot;2&quot;&#13;&#10; d=&quot;M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z&quot;&#13;&#10; /&gt;&#13;&#10; &lt;/svg&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;div class=&quot;px-4 py-3 sm:px-5&quot;&gt;This is simple alert&lt;/div&gt;&#13;&#10; &lt;/div&gt;&#13;&#10;&#13;&#10; &lt;div&#13;&#10; class=&quot;alert flex rounded-lg border border-success/30 bg-success/10 py-4 px-4 text-success sm:px-5&quot;&#13;&#10; &gt;&#13;&#10; This is simple alert&#13;&#10; &lt;/div&gt;&#13;&#10;&#13;&#10; &lt;div&#13;&#10; class=&quot;alert flex overflow-hidden rounded-lg bg-warning/10 text-warning dark:bg-warning/15&quot;&#13;&#10; &gt;&#13;&#10; &lt;div class=&quot;flex flex-1 items-center space-x-3 p-4&quot;&gt;&#13;&#10; &lt;svg&#13;&#10; xmlns=&quot;http://www.w3.org/2000/svg&quot;&#13;&#10; class=&quot;h-5 w-5&quot;&#13;&#10; fill=&quot;none&quot;&#13;&#10; viewBox=&quot;0 0 24 24&quot;&#13;&#10; stroke=&quot;currentColor&quot;&#13;&#10; &gt;&#13;&#10; &lt;path&#13;&#10; stroke-linecap=&quot;round&quot;&#13;&#10; stroke-linejoin=&quot;round&quot;&#13;&#10; stroke-width=&quot;2&quot;&#13;&#10; d=&quot;M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z&quot;&#13;&#10; /&gt;&#13;&#10; &lt;/svg&gt;&#13;&#10; &lt;div class=&quot;flex-1&quot;&gt;This is simple alert&lt;/div&gt;&#13;&#10; &lt;/div&gt;&#13;&#10;&#13;&#10; &lt;div class=&quot;w-1.5 bg-warning&quot;&gt;&lt;/div&gt;&#13;&#10; &lt;/div&gt;&#13;&#10;&#13;&#10; &lt;div&#13;&#10; class=&quot;alert flex space-x-2 rounded-lg border border-error px-4 py-4 text-error&quot;&#13;&#10; &gt;&#13;&#10; &lt;svg&#13;&#10; xmlns=&quot;http://www.w3.org/2000/svg&quot;&#13;&#10; class=&quot;h-5 w-5&quot;&#13;&#10; viewBox=&quot;0 0 20 20&quot;&#13;&#10; fill=&quot;currentColor&quot;&#13;&#10; &gt;&#13;&#10; &lt;path&#13;&#10; fill-rule=&quot;evenodd&quot;&#13;&#10; d=&quot;M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z&quot;&#13;&#10; clip-rule=&quot;evenodd&quot;&#13;&#10; /&gt;&#13;&#10; &lt;/svg&gt;&#13;&#10; &lt;p&gt;This is simple alert&lt;/p&gt;&#13;&#10; &lt;/div&gt;</code>
</pre>
</div>
</div>
<!-- Dismissable Alert -->
<div class="card px-4 pb-4 sm:px-5 lg:col-span-2">
<div class="my-3 flex h-8 items-center justify-between">
<h2
class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base"
>
Dismissable Alert
</h2>
<label class="flex items-center space-x-2">
<span class="text-xs text-slate-400 dark:text-navy-300"
>Code</span
>
<input
@change="helpers.toggleCode"
class="form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
type="checkbox"
/>
</label>
</div>
<div class="max-w-2xl">
<p>
Alerts can be dismissable. Check out code for detail of usage.
</p>
<div class="mt-5 space-y-4">
<div
x-data="{isShow:true}"
:class="!isShow && 'opacity-0 transition-opacity duration-300'"
class="alert flex items-center justify-between overflow-hidden rounded-lg border border-info text-info"
>
<div class="flex">
<div class="bg-info p-3 text-white">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
</div>
<div class="px-4 py-3 sm:px-5">This is simple alert</div>
</div>
<div class="px-2">
<button
@click="isShow = false; setTimeout(()=>$root.remove(),300)"
class="btn h-7 w-7 rounded-full p-0 font-medium text-info hover:bg-info/20 focus:bg-info/20 active:bg-info/25"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</button>
</div>
</div>
<div
x-data="{isShow:true}"
data-alert-root
:class="!isShow && 'opacity-0 transition-opacity duration-300'"
class="alert flex items-center justify-between overflow-hidden rounded-lg bg-navy-900 py-4 px-4 text-slate-200 dark:text-navy-100 sm:px-5"
>
<p>Lorem ipsum dolor sit amet consectetur.</p>
<div
x-data="usePopper({placement:'bottom-end',offset:4})"
@click.outside="if(isShowPopper) isShowPopper = false"
class="inline-flex"
>
<button
x-ref="popperRef"
@click="isShowPopper = !isShowPopper"
class="btn -mr-1.5 h-7 w-7 shrink-0 rounded-full p-0 text-white hover:bg-white/20 focus:bg-white/20 active:bg-white/25"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"
/>
</svg>
</button>
<div
x-ref="popperRoot"
class="popper-root"
:class="isShowPopper && 'show'"
>
<div
class="popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700"
>
<ul>
<li>
<a
@click="isShow = false; setTimeout(()=>$el.closest('[data-alert-root]').remove(),300)"
href="javascript:void(0);"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>Remove</a
>
</li>
<li>
<a
href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>Another Action</a
>
</li>
<li>
<a
href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>Something else</a
>
</li>
</ul>
<div
class="my-1 h-px bg-slate-150 dark:bg-navy-500"
></div>
<ul>
<li>
<a
href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>Separated Link</a
>
</li>
</ul>
</div>
</div>
</div>
</div>
<div
x-data="{isShow:true}"
:class="!isShow && 'opacity-0 transition-opacity duration-300'"
class="alert flex flex-col items-center justify-between space-y-4 rounded-lg border border-slate-300 px-4 py-3 text-center text-slate-800 dark:border-navy-450 dark:text-navy-50 sm:flex-row sm:space-y-0 sm:px-5"
>
<p>Lorem ipsum dolor sit amet consectetur.</p>
<button
@click="isShow = false; setTimeout(()=>$root.remove(),300)"
class="btn space-x-2 rounded-full bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"
/>
</svg>
<span>REMIND ME LATER</span>
</button>
</div>
</div>
</div>
<div class="code-wrapper hidden pt-4">
<pre
class="is-scrollbar-hidden max-h-96 overflow-auto rounded-lg"
x-init="hljs.highlightElement($el)"
>
<code class="language-html" x-ignore>
&lt;div class=&quot;space-y-4&quot;&gt;&#13;&#10; &lt;div&#13;&#10; x-data=&quot;{isShow:true}&quot;&#13;&#10; :class=&quot;!isShow &amp;&amp; &apos;opacity-0 transition-opacity duration-300&apos;&quot;&#13;&#10; class=&quot;alert flex items-center justify-between overflow-hidden rounded-lg border border-info text-info&quot;&#13;&#10; &gt;&#13;&#10; &lt;div class=&quot;flex&quot;&gt;&#13;&#10; &lt;div class=&quot;bg-info p-3 text-white&quot;&gt;&#13;&#10; &lt;svg&#13;&#10; xmlns=&quot;http://www.w3.org/2000/svg&quot;&#13;&#10; class=&quot;h-5 w-5&quot;&#13;&#10; fill=&quot;none&quot;&#13;&#10; viewBox=&quot;0 0 24 24&quot;&#13;&#10; stroke=&quot;currentColor&quot;&#13;&#10; &gt;&#13;&#10; &lt;path&#13;&#10; stroke-linecap=&quot;round&quot;&#13;&#10; stroke-linejoin=&quot;round&quot;&#13;&#10; stroke-width=&quot;2&quot;&#13;&#10; d=&quot;M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z&quot;&#13;&#10; /&gt;&#13;&#10; &lt;/svg&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;div class=&quot;px-4 py-3 sm:px-5&quot;&gt;This is simple alert&lt;/div&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;div class=&quot;px-2&quot;&gt;&#13;&#10; &lt;button&#13;&#10; @click=&quot;isShow = false; setTimeout(()=&gt;$root.remove(),300)&quot;&#13;&#10; class=&quot;btn h-7 w-7 rounded-full p-0 font-medium text-info hover:bg-info/20 focus:bg-info/20 active:bg-info/25&quot;&#13;&#10; &gt;&#13;&#10; &lt;svg&#13;&#10; xmlns=&quot;http://www.w3.org/2000/svg&quot;&#13;&#10; class=&quot;h-4 w-4&quot;&#13;&#10; fill=&quot;none&quot;&#13;&#10; viewBox=&quot;0 0 24 24&quot;&#13;&#10; stroke=&quot;currentColor&quot;&#13;&#10; &gt;&#13;&#10; &lt;path&#13;&#10; stroke-linecap=&quot;round&quot;&#13;&#10; stroke-linejoin=&quot;round&quot;&#13;&#10; stroke-width=&quot;2&quot;&#13;&#10; d=&quot;M6 18L18 6M6 6l12 12&quot;&#13;&#10; /&gt;&#13;&#10; &lt;/svg&gt;&#13;&#10; &lt;/button&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;/div&gt;&#13;&#10;&#13;&#10; &lt;div&#13;&#10; x-data=&quot;{isShow:true}&quot;&#13;&#10; data-alert-root&#13;&#10; :class=&quot;!isShow &amp;&amp; &apos;opacity-0 transition-opacity duration-300&apos;&quot;&#13;&#10; class=&quot;alert flex items-center justify-between overflow-hidden rounded-lg bg-navy-900 py-4 px-4 text-slate-200 dark:text-navy-100 sm:px-5&quot;&#13;&#10; &gt;&#13;&#10; &lt;p&gt;Lorem ipsum dolor sit amet consectetur.&lt;/p&gt;&#13;&#10;&#13;&#10; &lt;div&#13;&#10; x-data=&quot;usePopper({placement:&apos;bottom-end&apos;,offset:4})&quot;&#13;&#10; @click.outside=&quot;if(isShowPopper) isShowPopper = false&quot;&#13;&#10; class=&quot;inline-flex&quot;&#13;&#10; &gt;&#13;&#10; &lt;button&#13;&#10; x-ref=&quot;popperRef&quot;&#13;&#10; @click=&quot;isShowPopper = !isShowPopper&quot;&#13;&#10; class=&quot;btn -mr-1.5 h-7 w-7 shrink-0 rounded-full p-0 text-white hover:bg-white/20 focus:bg-white/20 active:bg-white/25&quot;&#13;&#10; &gt;&#13;&#10; &lt;svg&#13;&#10; xmlns=&quot;http://www.w3.org/2000/svg&quot;&#13;&#10; class=&quot;h-4 w-4&quot;&#13;&#10; fill=&quot;none&quot;&#13;&#10; viewBox=&quot;0 0 24 24&quot;&#13;&#10; stroke=&quot;currentColor&quot;&#13;&#10; &gt;&#13;&#10; &lt;path&#13;&#10; stroke-linecap=&quot;round&quot;&#13;&#10; stroke-linejoin=&quot;round&quot;&#13;&#10; stroke-width=&quot;2&quot;&#13;&#10; d=&quot;M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z&quot;&#13;&#10; /&gt;&#13;&#10; &lt;/svg&gt;&#13;&#10; &lt;/button&gt;&#13;&#10; &lt;div&#13;&#10; x-ref=&quot;popperRoot&quot;&#13;&#10; class=&quot;popper-root&quot;&#13;&#10; :class=&quot;isShowPopper &amp;&amp; &apos;show&apos;&quot;&#13;&#10; &gt;&#13;&#10; &lt;div&#13;&#10; class=&quot;popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700&quot;&#13;&#10; &gt;&#13;&#10; &lt;ul&gt;&#13;&#10; &lt;li&gt;&#13;&#10; &lt;a&#13;&#10; @click=&quot;isShow = false; setTimeout(()=&gt;$el.closest(&apos;[data-alert-root]&apos;).remove(),300)&quot;&#13;&#10; href=&quot;#&quot;&#13;&#10; class=&quot;flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100&quot;&#13;&#10; &gt;Remove&lt;/a&#13;&#10; &gt;&#13;&#10; &lt;/li&gt;&#13;&#10; &lt;li&gt;&#13;&#10; &lt;a&#13;&#10; href=&quot;#&quot;&#13;&#10; class=&quot;flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100&quot;&#13;&#10; &gt;Another Action&lt;/a&#13;&#10; &gt;&#13;&#10; &lt;/li&gt;&#13;&#10; &lt;li&gt;&#13;&#10; &lt;a&#13;&#10; href=&quot;#&quot;&#13;&#10; class=&quot;flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100&quot;&#13;&#10; &gt;Something else&lt;/a&#13;&#10; &gt;&#13;&#10; &lt;/li&gt;&#13;&#10; &lt;/ul&gt;&#13;&#10; &lt;div class=&quot;my-1 h-px bg-slate-150 dark:bg-navy-500&quot;&gt;&lt;/div&gt;&#13;&#10; &lt;ul&gt;&#13;&#10; &lt;li&gt;&#13;&#10; &lt;a&#13;&#10; href=&quot;#&quot;&#13;&#10; class=&quot;flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100&quot;&#13;&#10; &gt;Separated Link&lt;/a&#13;&#10; &gt;&#13;&#10; &lt;/li&gt;&#13;&#10; &lt;/ul&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;/div&gt;&#13;&#10;&#13;&#10; &lt;div&#13;&#10; x-data=&quot;{isShow:true}&quot;&#13;&#10; :class=&quot;!isShow &amp;&amp; &apos;opacity-0 transition-opacity duration-300&apos;&quot;&#13;&#10; class=&quot;alert flex flex-col items-center justify-between space-y-4 rounded-lg border border-slate-300 px-4 py-3 text-center text-slate-800 dark:border-navy-450 dark:text-navy-50 sm:flex-row sm:space-y-0 sm:px-5&quot;&#13;&#10; &gt;&#13;&#10; &lt;p&gt;Lorem ipsum dolor sit amet consectetur.&lt;/p&gt;&#13;&#10; &lt;button&#13;&#10; @click=&quot;isShow = false; setTimeout(()=&gt;$root.remove(),300)&quot;&#13;&#10; class=&quot;btn space-x-2 rounded-full bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90&quot;&#13;&#10; &gt;&#13;&#10; &lt;svg&#13;&#10; xmlns=&quot;http://www.w3.org/2000/svg&quot;&#13;&#10; class=&quot;h-5 w-5&quot;&#13;&#10; fill=&quot;none&quot;&#13;&#10; viewBox=&quot;0 0 24 24&quot;&#13;&#10; stroke=&quot;currentColor&quot;&#13;&#10; &gt;&#13;&#10; &lt;path&#13;&#10; stroke-linecap=&quot;round&quot;&#13;&#10; stroke-linejoin=&quot;round&quot;&#13;&#10; stroke-width=&quot;1.5&quot;&#13;&#10; d=&quot;M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9&quot;&#13;&#10; /&gt;&#13;&#10; &lt;/svg&gt;&#13;&#10; &lt;span&gt;REMIND ME LATER&lt;/span&gt;&#13;&#10; &lt;/button&gt;&#13;&#10; &lt;/div&gt;&#13;&#10; &lt;/div&gt;
</code>
</pre>
</div>
</div>
</div>
</main>
</x-app-layout>
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment