Skip to content

GitLab

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
public/vendor/livewire/livewire.js.map 0 → 100644
View file @ 930e8709
This source diff could not be displayed because it is too large. You can view the blob instead.
public/vendor/livewire/manifest.json 0 → 100644
View file @ 930e8709
{"/livewire.js":"/livewire.js?id=90730a3b0e7144480175"}
\ No newline at end of file
resources/js/app.js
View file @ 930e8709
import Alpine from "alpinejs";
import $ from 'jquery';
import Alpine from 'alpinejs';
import persist from '@alpinejs/persist';
import collapse from '@alpinejs/collapse';
import intersect from '@alpinejs/intersect';
// AlpineJS Plugins
import persist from "@alpinejs/persist"; // @see https://alpinejs.dev/plugins/persist
import collapse from "@alpinejs/collapse"; // @see https://alpinejs.dev/plugins/collapse
import intersect from "@alpinejs/intersect"; // @see https://alpinejs.dev/plugins/intersect
// Alpine.js Plugins
Alpine.plugin(persist);
Alpine.plugin(collapse);
Alpine.plugin(intersect);
// Third Party Libraries
/*
Scrollbar Library
@see https://github.com/Grsmto/simplebar
*/
import SimpleBar from "simplebar";
/*
Code highlighting library
Just for demo purpose only for highlighting code
@see https://highlightjs.org/
*/
import hljs from "highlight.js/lib/core";
import xml from "highlight.js/lib/languages/xml";
/*
Date Utility Library
@see https://day.js.org/
*/
import dayjs from "dayjs";
/*
Carousel Library
@see https://swiperjs.com/
*/
import Swiper from "swiper/bundle";
/*
Drag & Drop Library
@see https://github.com/SortableJS/Sortable
*/
import Sortable from "sortablejs";
/*
Charts Libraries
@see https://apexcharts.com/
*/
import ApexCharts from "apexcharts";
/*
Tables Libraries
@see https://gridjs.io/
*/
import * as Gridjs from "gridjs";
// Forms Libraries
import "@caneara/iodine"; // @see https://github.com/caneara/iodine
import * as FilePond from "filepond"; // @see https://pqina.nl/filepond/
import FilePondPluginImagePreview from "filepond-plugin-image-preview"; // @see https://pqina.nl/filepond/docs/api/plugins/image-preview/
import FilePondPluginFileEncode from "filepond-plugin-file-encode"; // @see https://pqina.nl/filepond/docs/api/plugins/image-preview/
import Quill from "quill/dist/quill.min"; // @see https://quilljs.com/
import flatpickr from "flatpickr"; // @see https://flatpickr.js.org/
import Tom from "tom-select/dist/js/tom-select.complete.min"; // @see https://tom-select.js.org/
// Import Fortawesome icons
import $ from 'jquery';
import SimpleBar from 'simplebar';
import hljs from 'highlight.js/lib/core';
import sql from 'highlight.js/lib/languages/sql';
import xml from 'highlight.js/lib/languages/xml';
import dayjs from 'dayjs';
import Swiper from 'swiper/bundle';
import Sortable from 'sortablejs';
import ApexCharts from 'apexcharts';
import * as Gridjs from 'gridjs';
import "@caneara/iodine";
import * as FilePond from 'filepond';
import FilePondPluginImagePreview from 'filepond-plugin-image-preview';
import FilePondPluginFileEncode from 'filepond-plugin-file-encode';
import Quill from 'quill/dist/quill.min';
import flatpickr from 'flatpickr';
import Tom from 'tom-select/dist/js/tom-select.complete.min';
import "@fortawesome/fontawesome-free/css/all.css";
// Helper Functions
import * as helpers from "./utils/helpers";
// Pages Scripts
import * as pages from "./pages";
// Global Store
import store from "./store";
// Breakpoints Store
import breakpoints from "./utils/breakpoints";
// Alpine Components
import usePopper from "./components/usePopper";
import accordionItem from "./components/accordionItem";
// Alpine Directives
import tooltip from "./directives/tooltip";
import inputMask from "./directives/inputMask";
// Alpine Magic Functions
import notification from "./magics/notification";
import clipboard from "./magics/clipboard";
// Register HTML, XML language for highlight.js
// Just for demo purpose only for highlighting code
hljs.registerLanguage("xml", xml);
import * as helpers from './utils/helpers';
import * as pages from './pages';
import store from './store';
import breakpoints from './utils/breakpoints';
import usePopper from './components/usePopper';
import accordionItem from './components/accordionItem';
import tooltip from './directives/tooltip';
import inputMask from './directives/inputMask';
import notification from './magics/notification';
import clipboard from './magics/clipboard';
// Register highlight.js languages
hljs.registerLanguage('xml', xml);
hljs.registerLanguage('sql', sql);
hljs.configure({ ignoreUnescapedHTML: true });
// Register plugin image preview for filepond
// Register FilePond plugins
FilePond.registerPlugin(FilePondPluginImagePreview);
FilePond.registerPlugin(FilePondPluginFileEncode);
......@@ -108,24 +60,19 @@ window.FilePond = FilePond;
window.flatpickr = flatpickr;
window.Quill = Quill;
window.Tom = Tom;
window.Alpine = Alpine;
window.helpers = helpers;
window.pages = pages;
window.$ = $;
Alpine.plugin(persist);
Alpine.plugin(collapse);
Alpine.plugin(intersect);
Alpine.directive("tooltip", tooltip);
Alpine.directive("input-mask", inputMask);
Alpine.magic("notification", () => notification);
Alpine.magic("clipboard", () => clipboard);
Alpine.directive('tooltip', tooltip);
Alpine.directive('input-mask', inputMask);
Alpine.magic('notification', () => notification);
Alpine.magic('clipboard', () => clipboard);
Alpine.store('breakpoints', breakpoints);
Alpine.store('global', store);
Alpine.store("breakpoints", breakpoints);
Alpine.store("global", store);
Alpine.data('usePopper', usePopper);
Alpine.data('accordionItem', accordionItem);
Alpine.data("usePopper", usePopper);
Alpine.data("accordionItem", accordionItem);
Alpine.start();
resources/js/pages/index.js
View file @ 930e8709
export { charts } from "./apexchartDemo";
export { tomSelect } from "./tomselectDemo";
export { userSelect , fetchUsers } from "./userSelect";
export { roleSelect , fetchRoles } from "./roleSelect";
export { serverLicenseSelect , fetchServerLicenses } from "./serverLicenseSelect";
export * as tables from "./tablesDemo";
export * as formValidation from "./formValidationDemo";
......
resources/js/pages/roleSelect.js → resources/js/pages/serverLicenseSelect.js
View file @ 930e8709
const roleSelect = {
role: {
const serverLicenseSelect = {
serverkey: {
valueField: "id",
searchField: "name",
options: [], // Initialize empty array for options
......@@ -24,7 +24,7 @@ const roleSelect = {
console.error("Invalid data for item:", data);
return "";
}
return `<span class="badge rounded-full bg-primary dark:bg-accent text-white p-px mr-2">
return `<span class="badge rounded-lg bg-primary dark:bg-accent text-white p-px m-1 mr-2 py-2">
<span class="mx-2">${escape(data.name)}</span>
</span>`;
},
......@@ -32,19 +32,19 @@ const roleSelect = {
},
};
const fetchRoles = (roleSelect) => {
return fetch('/get-roles')
const fetchServerLicenses = (serverLicenseSelect) => {
return fetch('/get-serverlicense')
.then(response => response.json())
.then(data => {
if (!data.roles || !Array.isArray(data.roles)) {
if (!data.serverLicenses || !Array.isArray(data.serverLicenses)) {
console.error("Invalid response format:", data);
return;
}
roleSelect.role.options = data.roles;
serverLicenseSelect.serverkey.options = data.serverLicenses;
})
.catch(error => console.error('Error fetching role data:', error));
.catch(error => console.error('Error fetching serverkey data:', error));
};
export { roleSelect, fetchRoles };
\ No newline at end of file
export { serverLicenseSelect, fetchServerLicenses };
\ No newline at end of file
resources/views/components/base-layout.blade.php → resources/views/components/app-layout.blade.php
View file @ 930e8709
......@@ -26,47 +26,50 @@
rel="stylesheet" />
<script>
/**
* THIS SCRIPT REQUIRED FOR PREVENT FLICKERING IN SOME BROWSERS
*/
localStorage.getItem("_x_darkMode_on") === "true" &&
document.documentElement.classList.add("dark");
</script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
@isset($head)
{{ $head }}
@endisset
@livewireStyles
</head>
<body x-data x-bind="$store.global.documentBody"
class="@isset($isSidebarOpen) {{ $isSidebarOpen === 'true' ? 'is-sidebar-open' : '' }} @endisset @isset($isHeaderBlur) {{ $isHeaderBlur === 'true' ? 'is-header-blur' : '' }} @endisset @isset($hasMinSidebar) {{ $hasMinSidebar === 'true' ? 'has-min-sidebar' : '' }} @endisset @isset($headerSticky) {{ $headerSticky === 'false' ? 'is-header-not-sticky' : '' }} @endisset">
<x-app-partials.sideblock></x-app-partials.sideblock>
<x-app-partials.header></x-app-partials.header>
<!-- App preloader-->
<x-app-preloader></x-app-preloader>
<!-- Page Wrapper -->
<div id="root" class="min-h-100vh flex grow bg-slate-50 dark:bg-navy-900" x-cloak>
<style>
html,
body {
/* height: 100%; */
margin: 0;
}
{{ $slot }}
body {
display: flex;
flex-direction: column;
/* min-height: 100vh; */
}
</div>
main {
flex: 1;
background-color: white;
}
</style>
</head>
<!--
This is a place for Alpine.js Teleport feature
@see https://alpinejs.dev/directives/teleport
-->
<div id="x-teleport-target"></div>
<body class="h-full">
<script>
window.addEventListener("DOMContentLoaded", () => Alpine.start());
</script>
@livewireScripts
<main class="flex-grow overflow-hidden">
{{ $slot }}
@yield('content')
</main>
<footer class="bg-gray-800 text-white p-4">
<div class="container mx-auto">
<p class="text-center">&copy; 2024 Your Company</p>
</div>
</footer>
@livewireScripts
@isset($script)
{{ $script }}
@endisset
@yield('script')
</body>
</html>
resources/views/components/app-partials/header.blade.php
View file @ 930e8709
......@@ -839,7 +839,7 @@
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path>
</svg>
</button> -->
<p>Hello, {{ auth()->user()->username }}</p>
{{-- <p>Hello, {{ auth()->user()}}</p> --}}
<form method="POST" action="{{ route('logout') }}">
@csrf
<button type="submit" x-tooltip.primary="'Logout'" 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">
......
resources/views/components/app-partials/sidebar-panel.blade.php deleted 100644 → 0
View file @ 5bad2db9
<div class="sidebar-panel">
<div class="flex h-full grow flex-col bg-white pl-[var(--main-sidebar-width)] dark:bg-navy-750">
<!-- Sidebar Panel Header -->
<div class="flex h-18 w-full items-center justify-between pl-4 pr-1">
<p class="text-base tracking-wider text-slate-800 dark:text-navy-100">
{{ $sidebarMenu['title'] }}
</p>
<button @click="$store.global.isSidebarExpanded = false"
class="btn h-7 w-7 rounded-full p-0 text-primary hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-accent-light/80 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25 xl:hidden">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
</svg>
</button>
</div>
<!-- Sidebar Panel Body -->
<div class="h-[calc(100%-4.5rem)] overflow-x-hidden pb-6" x-data="{ expandedItem: null }" x-init="$el._x_simplebar = new SimpleBar($el);">
@foreach ($sidebarMenu['items'] as $key => $menuItems)
@if ($key > 0)
<div class="my-3 mx-4 h-px bg-slate-200 dark:bg-navy-500"></div>
@endif
<ul class="flex flex-1 flex-col px-4 font-inter">
@foreach ($menuItems as $keyMenu => $menu)
@if (isset($menu['submenu']))
<li x-data="accordionItem('{{ $keyMenu }}')">
<a :class="expanded ? 'text-slate-800 font-semibold dark:text-navy-50' :
'text-slate-600 dark:text-navy-200'"
@click="expanded = !expanded"
class="flex items-center justify-between py-2 text-xs+ tracking-wide outline-none transition-[color,padding-left] duration-300 ease-in-out hover:text-slate-800 dark:hover:text-navy-50"
href="javascript:void(0);">
<span>{{ $menu['title'] }}</span>
<svg :class="expanded && 'rotate-90'" xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4 text-slate-400 transition-transform ease-in-out" 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"></path>
</svg>
</a>
<ul x-collapse x-show="expanded">
@foreach ($menu['submenu'] as $keyMenu => $submenu)
<li
@if ($submenu['route_name'] === $pageName) x-init="$el.scrollIntoView({block:'center'}); expanded = true" @endif>
<a href="{{ route($submenu['route_name']) }}"
class="flex items-center justify-between p-2 text-xs+ tracking-wide
outline-none transition-[color,padding-left] duration-300 ease-in-out hover:pl-4
{{ $submenu['route_name'] === $pageName ? 'text-primary dark:text-accent-light font-medium' : 'text-slate-600 hover:text-slate-800 dark:text-navy-200 dark:hover:text-navy-50' }}">
<div class="flex items-center space-x-2">
<div
class="h-1.5 w-1.5 rounded-full border border-current opacity-40">
</div>
<span>{{ $submenu['title'] }}</span>
</div>
</a>
</li>
@endforeach
</ul>
</li>
@else
<li @if ($menu['route_name'] === $pageName) x-init="$el.scrollIntoView({block:'center'});" @endif>
<a href="{{ route($menu['route_name']) }}"
class="flex text-xs+ py-2 tracking-wide outline-none transition-colors duration-300 ease-in-out {{ $menu['route_name'] === $pageName ? 'text-primary dark:text-accent-light font-medium' : 'text-slate-600 hover:text-slate-800 dark:text-navy-200 dark:hover:text-navy-50' }}">
{{ $menu['title'] }}
</a>
</li>
@endif
@endforeach
</ul>
@endforeach
</div>
</div>
</div>
resources/views/components/app-layout-sideblock.blade.php → resources/views/components/guest-layout.blade.php
View file @ 930e8709
......@@ -32,41 +32,21 @@
localStorage.getItem("_x_darkMode_on") === "true" &&
document.documentElement.classList.add("dark");
</script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
@isset($head)
{{ $head }}
@endisset
@livewireStyles
{{-- @livewireStyles --}}
</head>
<body x-data x-bind="$store.global.documentBody"
class="@isset($isSidebarOpen) {{ $isSidebarOpen === 'true' ? 'is-sidebar-open' : '' }} @endisset @isset($isHeaderBlur) {{ $isHeaderBlur === 'true' ? 'is-header-blur' : '' }} @endisset @isset($hasMinSidebar) {{ $hasMinSidebar === 'true' ? 'has-min-sidebar' : '' }} @endisset @isset($headerSticky) {{ $headerSticky === 'false' ? 'is-header-not-sticky' : '' }} @endisset">
<x-app-partials.sideblock></x-app-partials.sideblock>
<x-app-partials.header></x-app-partials.header>
<!-- App preloader-->
<x-app-preloader></x-app-preloader>
<!-- Page Wrapper -->
<div id="root" class="min-h-100vh flex grow bg-slate-50 dark:bg-navy-900" x-cloak>
<body>
{{ $slot }}
{{ $slot }}
</div>
<!--
This is a place for Alpine.js Teleport feature
@see https://alpinejs.dev/directives/teleport
-->
<div id="x-teleport-target"></div>
<script>
window.addEventListener("DOMContentLoaded", () => Alpine.start());
</script>
@livewireScripts
{{-- @livewireScripts --}}
@isset($script)
{{ $script }}
@endisset
</body>
</html>
resources/views/home.blade.php
View file @ 930e8709
<x-base-layout title="Starter Sideblock" 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">
<!-- <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="#">Home</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>
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 28 28" stroke-width="1.5"
stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round"
d="M8.25 21v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21m0 0h4.5V3.545M12.75 21h7.5V10.75M2.25 21h1.5m18 0h-18M2.25 9l4.5-1.636M18.75 3l-1.5.545m0 6.205l3 1m1.5.5l-1.5-.5M6.75 7.364V3h-3v18m3-13.636l10.5-3.819" />
</svg><span class="ml-0">Home</span>
</div>
</li>
</ul>
</div>
<div class="w-full">
<div class="w-full card p-4 sm:p-5">
<p class="text-3xl text-center font-medium text-slate-700 dark:text-navy-100">
Welcome Admin
</p>
<div class="mt-4 space-y-4">
<div class="flex">
<div class="flex w-full items-center justify-center rounded-lg gap-10">
<button
class="btn h-6 w-56 space-x-2 rounded-full bg-amber-500 font-medium text-slate-800 hover:bg-amber-600 ">
<span>Upload File</span>
</button>
<button
class="btn h-6 w-56 space-x-2 rounded-full bg-amber-500 font-medium text-slate-800 hover:bg-amber-600 ">
<span>Pre-Arrival Manifest</span>
</button>
</div>
</div>
<label class="block">
<span class="text-center">
<ol class="steps">
<li class="step before:bg-slate-200 dark:before:bg-navy-500">
</li>
<li class="step before:bg-slate-200 dark:before:bg-navy-500">
<div
class="step-header rounded-full bg-slate-200 text-slate-800 dark:bg-navy-500 dark:text-white">
</div>
</li>
<li class="step before:bg-slate-200 dark:before:bg-navy-500">
</li>
</ol>
</span>
</label>
</div>
</div>
</div>
</main>
</x-layout-sideblock>
<x-app-layout title="Starter Sideblock" is-sidebar-open="true" is-header-blur="true">
{{-- <div class="container mx-auto mt-10 card min-h-auto z-0"> --}}
{{-- <div class="flex flex-col md:flex-row items-center"> --}}
{{-- Hello World --}}
{{-- </div> --}}
{{-- </div> --}}
<livewire:navbar />
<livewire:main-container />
</x-app-layout>
\ No newline at end of file
resources/views/livewire/main-container.blade.php 0 → 100644
View file @ 930e8709
<div class="card mx-4 my-4 z-0 ">
<div wire:loading.class="flex" wire:loading.class.remove="hidden"
class="absolute inset-0 items-center justify-center z-50 bg-slate-50 dark:bg-navy-900 hidden">
<div class="flex justify-center items-center ">
<div class="animate-spin rounded-full h-32 w-32 border-t-2 border-b-2 border-blue-500"></div>
</div>
</div>
{{-- end loading --}}
@if ($currentContent === 'Role')
<livewire:pages.role.role-index />
@elseif ($currentContent === 'User')
<livewire:pages.user.user-index />
@elseif ($currentContent === 'SendPatch')
<livewire:pages.send-patch.send-patch />
@else
<div class=" h-fit">
home
</div>
@endif
</div>
resources/views/livewire/navbar.blade.php 0 → 100644
View file @ 930e8709
<nav class="bg-white shadow p-4 z-100">
<div class="container mx-auto flex justify-between items-center">
<div class="text-xl font-bold text-stone-700">SPN Patch</div>
<ul class="flex space-x-4 z-50">
<li x-data="{ open: false }" @click.away="open = false" @mouseenter="open = true" class="relative">
<a href="#" class="text-gray-700 hover:text-stone-700">Server License Management</a>
<ul x-show="open" @click="open = false" @mouseleave="open = false"
class="absolute left-0 mt-2 w-48 bg-white shadow-lg">
<li><a href="#" class="block px-4 py-2 text-gray-700 hover:bg-stone-100">Submenu 1</a></li>
<li><a href="#" class="block px-4 py-2 text-gray-700 hover:bg-stone-100">Submenu 2</a></li>
<li><a href="#" class="block px-4 py-2 text-gray-700 hover:bg-stone-100">Submenu 3</a></li>
</ul>
</li>
<li x-data="{ open: false }" @click.away="open = false" @mouseenter="open = true" class="relative">
<a href="#" class="text-gray-700 hover:text-stone-700">Patch Management</a>
<ul x-show="open" @click="open = false" @mouseleave="open = false"
class="absolute left-0 mt-2 w-48 bg-white shadow-lg">
<li><a href="#" class="block px-4 py-2 text-gray-700 hover:bg-stone-100">Submenu 1</a></li>
<li><a href="#" class="block px-4 py-2 text-gray-700 hover:bg-stone-100">Submenu 2</a></li>
<li><a href="#" class="block px-4 py-2 text-gray-700 hover:bg-stone-100">Submenu 3</a></li>
</ul>
</li>
<li x-data="{ open: false }"wire:click.prevent="loadContent('SendPatch')" class="relative">
<a href="#" class="text-gray-700 hover:text-stone-700">Send Patch</a>
</li>
<li x-data="{ open: false }" @click.away="open = false" @mouseenter="open = true" class="relative">
<a href="#" class="text-gray-700 hover:text-stone-700">Configuration</a>
<ul x-show="open" @click="open = false" @mouseleave="open = false"
class="absolute left-0 mt-2 w-48 bg-white shadow-lg">
<li><a href="#" wire:click.prevent="loadContent('Role')"
class="block px-4 py-2 text-gray-700 hover:bg-stone-100">Role</a></li>
<li><a href="#" wire:click.prevent="loadContent('User')"
class="block px-4 py-2 text-gray-700 hover:bg-stone-100">User</a>
</li>
<li><a href="#" class="block px-4 py-2 text-gray-700 hover:bg-stone-100">Submenu Item 3</a>
</li>
</ul>
</li>
<li><a href="#" class="bg-stone-700 text-white px-4 py-2 rounded">Logout</a></li>
<span>Hello , {{ auth()->user()->USERNAME ?? '' }}</span>
</ul>
</div>
</nav>
resources/views/livewire/pages/role/role-index.blade.php 0 → 100644
View file @ 930e8709
<div>
<!-- Your content here -->
<h1>Role Index Page</h1>
</div>
\ No newline at end of file
resources/views/livewire/pages/sendpatch/send-patch-edit.blade.php 0 → 100644
View file @ 930e8709
<div class="p-4 h-fit" >
<div class="mb-4" x-data="{ tomGReady: false }" x-show="tomGReady">
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-5">
<div>
<label for="server_of" class="block text-sm font-medium text-gray-700">Server of</label>
<select id="server_of" name="server_of" wire:model="selectedOwnerType"
class="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
<option value="">Please Select</option>
@foreach ($ownerType as $type)
<option value="{{ $type->owntype_code }}">{{ $type->owntype_description }}</option>
@endforeach
</select>
</div>
<div class="" wire:ignore>
<label for="server_key" class="block text-sm font-medium text-gray-700">Server Key:</label>
<input id="server_key" class="mt-1.5 relative flex w-full" x-data="{
serverKeyLists: @entangle('server_lists')
}"
x-init="serverKeyLists = []
const tempLicense = pages.serverLicenseSelect;
pages.fetchServerLicenses(tempLicense).then(() => {
$el._x_tom = new Tom($el, {
...tempLicense.serverkey,
onChange: (value) => {
serverKeyLists = value;
}
});
$el._x_tom.setValue(serverKeyLists);
tomGReady = true;
});
{{-- $watch('test', (value) => {
if (tomGReady) {
$el._x_tom.clearOptions();
$el._x_tom.addOption(value);
$el._x_tom.refreshOptions(false);
}
}); --}}" type="text" placeholder="Search Server Key">
</div>
<div>
<label for="company" class="block text-sm font-medium text-gray-700">Company</label>
<input type="text" id="company" name="company"
class="mt-1 block w-full py-2 px-3 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
</div>
<div>
<label for="db_type" class="block text-sm font-medium text-gray-700">DB Type</label>
<input type="text" id="db_type" name="db_type"
class="mt-1 block w-full py-2 px-3 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
</div>
<div>
<label for="cur_ver" class="block text-sm font-medium text-gray-700">Cur. Ver.</label>
<input type="text" id="cur_ver" name="cur_ver"
class="mt-1 block w-full py-2 px-3 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
</div>
<div>
<label for="hscode_method" class="block text-sm font-medium text-gray-700">HSCODE 2017 method</label>
<select id="hscode_method" name="hscode_method"
class="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
<option>Please Select</option>
<!-- Options -->
</select>
</div>
<div>
<label for="company_select" class="block text-sm font-medium text-gray-700">Company</label>
<select id="company_select" name="company_select"
class="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
<option>Please select company</option>
<!-- Options -->
</select>
</div>
<div class="flex space-x-2 mt-6">
{{-- <button class="btn bg-blue-500 text-white px-4 py-2 rounded">Add All List</button>
<button class="btn bg-red-500 text-white px-4 py-2 rounded">Delete All</button> --}}
</div>
</div>
</div>
<div class="flex justify-end mb-4 space-x-2">
<button type="button" wire:click="sendPatch"
class="btn bg-stone-700 text-white px-4 py-2 rounded hover:bg-stone-800">Send</button>
<button
class="btn bg-white text-stone-700 border border-stone-700 px-4 py-2 rounded hover:bg-gray-100">Back</button>
{{-- <button class="btn bg-stone-600 text-white px-4 py-2 rounded hover:bg-stone-700">Resend</button> --}}
</div>
<div class="mb-4">
<h3 class="text-lg font-medium leading-6 text-gray-900">Server list</h3>
</div>
<div class="flex px-5 items-center justify-end mb-3" x-data="{ isInputActive: false }">
<button @click="isInputActive = !isInputActive"
class="btn h-8 w-14 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>
<span class="w-64" x-show="isInputActive === true">
<input
class="form-input h-9 peer w-full rounded-lg border border-slate-300 bg-transparent px-3 py-2 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
placeholder="Search Keyword" type="text" wire:model="keyword" />
</span>
<span class="w-52" x-show="isInputActive === true">
<select wire:model="searchSelected"
class="form-select h-9 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 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 value="SNKEY">Server Key</option>
<option value="COMPANY">Company</option>
</select>
</span>
</div>
<div class="table-responsive">
<table class="min-w-full divide-y divide-gray-200">
<thead>
<tr>
<th
class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Choose</th>
<th
class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Server ID</th>
<th
class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Company</th>
<th
class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Serverkey</th>
<th
class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Status</th>
<th
class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Task Date</th>
<th
class="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Action</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
@foreach ($results as $server)
<tr>
<td class="px-6 py-4 whitespace-nowrap">
<input type="checkbox"
class="form-checkbox h-4 w-4 text-indigo-600 transition duration-150 ease-in-out">
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ $server->ServerID }}</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ $server->COMPANY }}</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ $server->SNKEY }}</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ $server->STATUS }}</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ $server->TaskDate }}</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
@if ($server->TaskStatus == '999')
<button type="button" wire:click="resendPatch({{ $server->ServerID }})" class="btn bg-info text-white px-4 py-2 rounded"><i class="fa fa-repeat"
aria-hidden="true"></i></button>
@else
<button type="button" wire:click="deletePatch({{ $server->ServerID }})" class="btn bg-info-focus text-white px-4 py-2 rounded"><i class="fa fa-trash"
aria-hidden="true"></i></button>
@endif
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
<div class="mt-4">
{{ $results->links('livewire.paginate-custom') }}
</div>
</div>
resources/views/livewire/pages/send-patch.blade.php → resources/views/livewire/pages/sendpatch/send-patch.blade.php
View file @ 930e8709
<div>
<main class="main-content px-[var(--margin-x)] pb-8">
<div class="flex items-center space-x-4 py-5 lg:py-6 ">
<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="/">Home</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 class="flex items-center space-x-2">
<a href="#"
class="text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent">Patch
Management(Send Patch to Customer)</a>
</li>
</ul>
</div>
<style>
table {
width: 100%;
table-layout: auto;
}
.table-responsive {
overflow-x: auto;
}
</style>
<main class="m-2">
<div wire:loading.class="flex" wire:loading.class.remove="hidden"
class="absolute inset-0 items-center justify-center z-50 bg-slate-50 dark:bg-navy-900 hidden">
<div class="flex justify-center items-center ">
<div class="animate-spin rounded-full h-32 w-32 border-t-2 border-b-2 border-blue-500"></div>
</div>
</div>
@if ($action === 'list')
@if ($message)
<div class="alert alert-success">
......@@ -30,7 +28,7 @@
@endif
<div class="grid grid-cols-1 gap-4 sm:gap-5 lg:gap-6 ">
<div class="card pb-4">
<div class="pb-4">
<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 lg:text-base">
......@@ -56,24 +54,25 @@
<span class="w-64" x-show="isInputActive === true">
<input
class="form-input h-9 peer w-full rounded-lg border border-slate-300 bg-transparent px-3 py-2 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
placeholder="Search Keyword" type="text" wire:model="keyword" />
placeholder="Search Keyword" type="text" wire:model.defer="keyword" />
</span>
<span class="w-52" x-show="isInputActive === true">
<select wire:model="searchSelected"
<select wire:model.defer="searchSelected"
class="form-select h-9 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:bg-navy-700 dark:hover:border-navy-400 dark:focus:border-accent">
@foreach ($searchBy as $key => $by)
<option value="{{ $key }}">{{ $by }}</option>
@endforeach
</select>
</span>
<button type="button" class="bg-stone-700 text-white px-4 py-2 rounded" wire:click="search">Search</button>
</div>
</div>
</div>
</div>
<div class="mx-3 mt-3 px-4">
<div class="is-scrollbar-hidden min-w-full overflow-x-auto" x-data="pages.tables.initExample1">
<table class="is-hoverable w-full text-left">
<div class="is-scrollbar-hidden min-w-full table-responsive" x-data="pages.tables.initExample1">
<table class="is-hoverable table w-full text-left">
<thead>
<tr>
{{-- <th
......@@ -81,35 +80,35 @@
#
</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">
class="whitespace-nowrap rounded-tl-lg bg-slate-200 px-2 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-2">
Patch ID
</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">
class="whitespace-nowrap bg-slate-200 px-2 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-2">
Patch 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">
class="whitespace-nowrap bg-slate-200 px-2 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-2">
Description
</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">
class="whitespace-nowrap bg-slate-200 px-2 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-2">
Server
</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">
class="whitespace-nowrap bg-slate-200 px-2 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-2">
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">
class="whitespace-nowrap bg-slate-200 px-2 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-2">
Level
</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">
class="whitespace-nowrap bg-slate-200 px-2 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-2">
Remark
</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">
class="whitespace-nowrap rounded-tr-lg bg-slate-200 px-2 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-2">
Action
</th>
</tr>
......@@ -127,14 +126,14 @@
value="{{ $patch->id }}" />
</label>
</td> --}}
<td class="whitespace-nowrap px-4 py-3 sm:px-5">{{ $patch->PID }}</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">{{ $patch->PATCHNAME }}</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">{{ $patch->PDESC }}</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">{{ $patch->NUMSERVER }}</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">{{ $patch->PDATE }}</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">{{ $patch->PLEVEL }}</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">{{ $patch->Remark }}</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<td class="whitespace-nowrap px-1 py-3 sm:px-2">{{ $patch->PID }}</td>
<td class="whitespace-nowrap px-1 py-3 sm:px-2">{{ $patch->PATCHNAME }}</td>
<td class="whitespace-nowrap px-1 py-3 sm:px-2">{{ \Illuminate\Support\Str::limit($patch->PDESC, 40) }}</td>
<td class="whitespace-nowrap px-1 py-3 sm:px-2">{{ $patch->NUMSERVER }}</td>
<td class="whitespace-nowrap px-1 py-3 sm:px-2">{{ $patch->PDATE }}</td>
<td class="whitespace-nowrap px-1 py-3 sm:px-2">{{ $patch->PLEVEL }}</td>
<td class="whitespace-nowrap px-1 py-3 sm:px-2">{{ $patch->Remark }}</td>
<td class="whitespace-nowrap px-1 py-3 sm:px-2">
<div class="flex justify-center space-x-2">
<a wire:click="showpatchEditForm({{ $patch->PID }})"
class="btn h-8 w-8 p-0 text-info hover:bg-info/20 focus:bg-info/20 active:bg-info/25">
......@@ -154,9 +153,8 @@
</div>
</div>
</div>
@elseif($action === 'edit')
{{-- <livewire:pages.patch.patch-edit :roles="$roles" :users="$users" :companies="$companies" :editpatchId="$editpatchId" wire:key="patch-edit" /> --}}
<livewire:pages.send-patch.send-patch-edit :editPid="$editPid">
@endif
</main>
</div>
resources/views/login.blade.php
View file @ 930e8709
<x-base-layout title="Login">
<x-guest-layout title="Login">
<style>
.background-image {
background-image: url('images/login-background.jpg'); /* Replace with your image URL */
......@@ -114,4 +114,4 @@
</div>
</div>
</x-base-layout>
</x-guest-layout>
resources/views/login3.blade.php 0 → 100644
View file @ 930e8709
<!-- resources/views/auth/login.blade.php -->
@extends('layouts.guest')
@section('content')
<div class="flex items-center justify-center min-h-screen bg-gray-100">
<div class="w-full max-w-md">
<div class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
<h2 class="text-center text-2xl font-bold mb-6">Login</h2>
<form method="POST" action="{{ route('login') }}">
@csrf
<div class="mb-4">
<label for="email" class="block text-gray-700 text-sm font-bold mb-2">Email Address</label>
<input id="email" type="email" name="email" value="{{ old('email') }}" required autocomplete="email" autofocus
class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
@error('email')
<span class="text-red-500 text-sm mt-2">{{ $message }}</span>
@enderror
</div>
<div class="mb-4">
<label for="password" class="block text-gray-700 text-sm font-bold mb-2">Password</label>
<input id="password" type="password" name="password" required autocomplete="current-password"
class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
@error('password')
<span class="text-red-500 text-sm mt-2">{{ $message }}</span>
@enderror
</div>
<div class="mb-6">
<label class="block text-gray-500 font-bold">
<input class="mr-2 leading-tight" type="checkbox" name="remember" id="remember" {{ old('remember') ? 'checked' : '' }}>
<span class="text-sm">Remember Me</span>
</label>
</div>
<div class="flex items-center justify-between">
<button type="submit"
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
Login
</button>
@if (Route::has('password.request'))
<a class="inline-block align-baseline font-bold text-sm text-blue-500 hover:text-blue-800"
href="{{ route('password.request') }}">
Forgot Password?
</a>
@endif
</div>
</form>
</div>
</div>
</div>
@endsection
resources/views/pages/apps-chat.blade.php deleted 100644 → 0
View file @ 5bad2db9
<x-base-layout title="Chat App" is-sidebar-open="true" has-min-sidebar="true">
<!-- Sidebar -->
<div class="sidebar print:hidden">
<!-- Main Sidebar -->
<x-app-partials.main-sidebar></x-app-partials.main-sidebar>
<!-- Sidebar Panel -->
<div class="sidebar-panel">
<div class="flex h-full grow flex-col bg-white pl-[var(--main-sidebar-width)] dark:bg-navy-750">
<!-- Sidebar Panel Header -->
<div class="flex h-18 w-full items-center justify-between pl-4 pr-1">
<div class="flex items-center">
<div class="avatar mr-3 hidden h-9 w-9 lg:flex">
<div
class="is-initial rounded-full bg-primary/10 text-primary dark:bg-accent-light/10 dark: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" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
</svg>
</div>
</div>
<p class="text-lg font-medium tracking-wider text-slate-800 line-clamp-1 dark:text-navy-100">
Chat
</p>
</div>
<button @click="$store.global.isSidebarExpanded = false"
class="btn h-7 w-7 rounded-full p-0 text-primary hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-accent-light/80 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25 xl:hidden">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
</svg>
</button>
</div>
<!-- Sidebar Panel Body -->
<div class="flex h-[calc(100%-4.5rem)] grow flex-col">
<div>
<div class="flex items-center justify-between px-4">
<span class="text-xs+ font-medium uppercase">History</span>
<div class="-mr-1.5 flex">
<button
class="btn h-6 w-6 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-3.5 w-3.5" fill="none"
viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" />
</svg>
</button>
</div>
</div>
<div class="swiper px-4" x-init="$nextTick(() => $el._x_swiper = new Swiper($el, { slidesPerView: 'auto', spaceBetween: 10, slidesPerGroup: 3 }))">
<div class="swiper-wrapper mt-1">
<div class="swiper-slide flex w-11 shrink-0 flex-col items-center justify-center">
<div
class="h-11 w-11 rounded-full bg-gradient-to-r from-purple-500 to-orange-600 p-0.5">
<img class="h-full w-full rounded-full border-2 border-white object-cover dark:border-slate-700"
src="{{ asset('images/200x200.png') }}" alt="avatar" />
</div>
<p
class="mt-1 w-14 break-words text-center text-xs text-slate-600 line-clamp-1 dark:text-navy-100">
Konnor
</p>
</div>
<div class="swiper-slide flex w-11 shrink-0 flex-col items-center justify-center">
<div
class="h-11 w-11 rounded-full bg-gradient-to-r from-purple-500 to-orange-600 p-0.5">
<img class="h-full w-full rounded-full border-2 border-white object-cover dark:border-slate-700"
src="{{ asset('images/200x200.png') }}" alt="avatar" />
</div>
<p
class="mt-1 w-14 break-words text-center text-xs text-slate-600 line-clamp-1 dark:text-navy-100">
Travis
</p>
</div>
<div class="swiper-slide flex w-11 shrink-0 flex-col items-center justify-center">
<div
class="h-11 w-11 rounded-full bg-gradient-to-r from-purple-500 to-orange-600 p-0.5">
<img class="h-full w-full rounded-full border-2 border-white object-cover dark:border-slate-700"
src="{{ asset('images/200x200.png') }}" alt="avatar" />
</div>
<p
class="mt-1 w-14 break-words text-center text-xs text-slate-600 line-clamp-1 dark:text-navy-100">
Fuller
</p>
</div>
<div class="swiper-slide flex w-11 shrink-0 flex-col items-center justify-center">
<div
class="h-11 w-11 rounded-full bg-gradient-to-r from-purple-500 to-orange-600 p-0.5">
<img class="h-full w-full rounded-full border-2 border-white object-cover dark:border-slate-700"
src="{{ asset('images/200x200.png') }}" alt="avatar" />
</div>
<p
class="mt-1 w-14 break-words text-center text-xs text-slate-600 line-clamp-1 dark:text-navy-100">
Alfredo
</p>
</div>
<div class="swiper-slide flex w-11 shrink-0 flex-col items-center justify-center">
<div
class="h-11 w-11 rounded-full bg-gradient-to-r from-purple-500 to-orange-600 p-0.5">
<img class="h-full w-full rounded-full border-2 border-white object-cover dark:border-slate-700"
src="{{ asset('images/200x200.png') }}" alt="avatar" />
</div>
<p
class="mt-1 w-14 break-words text-center text-xs text-slate-600 line-clamp-1 dark:text-navy-100">
Elliott
</p>
</div>
<div class="swiper-slide flex w-11 shrink-0 flex-col items-center justify-center">
<div
class="h-11 w-11 rounded-full bg-gradient-to-r from-purple-500 to-orange-600 p-0.5">
<img class="h-full w-full rounded-full border-2 border-white object-cover dark:border-slate-700"
src="{{ asset('images/200x200.png') }}" alt="avatar" />
</div>
<p
class="mt-1 w-14 break-words text-center text-xs text-slate-600 line-clamp-1 dark:text-navy-100">
Derrick
</p>
</div>
<div class="swiper-slide flex w-11 shrink-0 flex-col items-center justify-center">
<div
class="h-11 w-11 rounded-full bg-gradient-to-r from-purple-500 to-orange-600 p-0.5">
<img class="h-full w-full rounded-full border-2 border-white object-cover dark:border-slate-700"
src="{{ asset('images/200x200.png') }}" alt="avatar" />
</div>
<p
class="mt-1 w-14 break-words text-center text-xs text-slate-600 line-clamp-1 dark:text-navy-100">
Simmons
</p>
</div>
<div class="swiper-slide flex w-11 shrink-0 flex-col items-center justify-center">
<div
class="h-11 w-11 rounded-full bg-gradient-to-r from-purple-500 to-orange-600 p-0.5">
<img class="h-full w-full rounded-full border-2 border-white object-cover dark:border-slate-700"
src="{{ asset('images/200x200.png') }}" alt="avatar" />
</div>
<p
class="mt-1 w-14 break-words text-center text-xs text-slate-600 line-clamp-1 dark:text-navy-100">
Katrina
</p>
</div>
<div class="swiper-slide flex w-11 shrink-0 flex-col items-center justify-center">
<div
class="h-11 w-11 rounded-full bg-gradient-to-r from-purple-500 to-orange-600 p-0.5">
<img class="h-full w-full rounded-full border-2 border-white object-cover dark:border-slate-700"
src="{{ asset('images/200x200.png') }}" alt="avatar" />
</div>
<p
class="mt-1 w-14 break-words text-center text-xs text-slate-600 line-clamp-1 dark:text-navy-100">
Henry
</p>
</div>
<div class="swiper-slide flex w-11 shrink-0 flex-col items-center justify-center">
<div
class="h-11 w-11 rounded-full bg-gradient-to-r from-purple-500 to-orange-600 p-0.5">
<img class="h-full w-full rounded-full border-2 border-white object-cover dark:border-slate-700"
src="{{ asset('images/200x200.png') }}" alt="avatar" />
</div>
<p
class="mt-1 w-14 break-words text-center text-xs text-slate-600 line-clamp-1 dark:text-navy-100">
Curtis
</p>
</div>
<div class="swiper-slide flex w-11 shrink-0 flex-col items-center justify-center">
<div
class="h-11 w-11 rounded-full bg-gradient-to-r from-purple-500 to-orange-600 p-0.5">
<img class="h-full w-full rounded-full border-2 border-white object-cover dark:border-slate-700"
src="{{ asset('images/200x200.png') }}" alt="avatar" />
</div>
<p
class="mt-1 w-14 break-words text-center text-xs text-slate-600 line-clamp-1 dark:text-navy-100">
Bradley
</p>
</div>
<div class="swiper-slide flex w-11 shrink-0 flex-col items-center justify-center">
<div
class="h-11 w-11 rounded-full bg-gradient-to-r from-purple-500 to-orange-600 p-0.5">
<img class="h-full w-full rounded-full border-2 border-white object-cover dark:border-slate-700"
src="{{ asset('images/200x200.png') }}" alt="avatar" />
</div>
<p
class="mt-1 w-14 break-words text-center text-xs text-slate-600 line-clamp-1 dark:text-navy-100">
Samantha
</p>
</div>
<div class="swiper-slide flex w-11 shrink-0 flex-col items-center justify-center">
<div
class="h-11 w-11 rounded-full bg-gradient-to-r from-purple-500 to-orange-600 p-0.5">
<img class="h-full w-full rounded-full border-2 border-white object-cover dark:border-slate-700"
src="{{ asset('images/200x200.png') }}" alt="avatar" />
</div>
<p
class="mt-1 w-14 break-words text-center text-xs text-slate-600 line-clamp-1 dark:text-navy-100">
Corey
</p>
</div>
<div class="swiper-slide flex w-11 shrink-0 flex-col items-center justify-center">
<div
class="h-11 w-11 rounded-full bg-gradient-to-r from-purple-500 to-orange-600 p-0.5">
<img class="h-full w-full rounded-full border-2 border-white object-cover dark:border-slate-700"
src="{{ asset('images/200x200.png') }}" alt="avatar" />
</div>
<p
class="mt-1 w-14 break-words text-center text-xs text-slate-600 line-clamp-1 dark:text-navy-100">
Lance
</p>
</div>
<div class="swiper-slide flex w-11 shrink-0 flex-col items-center justify-center">
<div
class="h-11 w-11 rounded-full bg-gradient-to-r from-purple-500 to-orange-600 p-0.5">
<img class="h-full w-full rounded-full border-2 border-white object-cover dark:border-slate-700"
src="{{ asset('images/200x200.png') }}" alt="avatar" />
</div>
<p
class="mt-1 w-14 break-words text-center text-xs text-slate-600 line-clamp-1 dark:text-navy-100">
Tucker
</p>
</div>
<div class="swiper-slide flex w-11 shrink-0 flex-col items-center justify-center">
<div
class="h-11 w-11 rounded-full bg-gradient-to-r from-purple-500 to-orange-600 p-0.5">
<img class="h-full w-full rounded-full border-2 border-white object-cover dark:border-slate-700"
src="{{ asset('images/200x200.png') }}" alt="avatar" />
</div>
<p
class="mt-1 w-14 break-words text-center text-xs text-slate-600 line-clamp-1 dark:text-navy-100">
Jensen
</p>
</div>
<div class="swiper-slide flex w-11 shrink-0 flex-col items-center justify-center">
<div
class="h-11 w-11 rounded-full bg-gradient-to-r from-purple-500 to-orange-600 p-0.5">
<img class="h-full w-full rounded-full border-2 border-white object-cover dark:border-slate-700"
src="{{ asset('images/200x200.png') }}" alt="avatar" />
</div>
<p
class="mt-1 w-14 break-words text-center text-xs text-slate-600 line-clamp-1 dark:text-navy-100">
Perkins
</p>
</div>
<div class="swiper-slide flex w-11 shrink-0 flex-col items-center justify-center">
<div
class="h-11 w-11 rounded-full bg-gradient-to-r from-purple-500 to-orange-600 p-0.5">
<img class="h-full w-full rounded-full border-2 border-white object-cover dark:border-slate-700"
src="{{ asset('images/200x200.png') }}" alt="avatar" />
</div>
<p
class="mt-1 w-14 break-words text-center text-xs text-slate-600 line-clamp-1 dark:text-navy-100">
Evans
</p>
</div>
</div>
</div>
</div>
<div class="mt-4 flex px-4">
<label class="relative mr-1.5 flex">
<input
class="form-input peer h-8 w-full rounded-lg bg-slate-150 px-3 py-2 pl-9 text-xs+ ring-primary/50 placeholder:text-slate-400 hover:bg-slate-200 focus:ring dark:bg-navy-900/90 dark:ring-accent/50 dark:placeholder:text-navy-300 dark:hover:bg-navy-900 dark:focus:bg-navy-900"
placeholder="Search chats" 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 w-4 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>
<button
class="btn -mr-2 h-8 w-8 shrink-0 rounded-full p-0 text-slate-500 hover:bg-slate-300/20 hover:text-primary focus:bg-slate-300/20 focus:text-primary active:bg-slate-300/25 dark:text-navy-200 dark:hover:bg-navy-300/20 dark:hover:text-accent dark:focus:bg-navy-300/20 dark:focus:text-accent 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" stroke-miterlimit="10"
d="M22 6.5h-9.5M6 6.5H2M9 9a2.5 2.5 0 100-5 2.5 2.5 0 000 5zM22 17.5h-6M9.5 17.5H2M13 20a2.5 2.5 0 100-5 2.5 2.5 0 000 5z" />
</svg>
</button>
</div>
<div class="is-scrollbar-hidden mt-3 flex grow flex-col overflow-y-auto">
<div @click="$dispatch('change-active-chat',{chatId:'chat-1',avatar_url:'/images/200x200.png',name:'Alfredo Elliott'})"
class="flex cursor-pointer items-center space-x-2.5 px-4 py-2.5 font-inter hover:bg-slate-150 dark:hover:bg-navy-600">
<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-slate-300 dark:border-navy-700">
</div>
</div>
<div class="flex flex-1 flex-col">
<div class="flex items-baseline justify-between space-x-1.5">
<p class="text-xs+ font-medium text-slate-700 line-clamp-1 dark:text-navy-100">
Alfredo Elliott
</p>
<span class="text-tiny+ text-slate-400 dark:text-navy-300">11:03</span>
</div>
<div class="mt-1 flex items-center justify-between space-x-1">
<p class="text-xs+ text-slate-400 line-clamp-1 dark:text-navy-300">
😂 Lorem ipsum dolor
</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>
</div>
</div>
<div @click="$dispatch('change-active-chat',{chatId:'chat-2',avatar_url:'/images/200x200.png',name:'Konnor Guzman'})"
class="flex cursor-pointer items-center space-x-2.5 px-4 py-2.5 font-inter hover:bg-slate-150 dark:hover:bg-navy-600">
<div class="avatar h-10 w-10">
<img class="rounded-full" src="{{ asset('images/200x200.png') }}" alt="avatar" />
</div>
<div class="flex flex-1 flex-col">
<div class="flex items-baseline justify-between space-x-1.5">
<p class="text-xs+ font-medium text-slate-700 line-clamp-1 dark:text-navy-100">
Konnor Guzman
</p>
<span class="text-tiny+ text-slate-400 dark:text-navy-300">09:16</span>
</div>
<div class="mt-1 flex items-center justify-between space-x-1">
<p class="text-xs+ text-slate-400 line-clamp-1 dark:text-navy-300">
💣 Adipisicing elit. Prov ident?
</p>
</div>
</div>
</div>
<div @click="$dispatch('change-active-chat',{chatId:'chat-3',avatar_url:'/images/200x200.png',name:'Travis Fuller'})"
class="flex cursor-pointer items-center space-x-2.5 px-4 py-2.5 font-inter hover:bg-slate-150 dark:hover:bg-navy-600">
<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">
<span
class="absolute inline-flex h-full w-full animate-ping rounded-full bg-primary opacity-80 dark:bg-accent"></span>
</div>
</div>
<div class="flex flex-1 flex-col">
<div class="flex items-baseline justify-between space-x-1.5">
<p class="text-xs+ font-medium text-slate-700 line-clamp-1 dark:text-navy-100">
Travis Fuller
</p>
<span class="text-tiny+ text-slate-400 dark:text-navy-300">08:05</span>
</div>
<div class="mt-1 flex items-center justify-between space-x-1">
<p class="text-xs+ text-slate-400 line-clamp-1 dark:text-navy-300">
Dolor set. Prov ident?
</p>
<div
class="flex h-4.5 min-w-[1.125rem] items-center justify-center rounded-full bg-primary px-1.5 text-tiny+ font-medium leading-none text-white dark:bg-accent">
4
</div>
</div>
</div>
</div>
<div @click="$dispatch('change-active-chat',{chatId:'chat-1',avatar_url:'/images/200x200.png',name:'Derrick Simmons'})"
class="flex cursor-pointer items-center space-x-2.5 px-4 py-2.5 font-inter hover:bg-slate-150 dark:hover:bg-navy-600">
<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-slate-300 dark:border-navy-700">
</div>
</div>
<div class="flex flex-1 flex-col">
<div class="flex items-baseline justify-between space-x-1.5">
<p class="text-xs+ font-medium text-slate-700 line-clamp-1 dark:text-navy-100">
Derrick Simmons
</p>
<span class="text-tiny+ text-slate-400 dark:text-navy-300">06:21</span>
</div>
<div class="mt-1 flex items-center justify-between space-x-1">
<p class="text-xs+ text-slate-400 line-clamp-1 dark:text-navy-300">
And that’s why a 15th century
</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">
2
</div>
</div>
</div>
</div>
<div @click="$dispatch('change-active-chat',{chatId:'chat-2',avatar_url:'/images/200x200.png',name:'Katrina West'})"
class="flex cursor-pointer items-center space-x-2.5 px-4 py-2.5 font-inter hover:bg-slate-150 dark:hover:bg-navy-600">
<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-slate-300 dark:border-navy-700">
</div>
</div>
<div class="flex flex-1 flex-col">
<div class="flex items-baseline justify-between space-x-1.5">
<p class="text-xs+ font-medium text-slate-700 line-clamp-1 dark:text-navy-100">
Katrina West
</p>
<span class="text-tiny+ text-slate-400 dark:text-navy-300">06:21</span>
</div>
<div class="mt-1 flex items-center justify-between space-x-1">
<p class="text-xs+ text-slate-400 line-clamp-1 dark:text-navy-300">
he wanted people to focus
</p>
</div>
</div>
</div>
<div @click="$dispatch('change-active-chat',{chatId:'chat-3',avatar_url:'/images/200x200.png',name:'Corey Evans'})"
class="flex cursor-pointer items-center space-x-2.5 px-4 py-2.5 font-inter hover:bg-slate-150 dark:hover:bg-navy-600">
<div class="avatar h-10 w-10">
<img class="rounded-full" src="{{ asset('images/200x200.png') }}" alt="avatar" />
</div>
<div class="flex flex-1 flex-col">
<div class="flex items-baseline justify-between space-x-1.5">
<p class="text-xs+ font-medium text-slate-700 line-clamp-1 dark:text-navy-100">
Corey Evans
</p>
<span class="text-tiny+ text-slate-400 dark:text-navy-300">Tue</span>
</div>
<div class="mt-1 flex items-center justify-between space-x-1">
<p class="text-xs+ text-slate-400 line-clamp-1 dark:text-navy-300">
Ut enim ad minim veniam
</p>
</div>
</div>
</div>
<div @click="$dispatch('change-active-chat',{chatId:'chat-1',avatar_url:'/images/200x200.png',name:'Anthony Jensen'})"
class="flex cursor-pointer items-center space-x-2.5 px-4 py-2.5 font-inter hover:bg-slate-150 dark:hover:bg-navy-600">
<div class="avatar h-10 w-10">
<img class="rounded-full" src="{{ asset('images/200x200.png') }}" alt="avatar" />
</div>
<div class="flex flex-1 flex-col">
<div class="flex items-baseline justify-between space-x-1.5">
<p class="text-xs+ font-medium text-slate-700 line-clamp-1 dark:text-navy-100">
Anthony Jensen
</p>
<span class="text-tiny+ text-slate-400 dark:text-navy-300">Tue</span>
</div>
<div class="mt-1 flex items-center justify-between space-x-1">
<p class="text-xs+ text-slate-400 line-clamp-1 dark:text-navy-300">
Excepteur sint occaecat cupidatat
</p>
</div>
</div>
</div>
<div @click="$dispatch('change-active-chat',{chatId:'chat-2',avatar_url:'/images/200x200.png',name:'Lance Tucker'})"
class="flex cursor-pointer items-center space-x-2.5 px-4 py-2.5 font-inter hover:bg-slate-150 dark:hover:bg-navy-600">
<div class="avatar h-10 w-10">
<img class="rounded-full" src="{{ asset('images/200x200.png') }}" alt="avatar" />
</div>
<div class="flex flex-1 flex-col">
<div class="flex items-baseline justify-between space-x-1.5">
<p class="text-xs+ font-medium text-slate-700 line-clamp-1 dark:text-navy-100">
Lance Tucker
</p>
<span class="text-tiny+ text-slate-400 dark:text-navy-300">Tue</span>
</div>
<div class="mt-1 flex items-center justify-between space-x-1">
<p class="text-xs+ text-slate-400 line-clamp-1 dark:text-navy-300">
Duis aute irure dolor in
</p>
</div>
</div>
</div>
<div @click="$dispatch('change-active-chat',{chatId:'chat-1',avatar_url:'/images/200x200.png',name:'Alfredo Elliott'})"
class="flex cursor-pointer items-center space-x-2.5 px-4 py-2.5 font-inter hover:bg-slate-150 dark:hover:bg-navy-600">
<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-slate-300 dark:border-navy-700">
</div>
</div>
<div class="flex flex-1 flex-col">
<div class="flex items-baseline justify-between space-x-1.5">
<p class="text-xs+ font-medium text-slate-700 line-clamp-1 dark:text-navy-100">
Alfredo Elliott
</p>
<span class="text-tiny+ text-slate-400 dark:text-navy-300">11:03</span>
</div>
<div class="mt-1 flex items-center justify-between space-x-1">
<p class="text-xs+ text-slate-400 line-clamp-1 dark:text-navy-300">
😂 Lorem ipsum dolor
</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>
</div>
</div>
<div @click="$dispatch('change-active-chat',{chatId:'chat-2',avatar_url:'/images/200x200.png',name:'Konnor Guzman'})"
class="flex cursor-pointer items-center space-x-2.5 px-4 py-2.5 font-inter hover:bg-slate-150 dark:hover:bg-navy-600">
<div class="avatar h-10 w-10">
<img class="rounded-full" src="{{ asset('images/200x200.png') }}" alt="avatar" />
</div>
<div class="flex flex-1 flex-col">
<div class="flex items-baseline justify-between space-x-1.5">
<p class="text-xs+ font-medium text-slate-700 line-clamp-1 dark:text-navy-100">
Konnor Guzman
</p>
<span class="text-tiny+ text-slate-400 dark:text-navy-300">09:16</span>
</div>
<div class="mt-1 flex items-center justify-between space-x-1">
<p class="text-xs+ text-slate-400 line-clamp-1 dark:text-navy-300">
💣 Adipisicing elit. Prov ident?
</p>
</div>
</div>
</div>
<div @click="$dispatch('change-active-chat',{chatId:'chat-3',avatar_url:'/images/200x200.png',name:'Travis Fuller'})"
class="flex cursor-pointer items-center space-x-2.5 px-4 py-2.5 font-inter hover:bg-slate-150 dark:hover:bg-navy-600">
<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">
<span
class="absolute inline-flex h-full w-full animate-ping rounded-full bg-primary opacity-80 dark:bg-accent"></span>
</div>
</div>
<div class="flex flex-1 flex-col">
<div class="flex items-baseline justify-between space-x-1.5">
<p class="text-xs+ font-medium text-slate-700 line-clamp-1 dark:text-navy-100">
Travis Fuller
</p>
<span class="text-tiny+ text-slate-400 dark:text-navy-300">08:05</span>
</div>
<div class="mt-1 flex items-center justify-between space-x-1">
<p class="text-xs+ text-slate-400 line-clamp-1 dark:text-navy-300">
Dolor set. Prov ident?
</p>
<div
class="flex h-4.5 min-w-[1.125rem] items-center justify-center rounded-full bg-primary px-1.5 text-tiny+ font-medium leading-none text-white dark:bg-accent">
4
</div>
</div>
</div>
</div>
<div @click="$dispatch('change-active-chat',{chatId:'chat-1',avatar_url:'/images/200x200.png',name:'Derrick Simmons'})"
class="flex cursor-pointer items-center space-x-2.5 px-4 py-2.5 font-inter hover:bg-slate-150 dark:hover:bg-navy-600">
<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-slate-300 dark:border-navy-700">
</div>
</div>
<div class="flex flex-1 flex-col">
<div class="flex items-baseline justify-between space-x-1.5">
<p class="text-xs+ font-medium text-slate-700 line-clamp-1 dark:text-navy-100">
Derrick Simmons
</p>
<span class="text-tiny+ text-slate-400 dark:text-navy-300">06:21</span>
</div>
<div class="mt-1 flex items-center justify-between space-x-1">
<p class="text-xs+ text-slate-400 line-clamp-1 dark:text-navy-300">
And that’s why a 15th century
</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">
2
</div>
</div>
</div>
</div>
<div @click="$dispatch('change-active-chat',{chatId:'chat-2',avatar_url:'/images/200x200.png',name:'Katrina West'})"
class="flex cursor-pointer items-center space-x-2.5 px-4 py-2.5 font-inter hover:bg-slate-150 dark:hover:bg-navy-600">
<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-slate-300 dark:border-navy-700">
</div>
</div>
<div class="flex flex-1 flex-col">
<div class="flex items-baseline justify-between space-x-1.5">
<p class="text-xs+ font-medium text-slate-700 line-clamp-1 dark:text-navy-100">
Katrina West
</p>
<span class="text-tiny+ text-slate-400 dark:text-navy-300">06:21</span>
</div>
<div class="mt-1 flex items-center justify-between space-x-1">
<p class="text-xs+ text-slate-400 line-clamp-1 dark:text-navy-300">
he wanted people to focus
</p>
</div>
</div>
</div>
<div @click="$dispatch('change-active-chat',{chatId:'chat-3',avatar_url:'/images/200x200.png',name:'Corey Evans'})"
class="flex cursor-pointer items-center space-x-2.5 px-4 py-2.5 font-inter hover:bg-slate-150 dark:hover:bg-navy-600">
<div class="avatar h-10 w-10">
<img class="rounded-full" src="{{ asset('images/200x200.png') }}" alt="avatar" />
</div>
<div class="flex flex-1 flex-col">
<div class="flex items-baseline justify-between space-x-1.5">
<p class="text-xs+ font-medium text-slate-700 line-clamp-1 dark:text-navy-100">
Corey Evans
</p>
<span class="text-tiny+ text-slate-400 dark:text-navy-300">Tue</span>
</div>
<div class="mt-1 flex items-center justify-between space-x-1">
<p class="text-xs+ text-slate-400 line-clamp-1 dark:text-navy-300">
Ut enim ad minim veniam
</p>
</div>
</div>
</div>
<div @click="$dispatch('change-active-chat',{chatId:'chat-1',avatar_url:'/images/200x200.png',name:'Anthony Jensen'})"
class="flex cursor-pointer items-center space-x-2.5 px-4 py-2.5 font-inter hover:bg-slate-150 dark:hover:bg-navy-600">
<div class="avatar h-10 w-10">
<img class="rounded-full" src="{{ asset('images/200x200.png') }}" alt="avatar" />
</div>
<div class="flex flex-1 flex-col">
<div class="flex items-baseline justify-between space-x-1.5">
<p class="text-xs+ font-medium text-slate-700 line-clamp-1 dark:text-navy-100">
Anthony Jensen
</p>
<span class="text-tiny+ text-slate-400 dark:text-navy-300">Tue</span>
</div>
<div class="mt-1 flex items-center justify-between space-x-1">
<p class="text-xs+ text-slate-400 line-clamp-1 dark:text-navy-300">
Excepteur sint occaecat cupidatat
</p>
</div>
</div>
</div>
<div @click="$dispatch('change-active-chat',{chatId:'chat-2',avatar_url:'/images/200x200.png',name:'Lance Tucker'})"
class="flex cursor-pointer items-center space-x-2.5 px-4 py-2.5 font-inter hover:bg-slate-150 dark:hover:bg-navy-600">
<div class="avatar h-10 w-10">
<img class="rounded-full" src="{{ asset('images/200x200.png') }}" alt="avatar" />
</div>
<div class="flex flex-1 flex-col">
<div class="flex items-baseline justify-between space-x-1.5">
<p class="text-xs+ font-medium text-slate-700 line-clamp-1 dark:text-navy-100">
Lance Tucker
</p>
<span class="text-tiny+ text-slate-400 dark:text-navy-300">Tue</span>
</div>
<div class="mt-1 flex items-center justify-between space-x-1">
<p class="text-xs+ text-slate-400 line-clamp-1 dark:text-navy-300">
Duis aute irure dolor in
</p>
</div>
</div>
</div>
</div>
<div
class="flex h-12 shrink-0 justify-between border-t border-slate-150 px-1.5 py-1 dark:border-navy-600">
<a href="#" x-tooltip="'All Chats'"
class="btn h-9 w-9 rounded-full p-0 text-primary hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-accent 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" viewBox="0 0 20 20"
fill="currentColor">
<path d="M2 5a2 2 0 012-2h7a2 2 0 012 2v4a2 2 0 01-2 2H9l-3 3v-3H4a2 2 0 01-2-2V5z" />
<path
d="M15 7v2a4 4 0 01-4 4H9.828l-1.766 1.767c.28.149.599.233.938.233h2l3 3v-3h2a2 2 0 002-2V9a2 2 0 00-2-2h-1z" />
</svg>
</a>
<a href="#" x-tooltip="'Users'"
class="btn h-9 w-9 rounded-full p-0 hover:bg-slate-300/20 hover:text-primary focus:bg-slate-300/20 focus:text-primary active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:hover:text-accent dark:focus:bg-navy-300/20 dark:focus:text-accent 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="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
</svg>
</a>
<a href="#" x-tooltip="'Groups'"
class="btn h-9 w-9 rounded-full p-0 hover:bg-slate-300/20 hover:text-primary focus:bg-slate-300/20 focus:text-primary active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:hover:text-accent dark:focus:bg-navy-300/20 dark:focus:text-accent 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="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
</svg>
</a>
<a href="#" x-tooltip="'Channels'"
class="btn h-9 w-9 rounded-full p-0 hover:bg-slate-300/20 hover:text-primary focus:bg-slate-300/20 focus:text-primary active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:hover:text-accent dark:focus:bg-navy-300/20 dark:focus:text-accent 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="M7 20l4-16m2 16l4-16M6 9h14M4 15h14" />
</svg>
</a>
<a href="#" x-tooltip="'More'"
class="btn h-9 w-9 rounded-full p-0 hover:bg-slate-300/20 hover:text-primary focus:bg-slate-300/20 focus:text-primary active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:hover:text-accent dark:focus:bg-navy-300/20 dark:focus:text-accent 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="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>
</a>
</div>
</div>
</div>
</div>
<!-- Minimized Sidebar Panel -->
<div class="sidebar-panel-min">
<div class="flex h-full flex-col bg-white dark:bg-navy-750">
<div class="flex h-18 shrink-0 items-center justify-center">
<div class="avatar flex h-10 w-10">
<div
class="is-initial is-initial rounded-full bg-primary/10 text-primary dark:bg-accent-light/10 dark:text-accent-light">
<svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor"
xmlns="http://www.w3.org/2000/svg" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
</svg>
</div>
</div>
</div>
<div class="flex h-[calc(100%-4.5rem)] grow flex-col">
<div class="is-scrollbar-hidden flex grow flex-col overflow-y-auto">
<ul class="mt-2 flex flex-col items-center justify-center space-y-1">
<li>
<a href="#"
class="btn h-10 w-10 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.5 w-5.5" fill="none"
viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round"
d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" />
</svg>
</a>
</li>
<li>
<a href="#"
class="btn h-10 w-10 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.5 w-5.5" fill="none"
viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round"
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
</a>
</li>
</ul>
<div class="my-4 mx-4 h-px shrink-0 bg-slate-200 dark:bg-navy-500"></div>
<div class="flex flex-col">
<div @click="$dispatch('change-active-chat',{chatId:'chat-1',avatar_url:'/images/200x200.png',name:'Alfredo Elliott'})"
class="flex cursor-pointer items-center justify-center py-2.5 hover:bg-slate-150 dark:hover:bg-navy-600">
<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-slate-300 dark:border-navy-700">
</div>
</div>
</div>
<div @click="$dispatch('change-active-chat',{chatId:'chat-2',avatar_url:'/images/200x200.png',name:'Konnor Guzman'})"
class="flex cursor-pointer items-center justify-center py-2.5 hover:bg-slate-150 dark:hover:bg-navy-600">
<div class="avatar h-10 w-10">
<img class="rounded-full" src="{{ asset('images/200x200.png') }}"
alt="avatar" />
</div>
</div>
<div @click="$dispatch('change-active-chat',{chatId:'chat-3',avatar_url:'/images/200x200.png',name:'Travis Fuller'})"
class="flex cursor-pointer items-center justify-center py-2.5 hover:bg-slate-150 dark:hover:bg-navy-600">
<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">
<span
class="absolute inline-flex h-full w-full animate-ping rounded-full bg-primary opacity-80 dark:bg-accent"></span>
</div>
</div>
</div>
<div @click="$dispatch('change-active-chat',{chatId:'chat-1',avatar_url:'/images/200x200.png',name:'Derrick Simmons'})"
class="flex cursor-pointer items-center justify-center py-2.5 hover:bg-slate-150 dark:hover:bg-navy-600">
<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-slate-300 dark:border-navy-700">
</div>
</div>
</div>
<div @click="$dispatch('change-active-chat',{chatId:'chat-2',avatar_url:'/images/200x200.png',name:'Katrina West'})"
class="flex cursor-pointer items-center justify-center py-2.5 hover:bg-slate-150 dark:hover:bg-navy-600">
<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-slate-300 dark:border-navy-700">
</div>
</div>
</div>
<div @click="$dispatch('change-active-chat',{chatId:'chat-3',avatar_url:'/images/200x200.png',name:'Corey Evans'})"
class="flex cursor-pointer items-center justify-center py-2.5 hover:bg-slate-150 dark:hover:bg-navy-600">
<div class="avatar h-10 w-10">
<img class="rounded-full" src="{{ asset('images/200x200.png') }}"
alt="avatar" />
</div>
</div>
<div @click="$dispatch('change-active-chat',{chatId:'chat-1',avatar_url:'/images/200x200.png',name:'Anthony Jensen'})"
class="flex cursor-pointer items-center justify-center py-2.5 hover:bg-slate-150 dark:hover:bg-navy-600">
<div class="avatar h-10 w-10">
<img class="rounded-full" src="{{ asset('images/200x200.png') }}"
alt="avatar" />
</div>
</div>
<div @click="$dispatch('change-active-chat',{chatId:'chat-2',avatar_url:'/images/200x200.png',name:'Lance Tucker'})"
class="flex cursor-pointer items-center justify-center py-2.5 hover:bg-slate-150 dark:hover:bg-navy-600">
<div class="avatar h-10 w-10">
<img class="rounded-full" src="{{ asset('images/200x200.png') }}"
alt="avatar" />
</div>
</div>
<div @click="$dispatch('change-active-chat',{chatId:'chat-1',avatar_url:'/images/200x200.png',name:'Alfredo Elliott'})"
class="flex cursor-pointer items-center justify-center py-2.5 hover:bg-slate-150 dark:hover:bg-navy-600">
<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-slate-300 dark:border-navy-700">
</div>
</div>
</div>
<div @click="$dispatch('change-active-chat',{chatId:'chat-2',avatar_url:'/images/200x200.png',name:'Konnor Guzman'})"
class="flex cursor-pointer items-center justify-center py-2.5 hover:bg-slate-150 dark:hover:bg-navy-600">
<div class="avatar h-10 w-10">
<img class="rounded-full" src="{{ asset('images/200x200.png') }}"
alt="avatar" />
</div>
</div>
<div @click="$dispatch('change-active-chat',{chatId:'chat-3',avatar_url:'/images/200x200.png',name:'Travis Fuller'})"
class="flex cursor-pointer items-center justify-center py-2.5 hover:bg-slate-150 dark:hover:bg-navy-600">
<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">
<span
class="absolute inline-flex h-full w-full animate-ping rounded-full bg-primary opacity-80 dark:bg-accent"></span>
</div>
</div>
</div>
<div @click="$dispatch('change-active-chat',{chatId:'chat-1',avatar_url:'/images/200x200.png',name:'Derrick Simmons'})"
class="flex cursor-pointer items-center justify-center py-2.5 hover:bg-slate-150 dark:hover:bg-navy-600">
<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-slate-300 dark:border-navy-700">
</div>
</div>
</div>
<div @click="$dispatch('change-active-chat',{chatId:'chat-2',avatar_url:'/images/200x200.png',name:'Katrina West'})"
class="flex cursor-pointer items-center justify-center py-2.5 hover:bg-slate-150 dark:hover:bg-navy-600">
<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-slate-300 dark:border-navy-700">
</div>
</div>
</div>
<div @click="$dispatch('change-active-chat',{chatId:'chat-3',avatar_url:'/images/200x200.png',name:'Corey Evans'})"
class="flex cursor-pointer items-center justify-center py-2.5 hover:bg-slate-150 dark:hover:bg-navy-600">
<div class="avatar h-10 w-10">
<img class="rounded-full" src="{{ asset('images/200x200.png') }}"
alt="avatar" />
</div>
</div>
<div @click="$dispatch('change-active-chat',{chatId:'chat-1',avatar_url:'/images/200x200.png',name:'Anthony Jensen'})"
class="flex cursor-pointer items-center justify-center py-2.5 hover:bg-slate-150 dark:hover:bg-navy-600">
<div class="avatar h-10 w-10">
<img class="rounded-full" src="{{ asset('images/200x200.png') }}"
alt="avatar" />
</div>
</div>
<div @click="$dispatch('change-active-chat',{chatId:'chat-2',avatar_url:'/images/200x200.png',name:'Lance Tucker'})"
class="flex cursor-pointer items-center justify-center py-2.5 hover:bg-slate-150 dark:hover:bg-navy-600">
<div class="avatar h-10 w-10">
<img class="rounded-full" src="{{ asset('images/200x200.png') }}"
alt="avatar" />
</div>
</div>
</div>
</div>
<div class="flex flex-col items-center justify-center py-3">
<div x-data="usePopper({ placement: 'right-start', offset: 4 })" @click.outside="if(isShowPopper) isShowPopper = false"
class="inline-flex">
<button x-ref="popperRef" @click="isShowPopper = !isShowPopper"
class="btn h-10 w-10 rounded-full border border-slate-200 p-0 font-medium hover:bg-slate-150 focus:bg-slate-150 active:bg-slate-150/80 dark:border-navy-500 dark:hover:bg-navy-500 dark:focus:bg-navy-500 dark:active:bg-navy-500/90">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" 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>
<template x-teleport="#x-teleport-target">
<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>
</template>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Right Sidebar -->
<x-app-partials.right-sidebar></x-app-partials.right-sidebar>
<!-- Main Content Wrapper -->
<main x-data="{ isShowChatInfo: !$store.breakpoints.mdAndDown, activeChat: { chatId: 'chat-1', name: 'Alfredo Elliott', avatar_url: '/images/200x200.png' } }" x-effect="$store.breakpoints.mdAndDown === true && (isShowChatInfo = false)"
class="main-content h-100vh chat-app mt-0 flex w-full flex-col" :class="isShowChatInfo && 'lg:mr-80'"
@change-active-chat.window="activeChat=$event.detail">
<div
class="chat-header h-[61px] border-b border-slate-150 dark:border-navy-700 relative z-10 flex w-full shrink-0 items-center justify-between bg-white px-[calc(var(--margin-x)-.5rem)] shadow-sm transition-[padding,width] duration-[.25s] dark:bg-navy-800">
<div class="flex items-center space-x-5">
<div class="ml-1 h-7 w-7">
<button
class="menu-toggle ml-0.5 flex h-7 w-7 flex-col justify-center space-y-1.5 text-primary outline-none focus:outline-none dark:text-accent-light/80"
:class="$store.global.isSidebarExpanded && 'active'"
@click="$store.global.isSidebarExpanded = !$store.global.isSidebarExpanded">
<span></span>
<span></span>
<span></span>
</button>
</div>
<div @click="isShowChatInfo = true" class="flex cursor-pointer items-center space-x-4 font-inter">
<div class="avatar">
<img class="rounded-full" :src="activeChat.avatar_url" alt="avatar" />
</div>
<div>
<p class="font-medium text-slate-700 line-clamp-1 dark:text-navy-100"
x-text="activeChat.name"></p>
<p class="mt-0.5 text-xs">Last seen recently</p>
</div>
</div>
</div>
<div class="-mr-1 flex items-center">
<button
class="btn hidden h-9 w-9 rounded-full p-0 text-slate-500 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-navy-200 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25 sm:flex">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5.5 w-5.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-9 w-9 rounded-full p-0 text-slate-500 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-navy-200 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.5 w-5.5" fill="none" viewBox="0 0 24 24"
stroke="currentColor" stroke-width="1.5">
<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>
<button @click="isShowChatInfo = !isShowChatInfo"
:class="isShowChatInfo ? 'text-primary dark:text-accent-light' : 'text-slate-500 dark:text-navy-200'"
class="btn hidden h-9 w-9 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 sm:flex">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5.5 w-5.5" fill="none" stroke="currentColor"
stroke-width="1.5" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round"
d="M9.25 21.167h5.5c4.584 0 6.417-1.834 6.417-6.417v-5.5c0-4.583-1.834-6.417-6.417-6.417h-5.5c-4.583 0-6.417 1.834-6.417 6.417v5.5c0 4.583 1.834 6.417 6.417 6.417ZM13.834 2.833v18.334" />
</svg>
</button>
<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-9 w-9 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.5 w-5.5" fill="none"
viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
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 space-x-3 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">
<svg xmlns="http://www.w3.org/2000/svg" class="mt-px 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="M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z"
clip-rule="evenodd" />
<path stroke-linecap="round" stroke-linejoin="round"
d="M17 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2" />
</svg>
<span>Unmute</span></a>
</li>
<li>
<a href="#"
class="flex h-8 items-center space-x-3 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">
<svg xmlns="http://www.w3.org/2000/svg" class="mt-px 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>
<span>Chat Setting</span></a>
</li>
<li>
<a href="#"
class="flex h-8 items-center space-x-3 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">
<svg xmlns="http://www.w3.org/2000/svg" class="mt-px 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="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" />
</svg>
<span>Block User</span></a>
</li>
<li>
<a href="#"
class="flex h-8 items-center space-x-3 px-3 pr-8 font-medium tracking-wide text-error outline-none transition-all hover:bg-error/20 focus:bg-error/20">
<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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
</svg>
<span> Delete chat</span></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div :class="$store.breakpoints.smAndUp && 'scrollbar-sm'"
class="grow overflow-y-auto px-[calc(var(--margin-x)-.5rem)] py-5 transition-all duration-[.25s]">
<div x-show="activeChat.chatId === 'chat-1'" x-transition:enter="transition-all duration-500 easy-in-out"
x-transition:enter-start="opacity-0 [transform:translate3d(0,1rem,0)]"
x-transition:enter-end="opacity-100 [transform:translate3d(0,0,0)]" class="space-y-5">
<div class="mx-4 flex items-center space-x-3">
<div class="h-px flex-1 bg-slate-200 dark:bg-navy-500"></div>
<p>Sunday</p>
<div class="h-px flex-1 bg-slate-200 dark:bg-navy-500"></div>
</div>
<div class="flex items-start space-x-2.5 sm:space-x-5">
<div class="avatar">
<img class="rounded-full" :src="activeChat.avatar_url" alt="avatar" />
</div>
<div class="flex flex-col items-start space-y-3.5">
<div class="mr-4 max-w-lg sm:mr-10">
<div
class="rounded-2xl rounded-tl-none bg-white p-3 text-slate-700 shadow-sm dark:bg-navy-700 dark:text-navy-100">
Hello My Dear. Lorem ipsum dolor sit amet, consectetur.
</div>
<p class="mt-1 ml-auto text-right text-xs text-slate-400 dark:text-navy-300">
08:16
</p>
</div>
</div>
</div>
<div class="flex items-start justify-end space-x-2.5 sm:space-x-5">
<div class="flex flex-col items-end space-y-3.5">
<div class="ml-4 max-w-lg md:ml-10">
<div
class="rounded-2xl rounded-tr-none bg-info/10 p-3 text-slate-700 shadow-sm dark:bg-accent dark:text-white">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Assumenda necessitatibus, ratione. Voluptatum.
</div>
</div>
<div class="ml-4 max-w-lg md:ml-10">
<div
class="rounded-2xl rounded-tr-none bg-info/10 p-3 text-slate-700 shadow-sm dark:bg-accent dark:text-white">
And that’s why a 15th century
</div>
<p class="mt-1 ml-auto text-left text-xs text-slate-400 dark:text-navy-300">
08:16
</p>
</div>
</div>
<div class="avatar">
<img class="rounded-full" src="{{ asset('images/200x200.png') }}" alt="avatar" />
</div>
</div>
<div class="flex items-start space-x-2.5 sm:space-x-5">
<div class="avatar">
<img class="rounded-full" :src="activeChat.avatar_url" alt="avatar" />
</div>
<div class="flex flex-col items-start space-y-3.5">
<div class="mr-4 max-w-lg sm:mr-10">
<div
class="rounded-2xl rounded-tl-none bg-white p-3 text-slate-700 shadow-sm dark:bg-navy-700 dark:text-navy-100">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Eius.
</div>
<p class="mt-1 ml-auto text-right text-xs text-slate-400 dark:text-navy-300">
08:16
</p>
</div>
<div class="mr-4 max-w-lg sm:mr-10">
<div class="grid grid-cols-12 gap-2">
<div class="group relative col-span-12 sm:col-span-4">
<img class="h-full rounded-lg object-cover"
src="{{ asset('images/800x600.png') }}" alt="image" />
<div
class="absolute top-0 flex h-full w-full items-center justify-center rounded-lg bg-black/30 opacity-0 transition-all duration-300 group-hover:opacity-100">
<button
class="btn h-9 w-9 rounded-full bg-info p-0 font-medium text-white hover:bg-info-focus focus:bg-info-focus active:bg-info-focus/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="2"
d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
</svg>
</button>
</div>
</div>
<div class="col-span-12 grid grid-cols-2 gap-2 sm:col-span-8">
<div class="group relative">
<img class="h-full rounded-lg object-cover"
src="{{ asset('images/800x600.png') }}" alt="image" />
<div
class="absolute top-0 flex h-full w-full items-center justify-center rounded-lg bg-black/30 opacity-0 transition-all duration-300 group-hover:opacity-100">
<button
class="btn h-9 w-9 rounded-full bg-info p-0 font-medium text-white hover:bg-info-focus focus:bg-info-focus active:bg-info-focus/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="2"
d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
</svg>
</button>
</div>
</div>
<div class="group relative">
<img class="h-full rounded-lg object-cover"
src="{{ asset('images/800x600.png') }}" alt="image" />
<div
class="absolute top-0 flex h-full w-full items-center justify-center rounded-lg bg-black/30 opacity-0 transition-all duration-300 group-hover:opacity-100">
<button
class="btn h-9 w-9 rounded-full bg-info p-0 font-medium text-white hover:bg-info-focus focus:bg-info-focus active:bg-info-focus/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="2"
d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
</svg>
</button>
</div>
</div>
<div class="group relative">
<img class="h-full rounded-lg object-cover"
src="{{ asset('images/800x600.png') }}" alt="image" />
<div
class="absolute top-0 flex h-full w-full items-center justify-center rounded-lg bg-black/30 opacity-0 transition-all duration-300 group-hover:opacity-100">
<button
class="btn h-9 w-9 rounded-full bg-info p-0 font-medium text-white hover:bg-info-focus focus:bg-info-focus active:bg-info-focus/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="2"
d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
</svg>
</button>
</div>
</div>
<div class="group relative">
<img class="h-full rounded-lg object-cover"
src="{{ asset('images/800x600.png') }}" alt="image" />
<div
class="absolute top-0 flex h-full w-full items-center justify-center rounded-lg bg-black/30 opacity-0 transition-all duration-300 group-hover:opacity-100">
<button
class="btn h-9 w-9 rounded-full bg-info p-0 font-medium text-white hover:bg-info-focus focus:bg-info-focus active:bg-info-focus/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="2"
d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
</svg>
</button>
</div>
</div>
</div>
</div>
<p class="mt-1 ml-auto text-right text-xs text-slate-400 dark:text-navy-300">
08:21
</p>
</div>
</div>
</div>
<div class="mx-4 flex items-center space-x-3">
<div class="h-px flex-1 bg-slate-200 dark:bg-navy-500"></div>
<p>Monday</p>
<div class="h-px flex-1 bg-slate-200 dark:bg-navy-500"></div>
</div>
<div class="flex items-start justify-end space-x-2.5 sm:space-x-5">
<div class="flex flex-col items-end space-y-3.5">
<div class="ml-4 max-w-lg md:ml-10">
<div class="group relative">
<img class="h-48 rounded-lg object-cover" src="{{ asset('images/800x600.png') }}"
alt="image" />
<div
class="absolute top-0 flex h-full w-full items-center justify-center rounded-lg bg-black/30 opacity-0 transition-all duration-300 group-hover:opacity-100">
<button
class="btn h-9 w-9 rounded-full bg-info p-0 font-medium text-white hover:bg-info-focus focus:bg-info-focus active:bg-info-focus/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="2"
d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
</svg>
</button>
</div>
</div>
</div>
<div class="ml-4 max-w-lg md:ml-10">
<div
class="rounded-2xl rounded-tr-none bg-info/10 p-3 text-slate-700 shadow-sm dark:bg-accent dark:text-white">
Please Download This File
</div>
<p class="mt-1 ml-auto text-left text-xs text-slate-400 dark:text-navy-300">
08:16
</p>
</div>
</div>
<div class="avatar">
<img class="rounded-full" src="{{ asset('images/200x200.png') }}" alt="avatar" />
</div>
</div>
</div>
<div x-show="activeChat.chatId === 'chat-2'" x-transition:enter="transition-all duration-500 easy-in-out"
x-transition:enter-start="opacity-0 [transform:translate3d(0,1rem,0)]"
x-transition:enter-end="opacity-100 [transform:translate3d(0,0,0)]" class="space-y-5">
<div class="mx-4 flex items-center space-x-3">
<div class="h-px flex-1 bg-slate-200 dark:bg-navy-500"></div>
<p>Yesterday</p>
<div class="h-px flex-1 bg-slate-200 dark:bg-navy-500"></div>
</div>
<div class="flex items-start space-x-2.5 sm:space-x-5">
<div class="avatar">
<img class="rounded-full" :src="activeChat.avatar_url" alt="avatar" />
</div>
<div class="flex flex-col items-start space-y-3.5">
<div class="mr-4 max-w-lg sm:mr-10">
<div
class="rounded-2xl rounded-tl-none bg-white p-3 text-slate-700 shadow-sm dark:bg-navy-700 dark:text-navy-100">
Hello My Dear. Lorem ipsum dolor sit amet, consectetur.
</div>
<p class="mt-1 ml-auto text-right text-xs text-slate-400 dark:text-navy-300">
08:16
</p>
</div>
</div>
</div>
<div class="flex items-start justify-end space-x-2.5 sm:space-x-5">
<div class="flex flex-col items-end space-y-3.5">
<div class="ml-4 max-w-lg md:ml-10">
<div
class="rounded-2xl rounded-tr-none bg-info/10 p-3 text-slate-700 shadow-sm dark:bg-accent dark:text-white">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Assumenda necessitatibus, ratione. Voluptatum.
</div>
</div>
<div class="ml-4 max-w-lg md:ml-10">
<div
class="rounded-2xl rounded-tr-none bg-info/10 p-3 text-slate-700 shadow-sm dark:bg-accent dark:text-white">
And that’s why a 15th century
</div>
<p class="mt-1 ml-auto text-left text-xs text-slate-400 dark:text-navy-300">
08:16
</p>
</div>
</div>
<div class="avatar">
<img class="rounded-full" src="{{ asset('images/200x200.png') }}" alt="avatar" />
</div>
</div>
</div>
<div x-show="activeChat.chatId === 'chat-3'" x-transition:enter="transition-all duration-500 easy-in-out"
x-transition:enter-start="opacity-0 [transform:translate3d(0,1rem,0)]"
x-transition:enter-end="opacity-100 [transform:translate3d(0,0,0)]" class="space-y-5">
<div class="mx-4 flex items-center space-x-3">
<div class="h-px flex-1 bg-slate-200 dark:bg-navy-500"></div>
<p>Sunday</p>
<div class="h-px flex-1 bg-slate-200 dark:bg-navy-500"></div>
</div>
<div class="flex items-start space-x-2.5 sm:space-x-5">
<div class="avatar">
<img class="rounded-full" :src="activeChat.avatar_url" alt="avatar" />
</div>
<div class="flex flex-col items-start space-y-3.5">
<div class="mr-4 max-w-lg sm:mr-10">
<div
class="rounded-2xl rounded-tl-none bg-white p-3 text-slate-700 shadow-sm dark:bg-navy-700 dark:text-navy-100">
Hello My Dear. Lorem ipsum dolor sit amet, consectetur.
</div>
<p class="mt-1 ml-auto text-right text-xs text-slate-400 dark:text-navy-300">
08:16
</p>
</div>
</div>
</div>
<div class="flex items-start justify-end space-x-2.5 sm:space-x-5">
<div class="flex flex-col items-end space-y-3.5">
<div class="ml-4 max-w-lg md:ml-10">
<div
class="rounded-2xl rounded-tr-none bg-info/10 p-3 text-slate-700 shadow-sm dark:bg-accent dark:text-white">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Assumenda necessitatibus, ratione. Voluptatum.
</div>
</div>
<div class="ml-4 max-w-lg md:ml-10">
<div
class="rounded-2xl rounded-tr-none bg-info/10 p-3 text-slate-700 shadow-sm dark:bg-accent dark:text-white">
And that’s why a 15th century
</div>
<p class="mt-1 ml-auto text-left text-xs text-slate-400 dark:text-navy-300">
08:16
</p>
</div>
</div>
<div class="avatar">
<img class="rounded-full" src="{{ asset('images/200x200.png') }}" alt="avatar" />
</div>
</div>
<div class="flex items-start space-x-2.5 sm:space-x-5">
<div class="avatar">
<img class="rounded-full" :src="activeChat.avatar_url" alt="avatar" />
</div>
<div class="flex flex-col items-start space-y-3.5">
<div class="mr-4 max-w-lg sm:mr-10">
<div
class="rounded-2xl rounded-tl-none bg-white p-3 text-slate-700 shadow-sm dark:bg-navy-700 dark:text-navy-100">
Ei eum populo dictas, ad sed tempor minimum voluptatibus,
</div>
<p class="mt-1 ml-auto text-right text-xs text-slate-400 dark:text-navy-300">
08:16
</p>
</div>
</div>
</div>
<div class="flex items-start justify-end space-x-2.5 sm:space-x-5">
<div class="flex flex-col items-end space-y-3.5">
<div class="ml-4 max-w-lg md:ml-10">
<div
class="rounded-2xl rounded-tr-none bg-info/10 p-3 text-slate-700 shadow-sm dark:bg-accent dark:text-white">
No mei stet periculis consequat, agam nostro
</div>
</div>
<div class="ml-4 max-w-lg md:ml-10">
<div
class="rounded-2xl rounded-tr-none bg-info/10 p-3 text-slate-700 shadow-sm dark:bg-accent dark:text-white">
at has eius harum
</div>
<p class="mt-1 ml-auto text-left text-xs text-slate-400 dark:text-navy-300">
08:16
</p>
</div>
</div>
<div class="avatar">
<img class="rounded-full" src="{{ asset('images/200x200.png') }}" alt="avatar" />
</div>
</div>
<div class="mx-4 flex items-center space-x-3">
<div class="h-px flex-1 bg-slate-200 dark:bg-navy-500"></div>
<p>Today</p>
<div class="h-px flex-1 bg-slate-200 dark:bg-navy-500"></div>
</div>
<div class="flex items-start space-x-2.5 sm:space-x-5">
<div class="avatar">
<img class="rounded-full" :src="activeChat.avatar_url" alt="avatar" />
</div>
<div class="flex flex-col items-start space-y-3.5">
<div class="mr-4 max-w-lg sm:mr-10">
<div
class="rounded-2xl rounded-tl-none bg-white p-3 text-slate-700 shadow-sm dark:bg-navy-700 dark:text-navy-100">
Recusabo mandamus cum ex, ius unum nibh an, usu liber oratio
liberavisse ea.
</div>
<p class="mt-1 ml-auto text-right text-xs text-slate-400 dark:text-navy-300">
08:16
</p>
</div>
</div>
</div>
<div class="flex items-start justify-end space-x-2.5 sm:space-x-5">
<div class="flex flex-col items-end space-y-3.5">
<div class="ml-4 max-w-lg md:ml-10">
<div
class="rounded-2xl rounded-tr-none bg-info/10 p-3 text-slate-700 shadow-sm dark:bg-accent dark:text-white">
Ocurreret rationibus intellegebat eu eos,
</div>
</div>
<div class="ml-4 max-w-lg md:ml-10">
<div
class="rounded-2xl rounded-tr-none bg-info/10 p-3 text-slate-700 shadow-sm dark:bg-accent dark:text-white">
Veri dolorum cu ius. Vim id nullam putent invidunt.
</div>
<p class="mt-1 ml-auto text-left text-xs text-slate-400 dark:text-navy-300">
08:16
</p>
</div>
</div>
<div class="avatar">
<img class="rounded-full" src="{{ asset('images/200x200.png') }}" alt="avatar" />
</div>
</div>
</div>
</div>
<div
class="chat-footer relative flex h-12 w-full shrink-0 items-center justify-between border-t border-slate-150 bg-white px-[calc(var(--margin-x)-.25rem)] transition-[padding,width] duration-[.25s] dark:border-navy-600 dark:bg-navy-800">
<div class="-ml-1.5 flex flex-1 space-x-2">
<button
class="btn h-9 w-9 shrink-0 rounded-full p-0 text-slate-500 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-navy-200 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.5 w-5.5" fill="none" viewBox="0 0 24 24"
stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round"
d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" />
</svg>
</button>
<input type="text" class="form-input h-9 w-full bg-transparent placeholder:text-slate-400/70"
placeholder="Write the message" />
</div>
<div class="-mr-1.5 flex">
<button
class="btn h-9 w-9 shrink-0 rounded-full p-0 text-slate-500 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-navy-200 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.5 w-5.5" fill="none" viewBox="0 0 24 24"
stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round"
d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</button>
<button
class="btn h-9 w-9 shrink-0 rounded-full p-0 text-primary hover:bg-primary/20 focus:bg-primary/20 active:bg-primary/25 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-5.5 w-5.5" fill="none"
viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round"
d="m9.813 5.146 9.027 3.99c4.05 1.79 4.05 4.718 0 6.508l-9.027 3.99c-6.074 2.686-8.553.485-5.515-4.876l.917-1.613c.232-.41.232-1.09 0-1.5l-.917-1.623C1.26 4.66 3.749 2.46 9.813 5.146ZM6.094 12.389h7.341" />
</svg>
</button>
</div>
</div>
<template x-teleport="#x-teleport-target">
<div x-data="{
get showDrawer() { return $data.isShowChatInfo; },
set showDrawer(val) { $data.isShowChatInfo = val; },
}" x-show="showDrawer" @keydown.window.escape="showDrawer = false">
<div class="fixed inset-0 z-[100] bg-slate-900/60 transition-opacity duration-200"
@click="showDrawer = false" x-show="showDrawer && $store.breakpoints.mdAndDown"
x-transition:enter="ease-out" x-transition:enter-start="opacity-0"
x-transition:enter-end="opacity-100" x-transition:leave="ease-in"
x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"></div>
<div class="fixed right-0 top-0 z-[101] h-full w-full sm:w-80">
<div class="flex h-full w-full flex-col border-l border-slate-150 bg-white transition-transform duration-200 dark:border-navy-600 dark:bg-navy-750"
x-show="showDrawer" x-transition:enter="ease-out transform-gpu"
x-transition:enter-start="translate-x-full" x-transition:enter-end="translate-x-0"
x-transition:leave="ease-in transform-gpu" x-transition:leave-start="translate-x-0"
x-transition:leave-end="translate-x-full">
<div class="flex h-[60px] items-center justify-between p-4">
<h3 class="text-base font-medium text-slate-700 dark:text-navy-100">
Chat Info
</h3>
<div class="-mr-1.5 flex space-x-1">
<button @click="$store.global.isRightSidebarExpanded = true"
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.5 w-5.5 text-slate-500 dark:text-navy-100" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" />
</svg>
</button>
<button @click="$store.global.isDarkModeEnabled = !$store.global.isDarkModeEnabled"
class="btn h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:active:bg-navy-300/25">
<svg x-show="$store.global.isDarkModeEnabled"
x-transition:enter="transition-transform duration-200 ease-out absolute origin-top"
x-transition:enter-start="scale-75"
x-transition:enter-end="scale-100 static" class="h-6 w-6 text-amber-400"
fill="currentColor" viewBox="0 0 24 24">
<path
d="M11.75 3.412a.818.818 0 01-.07.917 6.332 6.332 0 00-1.4 3.971c0 3.564 2.98 6.494 6.706 6.494a6.86 6.86 0 002.856-.617.818.818 0 011.1 1.047C19.593 18.614 16.218 21 12.283 21 7.18 21 3 16.973 3 11.956c0-4.563 3.46-8.31 7.925-8.948a.818.818 0 01.826.404z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg"
x-show="!$store.global.isDarkModeEnabled"
x-transition:enter="transition-transform duration-200 ease-out absolute origin-top"
x-transition:enter-start="scale-75"
x-transition:enter-end="scale-100 static" class="h-6 w-6 text-amber-400"
viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd"
d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
clip-rule="evenodd" />
</svg>
</button>
<button @click="showDrawer=false"
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="M9 5l7 7-7 7" />
</svg>
</button>
</div>
</div>
<div class="mt-5 flex flex-col items-center">
<div class="avatar h-20 w-20">
<img class="rounded-full" :src="activeChat.avatar_url" alt="avatar" />
</div>
<h3 x-text="activeChat.name"
class="mt-2 text-lg font-medium text-slate-700 dark:text-navy-100"></h3>
<p>Frontend Developer</p>
<div class="mt-2 flex space-x-1.5">
<button
class="btn h-10 w-10 rounded-full p-0 text-slate-600 hover:bg-slate-300/20 hover:text-primary focus:bg-slate-300/20 focus:text-primary active:bg-slate-300/25 dark:text-navy-100 dark:hover:bg-navy-300/20 dark:hover:text-accent dark:focus:bg-navy-300/20 dark:focus:text-accent dark:active:bg-navy-300/25">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" 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-10 w-10 rounded-full p-0 text-slate-600 hover:bg-slate-300/20 hover:text-primary focus:bg-slate-300/20 focus:text-primary active:bg-slate-300/25 dark:text-navy-100 dark:hover:bg-navy-300/20 dark:hover:text-accent dark:focus:bg-navy-300/20 dark:focus:text-accent dark:active:bg-navy-300/25">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none"
viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round"
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>
</button>
<button
class="btn h-10 w-10 rounded-full p-0 text-slate-600 hover:bg-slate-300/20 hover:text-primary focus:bg-slate-300/20 focus:text-primary active:bg-slate-300/25 dark:text-navy-100 dark:hover:bg-navy-300/20 dark:hover:text-accent dark:focus:bg-navy-300/20 dark:focus:text-accent dark:active:bg-navy-300/25">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none"
viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round"
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>
</div>
</div>
<div x-data="{ activeTab: 'tabImages' }" class="tabs mt-6 flex flex-col">
<div class="is-scrollbar-hidden overflow-x-auto px-4">
<div class="tabs-list flex">
<button @click="activeTab = 'tabImages'"
:class="activeTab === 'tabImages' ?
'border-primary dark:border-accent text-primary dark:text-accent-light' :
'border-transparent hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100'"
class="btn shrink-0 rounded-none border-b-2 px-3 py-2 font-medium">
Images
</button>
<button @click="activeTab = 'tabFiles'"
:class="activeTab === 'tabFiles' ?
'border-primary dark:border-accent text-primary dark:text-accent-light' :
'border-transparent hover:text-slate-800 focus:text-slate-800 dark:hover:text-navy-100 dark:focus:text-navy-100'"
class="btn shrink-0 rounded-none border-b-2 px-3 py-2 font-medium">
Files
</button>
</div>
</div>
<div class="tab-content px-4 pt-4">
<div x-show="activeTab === 'tabImages'"
x-transition:enter="transition-all duration-500 easy-in-out"
x-transition:enter-start="opacity-0 [transform:translate3d(1rem,0,0)]"
x-transition:enter-end="opacity-100 [transform:translate3d(0,0,0)]">
<div class="grid grid-cols-4 gap-2">
<img class="aspect-square rounded-lg object-cover object-center"
src="{{ asset('images/800x600.png') }}" alt="image" />
<img class="aspect-square rounded-lg object-cover object-center"
src="{{ asset('images/800x600.png') }}" alt="image" />
<img class="aspect-square rounded-lg object-cover object-center"
src="{{ asset('images/800x600.png') }}" alt="image" />
<img class="aspect-square rounded-lg object-cover object-center"
src="{{ asset('images/800x600.png') }}" alt="image" />
<img class="aspect-square rounded-lg object-cover object-center"
src="{{ asset('images/800x600.png') }}" alt="image" />
<img class="aspect-square rounded-lg object-cover object-center"
src="{{ asset('images/800x600.png') }}" alt="image" />
<img class="aspect-square rounded-lg object-cover object-center"
src="{{ asset('images/800x600.png') }}" alt="image" />
<img class="aspect-square rounded-lg object-cover object-center"
src="{{ asset('images/800x600.png') }}" alt="image" />
<img class="aspect-square rounded-lg object-cover object-center"
src="{{ asset('images/800x600.png') }}" alt="image" />
<img class="aspect-square rounded-lg object-cover object-center"
src="{{ asset('images/800x600.png') }}" alt="image" />
<img class="aspect-square rounded-lg object-cover object-center"
src="{{ asset('images/800x600.png') }}" alt="image" />
<img class="aspect-square rounded-lg object-cover object-center"
src="{{ asset('images/800x600.png') }}" alt="image" />
</div>
</div>
<div x-show="activeTab === 'tabFiles'"
x-transition:enter="transition-all duration-500 easy-in-out"
x-transition:enter-start="opacity-0 [transform:translate3d(1rem,0,0)]"
x-transition:enter-end="opacity-100 [transform:translate3d(0,0,0)]">
<div class="flex flex-col space-y-3.5">
<div class="flex items-center space-x-3">
<div
class="mask is-squircle flex h-11 w-11 items-center justify-center bg-secondary text-white">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6"
fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
stroke-width="2"
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>
<div>
<p class="font-medium text-slate-700 dark:text-navy-100">
Slow Music
</p>
<div class="flex text-xs text-slate-400 dark:text-navy-300">
<span>03:12</span>
<div class="mx-2 my-1 w-px bg-slate-200 dark:bg-navy-500"></div>
<span>8.32 MB</span>
</div>
</div>
</div>
<div class="flex items-center space-x-3">
<div
class="mask is-squircle flex h-11 w-11 items-center justify-center bg-info text-white">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6"
fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
stroke-width="2"
d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 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>
<div>
<p class="font-medium text-slate-700 dark:text-navy-100">
Final.fig
</p>
<div class="flex text-xs text-slate-400 dark:text-navy-300">
<span>45 MB</span>
</div>
</div>
</div>
<div class="flex items-center space-x-3">
<div
class="mask is-squircle flex h-11 w-11 items-center justify-center bg-warning text-white">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6"
fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
stroke-width="2"
d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 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>
<div>
<p class="font-medium text-slate-700 dark:text-navy-100">
Report.docx
</p>
<div class="flex text-xs text-slate-400 dark:text-navy-300">
<span>3.5 MB</span>
</div>
</div>
</div>
<div class="flex items-center space-x-3">
<div
class="mask is-squircle flex h-11 w-11 items-center justify-center bg-success text-white">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6"
fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
stroke-width="2"
d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 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>
<div>
<p class="font-medium text-slate-700 dark:text-navy-100">
TheBook.pdf
</p>
<div class="flex text-xs text-slate-400 dark:text-navy-300">
<span>14 MB</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
</main>
</x-base-layout>
resources/views/pages/apps-filemanager.blade.php deleted 100644 → 0
View file @ 5bad2db9
<x-base-layout title="File Manager" is-sidebar-open="true" is-header-blur="true" has-min-sidebar="true">
<!-- Sidebar -->
<div class="sidebar print:hidden">
<!-- Main Sidebar -->
<x-app-partials.main-sidebar></x-app-partials.main-sidebar>
<!-- Sidebar Panel -->
<div class="sidebar-panel">
<div class="flex h-full grow flex-col bg-white pl-[var(--main-sidebar-width)] dark:bg-navy-750">
<!-- Sidebar Panel Header -->
<div class="flex h-18 w-full items-center justify-between pl-4 pr-1">
<div class="flex items-center">
<div class="avatar mr-3 hidden h-9 w-9 lg:flex">
<div
class="is-initial rounded-full bg-primary/10 text-primary dark:bg-accent-light/10 dark: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" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z" />
</svg>
</div>
</div>
<p class="text-lg font-medium tracking-wider text-slate-800 line-clamp-1 dark:text-navy-100">
My Cloud
</p>
</div>
<button @click="$store.global.isSidebarExpanded = false"
class="btn h-7 w-7 rounded-full p-0 text-primary hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-accent-light/80 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25 xl:hidden">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
</svg>
</button>
</div>
<!-- Sidebar Panel Body -->
<div class="flex h-[calc(100%-4.5rem)] grow flex-col">
<div class="is-scrollbar-hidden grow overflow-y-auto">
<div class="mt-2 px-4">
<button
class="btn w-full space-x-2 rounded-full border border-slate-200 py-2 font-medium text-slate-800 hover:bg-slate-150 focus:bg-slate-150 active:bg-slate-150/80 dark:border-navy-500 dark:text-navy-50 dark:hover:bg-navy-500 dark:focus:bg-navy-500 dark:active:bg-navy-500/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" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" />
</svg>
<span> Create New </span>
</button>
</div>
<div x-data="{ expanded: true }">
<div class="mt-4 flex items-center justify-between px-4">
<span class="text-xs font-medium uppercase">MY FILES </span>
<div class="-mr-1.5 flex">
<button
class="btn h-6 w-6 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-3.5 w-3.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>
<button @click="expanded =! expanded"
class="btn h-6 w-6 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-3.5 w-3.5"
:class="expanded && 'rotate-180'" fill="none" viewBox="0 0 24 24"
stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M19 9l-7 7-7-7" />
</svg>
</button>
</div>
</div>
<div x-show="expanded" x-collapse>
<ul class="mt-1 space-y-1 px-2 font-inter text-xs+ font-medium">
<li x-data="{ expanded: false }">
<div tabindex="0"
class="flex cursor-pointer items-center rounded px-2 py-1 tracking-wide text-slate-800 outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:text-navy-100 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">
<button @click="expanded = !expanded"
class="btn mr-1 h-5 w-5 rounded-lg 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 transition-transform"
:class="expanded && 'rotate-90'" viewBox="0 0 20 20"
fill="currentColor">
<path fill-rule="evenodd"
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
clip-rule="evenodd" />
</svg>
</button>
<svg xmlns="http://www.w3.org/2000/svg" class="mr-3 h-6 w-6 text-warning"
viewBox="0 0 20 20" fill="currentColor">
<path
d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" />
</svg>
<span>Design</span>
</div>
<ul x-show="expanded" x-collapse class="pl-4">
<li>
<div tabindex="0"
class="flex cursor-pointer items-center rounded px-2 py-1 tracking-wide text-slate-800 outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:text-navy-100 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">
<div class="mr-1 flex h-5 w-5 items-center justify-center"></div>
<svg xmlns="http://www.w3.org/2000/svg"
class="mr-3 h-6 w-6 text-warning" viewBox="0 0 20 20"
fill="currentColor">
<path
d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" />
</svg>
<span>Web Apps</span>
</div>
</li>
<li x-data="{ expanded: false }">
<div tabindex="0"
class="flex cursor-pointer items-center rounded px-2 py-1 tracking-wide text-slate-800 outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:text-navy-100 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">
<button @click="expanded = !expanded"
class="btn mr-1 h-5 w-5 rounded-lg 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 transition-transform"
:class="expanded && 'rotate-90'" viewBox="0 0 20 20"
fill="currentColor">
<path fill-rule="evenodd"
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
clip-rule="evenodd" />
</svg>
</button>
<svg xmlns="http://www.w3.org/2000/svg"
class="mr-3 h-6 w-6 text-warning" viewBox="0 0 20 20"
fill="currentColor">
<path
d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" />
</svg>
<span>CRM Apps</span>
</div>
<ul x-show="expanded" x-collapse class="pl-4">
<li>
<div tabindex="0"
class="flex cursor-pointer items-center rounded px-2 py-1 tracking-wide text-slate-800 outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:text-navy-100 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">
<div class="mr-1 flex h-5 w-5 items-center justify-center">
</div>
<svg xmlns="http://www.w3.org/2000/svg"
class="mr-3 h-6 w-6 text-warning" viewBox="0 0 20 20"
fill="currentColor">
<path
d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" />
</svg>
<span>LMS App</span>
</div>
</li>
<li>
<div tabindex="0"
class="flex cursor-pointer items-center rounded px-2 py-1 tracking-wide text-slate-800 outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:text-navy-100 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">
<div class="mr-1 flex h-5 w-5 items-center justify-center">
</div>
<svg xmlns="http://www.w3.org/2000/svg"
class="mr-3 h-6 w-6 text-warning" viewBox="0 0 20 20"
fill="currentColor">
<path
d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" />
</svg>
<span>Ecommerce</span>
</div>
</li>
<li>
<div tabindex="0"
class="flex cursor-pointer items-center rounded px-2 py-1 tracking-wide text-slate-800 outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:text-navy-100 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">
<div class="mr-1 flex h-5 w-5 items-center justify-center">
</div>
<svg xmlns="http://www.w3.org/2000/svg"
class="mr-3 h-6 w-6 text-warning" viewBox="0 0 20 20"
fill="currentColor">
<path
d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" />
</svg>
<span>Dashboard</span>
</div>
</li>
</ul>
</li>
<li>
<div tabindex="0"
class="flex cursor-pointer items-center rounded px-2 py-1 tracking-wide text-slate-800 outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:text-navy-100 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">
<div class="mr-1 flex h-5 w-5 items-center justify-center"></div>
<svg xmlns="http://www.w3.org/2000/svg"
class="mr-3 h-6 w-6 text-warning" viewBox="0 0 20 20"
fill="currentColor">
<path
d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" />
</svg>
<span>Desktop Apps</span>
</div>
</li>
<li>
<div tabindex="0"
class="flex cursor-pointer items-center rounded px-2 py-1 tracking-wide text-slate-800 outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:text-navy-100 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">
<div class="mr-1 flex h-5 w-5 items-center justify-center"></div>
<svg xmlns="http://www.w3.org/2000/svg"
class="mr-3 h-6 w-6 text-warning" viewBox="0 0 20 20"
fill="currentColor">
<path
d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" />
</svg>
<span>Mobile Apps</span>
</div>
</li>
</ul>
</li>
<li>
<div tabindex="0"
class="flex cursor-pointer items-center rounded px-2 py-1 tracking-wide text-slate-800 outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:text-navy-100 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">
<div class="mr-1 flex h-5 w-5 items-center justify-center"></div>
<svg xmlns="http://www.w3.org/2000/svg" class="mr-3 h-6 w-6 text-warning"
viewBox="0 0 20 20" fill="currentColor">
<path
d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" />
</svg>
<span>Backup Files</span>
</div>
</li>
<li x-data="{ expanded: false }">
<div tabindex="0"
class="flex cursor-pointer items-center rounded px-2 py-1 tracking-wide text-slate-800 outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:text-navy-100 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">
<button @click="expanded = !expanded"
class="btn mr-1 h-5 w-5 rounded-lg 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 transition-transform"
:class="expanded && 'rotate-90'" viewBox="0 0 20 20"
fill="currentColor">
<path fill-rule="evenodd"
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
clip-rule="evenodd" />
</svg>
</button>
<svg xmlns="http://www.w3.org/2000/svg" class="mr-3 h-6 w-6 text-warning"
viewBox="0 0 20 20" fill="currentColor">
<path
d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" />
</svg>
<span>Documents</span>
</div>
<ul x-show="expanded" x-collapse class="pl-4">
<li>
<div tabindex="0"
class="flex cursor-pointer items-center rounded px-2 py-1 tracking-wide text-slate-800 outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:text-navy-100 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">
<div class="mr-1 flex h-5 w-5 items-center justify-center"></div>
<svg xmlns="http://www.w3.org/2000/svg"
class="mr-3 h-6 w-6 text-warning" viewBox="0 0 20 20"
fill="currentColor">
<path
d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" />
</svg>
<span>Sheets</span>
</div>
</li>
<li>
<div tabindex="0"
class="flex cursor-pointer items-center rounded px-2 py-1 tracking-wide text-slate-800 outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:text-navy-100 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">
<div class="mr-1 flex h-5 w-5 items-center justify-center"></div>
<svg xmlns="http://www.w3.org/2000/svg"
class="mr-3 h-6 w-6 text-warning" viewBox="0 0 20 20"
fill="currentColor">
<path
d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" />
</svg>
<span>Slides</span>
</div>
</li>
<li>
<div tabindex="0"
class="flex cursor-pointer items-center rounded px-2 py-1 tracking-wide text-slate-800 outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:text-navy-100 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">
<div class="mr-1 flex h-5 w-5 items-center justify-center"></div>
<svg xmlns="http://www.w3.org/2000/svg"
class="mr-3 h-6 w-6 text-warning" viewBox="0 0 20 20"
fill="currentColor">
<path
d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" />
</svg>
<span>Words</span>
</div>
</li>
</ul>
</li>
<li x-data="{ expanded: false }">
<div tabindex="0"
class="flex cursor-pointer items-center rounded px-2 py-1 tracking-wide text-slate-800 outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:text-navy-100 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">
<button @click="expanded = !expanded"
class="btn mr-1 h-5 w-5 rounded-lg 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 transition-transform"
:class="expanded && 'rotate-90'" viewBox="0 0 20 20"
fill="currentColor">
<path fill-rule="evenodd"
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
clip-rule="evenodd" />
</svg>
</button>
<svg xmlns="http://www.w3.org/2000/svg" class="mr-3 h-6 w-6 text-warning"
viewBox="0 0 20 20" fill="currentColor">
<path
d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" />
</svg>
<span>Application</span>
</div>
<ul x-show="expanded" x-collapse class="pl-4">
<li>
<div tabindex="0"
class="flex cursor-pointer items-center rounded px-2 py-1 tracking-wide text-slate-800 outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:text-navy-100 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">
<div class="mr-1 flex h-5 w-5 items-center justify-center"></div>
<svg xmlns="http://www.w3.org/2000/svg"
class="mr-3 h-6 w-6 text-warning" viewBox="0 0 20 20"
fill="currentColor">
<path
d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" />
</svg>
<span>Web Apps</span>
</div>
</li>
<li x-data="{ expanded: false }">
<div tabindex="0"
class="flex cursor-pointer items-center rounded px-2 py-1 tracking-wide text-slate-800 outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:text-navy-100 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">
<button @click="expanded = !expanded"
class="btn mr-1 h-5 w-5 rounded-lg 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 transition-transform"
:class="expanded && 'rotate-90'" viewBox="0 0 20 20"
fill="currentColor">
<path fill-rule="evenodd"
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
clip-rule="evenodd" />
</svg>
</button>
<svg xmlns="http://www.w3.org/2000/svg"
class="mr-3 h-6 w-6 text-warning" viewBox="0 0 20 20"
fill="currentColor">
<path
d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" />
</svg>
<span>CRM Apps</span>
</div>
<ul x-show="expanded" x-collapse class="pl-4">
<li>
<div tabindex="0"
class="flex cursor-pointer items-center rounded px-2 py-1 tracking-wide text-slate-800 outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:text-navy-100 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">
<div class="mr-1 flex h-5 w-5 items-center justify-center">
</div>
<svg xmlns="http://www.w3.org/2000/svg"
class="mr-3 h-6 w-6 text-warning" viewBox="0 0 20 20"
fill="currentColor">
<path
d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" />
</svg>
<span>LMS App</span>
</div>
</li>
<li>
<div tabindex="0"
class="flex cursor-pointer items-center rounded px-2 py-1 tracking-wide text-slate-800 outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:text-navy-100 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">
<div class="mr-1 flex h-5 w-5 items-center justify-center">
</div>
<svg xmlns="http://www.w3.org/2000/svg"
class="mr-3 h-6 w-6 text-warning" viewBox="0 0 20 20"
fill="currentColor">
<path
d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" />
</svg>
<span>Ecommerce</span>
</div>
</li>
<li>
<div tabindex="0"
class="flex cursor-pointer items-center rounded px-2 py-1 tracking-wide text-slate-800 outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:text-navy-100 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">
<div class="mr-1 flex h-5 w-5 items-center justify-center">
</div>
<svg xmlns="http://www.w3.org/2000/svg"
class="mr-3 h-6 w-6 text-warning" viewBox="0 0 20 20"
fill="currentColor">
<path
d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" />
</svg>
<span>Dashboard</span>
</div>
</li>
</ul>
</li>
<li>
<div tabindex="0"
class="flex cursor-pointer items-center rounded px-2 py-1 tracking-wide text-slate-800 outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:text-navy-100 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">
<div class="mr-1 flex h-5 w-5 items-center justify-center"></div>
<svg xmlns="http://www.w3.org/2000/svg"
class="mr-3 h-6 w-6 text-warning" viewBox="0 0 20 20"
fill="currentColor">
<path
d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" />
</svg>
<span>Desktop Apps</span>
</div>
</li>
<li>
<div tabindex="0"
class="flex cursor-pointer items-center rounded px-2 py-1 tracking-wide text-slate-800 outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:text-navy-100 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">
<div class="mr-1 flex h-5 w-5 items-center justify-center"></div>
<svg xmlns="http://www.w3.org/2000/svg"
class="mr-3 h-6 w-6 text-warning" viewBox="0 0 20 20"
fill="currentColor">
<path
d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" />
</svg>
<span>Mobile Apps</span>
</div>
</li>
</ul>
</li>
<li>
<div tabindex="0"
class="flex cursor-pointer items-center rounded px-2 py-1 tracking-wide text-slate-800 outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:text-navy-100 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100">
<div class="mr-1 flex h-5 w-5 items-center justify-center"></div>
<svg xmlns="http://www.w3.org/2000/svg" class="mr-3 h-6 w-6 text-warning"
fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
stroke-width="1.5"
d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />
</svg>
<span>Archives</span>
</div>
</li>
</ul>
</div>
</div>
<div class="my-3 mx-4 h-px bg-slate-200 dark:bg-navy-500"></div>
<ul class="space-y-1.5 px-2 font-inter text-xs+ font-medium">
<li>
<a class="group flex space-x-2 rounded-lg p-2 tracking-wide text-slate-800 outline-none transition-all hover:bg-slate-100 focus:bg-slate-100 dark:text-navy-100 dark:hover:bg-navy-600 dark:focus:bg-navy-600"
href="#">
<svg xmlns="http://www.w3.org/2000/svg"
class="h-4.5 w-4.5 text-slate-400 transition-colors group-hover:text-slate-500 group-focus:text-slate-500 dark:text-navy-300 dark:group-hover:text-navy-200 dark:group-focus:text-navy-200"
fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z" />
</svg>
<span class="text-slate-800 dark:text-navy-100">Shared Folders</span>
</a>
</li>
<li>
<a class="group flex space-x-2 rounded-lg p-2 tracking-wide text-slate-800 outline-none transition-all hover:bg-slate-100 focus:bg-slate-100 dark:text-navy-100 dark:hover:bg-navy-600 dark:focus:bg-navy-600"
href="#">
<svg xmlns="http://www.w3.org/2000/svg"
class="h-4.5 w-4.5 text-slate-400 transition-colors group-hover:text-slate-500 group-focus:text-slate-500 dark:text-navy-300 dark:group-hover:text-navy-200 dark:group-focus:text-navy-200"
fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
</svg>
<span class="text-slate-800 dark:text-navy-100">Important</span>
</a>
</li>
<li>
<a class="group flex space-x-2 rounded-lg p-2 tracking-wide text-slate-800 outline-none transition-all hover:bg-slate-100 focus:bg-slate-100 dark:text-navy-100 dark:hover:bg-navy-600 dark:focus:bg-navy-600"
href="#">
<svg xmlns="http://www.w3.org/2000/svg"
class="h-4.5 w-4.5 text-slate-400 transition-colors group-hover:text-slate-500 group-focus:text-slate-500 dark:text-navy-300 dark:group-hover:text-navy-200 dark:group-focus:text-navy-200"
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>
<span class="text-slate-800 dark:text-navy-100">Recent</span>
</a>
</li>
<li>
<a class="group flex space-x-2 rounded-lg p-2 tracking-wide text-slate-800 outline-none transition-all hover:bg-slate-100 focus:bg-slate-100 dark:text-navy-100 dark:hover:bg-navy-600 dark:focus:bg-navy-600"
href="#">
<svg xmlns="http://www.w3.org/2000/svg"
class="h-4.5 w-4.5 text-slate-400 transition-colors group-hover:text-slate-500 group-focus:text-slate-500 dark:text-navy-300 dark:group-hover:text-navy-200 dark:group-focus:text-navy-200"
fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
d="M7 20l4-16m2 16l4-16M6 9h14M4 15h14" />
</svg>
<span class="text-slate-800 dark:text-navy-100">Tags</span>
</a>
</li>
<li>
<a class="group flex space-x-2 rounded-lg p-2 tracking-wide text-error outline-none transition-all hover:bg-error/20 focus:bg-error/20"
href="#">
<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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
</svg>
<span>Trash</span>
</a>
</li>
</ul>
</div>
<div class="flex flex-col p-4">
<div class="flex items-center justify-between">
<p>
<span class="font-medium text-slate-600 dark:text-navy-100">35GB</span>
of 1TB
</p>
<a href="#"
class="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">Upgrade</a>
</div>
<div class="progress mt-2 h-2 bg-slate-150 dark:bg-navy-500">
<div class="w-7/12 rounded-full bg-info"></div>
</div>
</div>
</div>
</div>
</div>
<!-- Minimized Sidebar Panel -->
<div class="sidebar-panel-min">
<div class="flex h-full flex-col items-center bg-white dark:bg-navy-750">
<div class="flex h-18 shrink-0 items-center justify-center">
<div
class="avatar flex h-10 w-10 rounded-full bg-primary/10 text-primary dark:bg-accent-light/10 dark:text-accent-light">
<div class="is-initial">
<svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor"
xmlns="http://www.w3.org/2000/svg" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z" />
</svg>
</div>
</div>
</div>
<div class="flex h-[calc(100%-4.5rem)] grow flex-col">
<div class="is-scrollbar-hidden flex grow flex-col overflow-y-auto">
<ul class="mt-4 space-y-1">
<li>
<a href="#"
class="btn h-10 w-10 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.5 w-5.5" fill="none"
viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
d="M12 4v16m8-8H4" />
</svg>
</a>
</li>
<li>
<a href="#"
class="btn h-10 w-10 p-0 text-warning hover:bg-warning/20 focus:bg-warning/20 active:bg-warning/25">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5.5 w-5.5" fill="none"
viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />
</svg>
</a>
</li>
</ul>
<div class="my-4 h-px bg-slate-200 dark:bg-navy-500"></div>
<ul class="space-y-1">
<li>
<a href="#"
class="btn h-10 w-10 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.5 w-5.5" fill="none"
viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round"
d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z" />
</svg>
</a>
</li>
<li>
<a href="#"
class="btn h-10 w-10 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.5 w-5.5" fill="none"
viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round"
d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
</svg>
</a>
</li>
<li>
<a href="#"
class="btn h-10 w-10 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.5 w-5.5" fill="none"
viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round"
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</a>
</li>
<li>
<a href="#"
class="btn h-10 w-10 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.5 w-5.5" fill="none"
viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round"
d="M7 20l4-16m2 16l4-16M6 9h14M4 15h14" />
</svg>
</a>
</li>
<li>
<a href="#"
class="btn h-10 w-10 p-0 text-error hover:bg-error/20 focus:bg-error/20 active:bg-error/25">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5.5 w-5.5" fill="none"
viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
</svg>
</a>
</li>
</ul>
</div>
<div class="py-3">
<div x-data="usePopper({ placement: 'right-start', offset: 4 })" @click.outside="if(isShowPopper) isShowPopper = false"
class="inline-flex">
<button x-ref="popperRef" @click="isShowPopper = !isShowPopper"
class="btn h-10 w-10 rounded-full border border-slate-200 p-0 font-medium hover:bg-slate-150 focus:bg-slate-150 active:bg-slate-150/80 dark:border-navy-500 dark:hover:bg-navy-500 dark:focus:bg-navy-500 dark:active:bg-navy-500/90">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" 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>
<template x-teleport="#x-teleport-target">
<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>
</template>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- App Header -->
<x-app-partials.header></x-app-partials.header>
<!-- Mobile Searchbar -->
<x-app-partials.mobile-searchbar></x-app-partials.mobile-searchbar>
<!-- Right Sidebar -->
<x-app-partials.right-sidebar></x-app-partials.right-sidebar>
<!-- Main Content Wrapper -->
<main class="main-content filemanager-app w-full pb-6">
<div
class="flex items-center justify-between space-x-2 px-[var(--margin-x)] pb-4 pt-5 transition-all duration-[.25s]">
<div class="flex items-center space-x-1">
<h3 class="text-lg font-medium text-slate-700 line-clamp-1 dark:text-navy-50">
Home
</h3>
<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">
<i class="fas fa-chevron-down"></i>
</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 space-x-3 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">
<svg xmlns="http://www.w3.org/2000/svg" class="mt-px 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="M9 13h6m-3-3v6m-9 1V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z" />
</svg>
<span> New Folder</span></a>
</li>
<li>
<a href="#"
class="flex h-8 items-center space-x-3 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">
<svg xmlns="http://www.w3.org/2000/svg" class="mt-px 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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
</svg>
<span>Upload Folder</span></a>
</li>
<li>
<a href="#"
class="flex h-8 items-center space-x-3 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">
<svg xmlns="http://www.w3.org/2000/svg" class="mt-px 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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
</svg>
<span>Download Folder</span></a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="flex">
<button @click="$dispatch('show-drawer', { drawerId: 'filemanager-activity-drawer' })"
class="btn h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 active:bg-slate-300/25 dark:hover: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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</button>
<a href="{{ route('layouts/help-1') }}"
class="btn h-8 w-8 rounded-full p-0 text-slate-500 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:text-navy-200 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" stroke-width="1.5"
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>
</a>
</div>
</div>
<div class="flex flex-col" x-data="{ activeTab: 'tab-recent' }">
<div class="flex space-x-2 px-[var(--margin-x)] transition-all duration-[.25s]">
<button @click="activeTab = 'tab-recent'" class="btn h-8 rounded-full text-xs+ font-medium"
:class="activeTab === 'tab-recent' ? 'bg-slate-150 text-slate-800 dark:bg-navy-600 dark:text-navy-50' :
'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'">
Recent
</button>
<button @click="activeTab = 'tab-pinned'" class="btn h-8 rounded-full text-xs+ font-medium"
:class="activeTab === 'tab-pinned' ? 'bg-slate-150 text-slate-800 dark:bg-navy-600 dark:text-navy-50' :
'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'">
Pinned
</button>
</div>
<div>
<div x-show="activeTab === 'tab-recent'" x-transition:enter="transition-all duration-500 easy-in-out"
x-transition:enter-start="opacity-0 [transform:translate3d(1rem,0,0)]"
x-transition:enter-end="opacity-100 [transform:translate3d(0,0,0)]" x-init="$nextTick(() => new Swiper($el, { slidesPerView: 'auto', spaceBetween: 20 }))"
class="swiper px-[var(--margin-x)] pt-4 transition-all duration-[.25s]">
<div class="swiper-wrapper">
<div class="card swiper-slide w-56 shrink-0 p-3 pt-4">
<div class="flex items-center justify-between">
<img class="w-14" src="{{ asset('images/folders/folder-primary.svg') }}"
alt="folder" />
<button
class="btn -mr-2 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="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>
<div class="pt-5 text-base font-medium tracking-wide text-primary dark:text-accent-light">
Dribble Shots
</div>
<div class="mt-1.5 flex items-center justify-between">
<p class="text-salte-400 text-xs+ dark:text-navy-300">
22 files
</p>
<p class="font-medium text-slate-600 dark:text-navy-100">
455 MB
</p>
</div>
</div>
<div class="card swiper-slide w-56 shrink-0 p-3 pt-4">
<div class="flex items-center justify-between">
<img class="w-14" src="{{ asset('images/folders/folder-warning.svg') }}"
alt="folder" />
<button
class="btn -mr-2 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="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>
<div class="pt-5 text-base font-medium tracking-wide text-warning">
Design
</div>
<div class="mt-1.5 flex items-center justify-between">
<p class="text-salte-400 text-xs+ dark:text-navy-300">
135 files
</p>
<p class="font-medium text-slate-600 dark:text-navy-100">
3.5 GB
</p>
</div>
</div>
<div class="card swiper-slide w-56 shrink-0 p-3 pt-4">
<div class="flex items-center justify-between">
<img class="w-14" src="{{ asset('images/folders/folder-info.svg') }}"
alt="folder" />
<button
class="btn -mr-2 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="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>
<div class="pt-5 text-base font-medium tracking-wide text-info">
My Portfolio
</div>
<div class="mt-1.5 flex items-center justify-between">
<p class="text-salte-400 text-xs+ dark:text-navy-300">
14 files
</p>
<p class="font-medium text-slate-600 dark:text-navy-100">
984 MB
</p>
</div>
</div>
<div class="card swiper-slide w-56 shrink-0 p-3 pt-4">
<div class="flex items-center justify-between">
<img class="w-14" src="{{ asset('images/folders/folder-secondary.svg') }}"
alt="folder" />
<button
class="btn -mr-2 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="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>
<div
class="pt-5 text-base font-medium tracking-wide text-secondary dark:text-secondary-light">
Behance Files
</div>
<div class="mt-1.5 flex items-center justify-between">
<p class="text-salte-400 text-xs+ dark:text-navy-300">
14 files
</p>
<p class="font-medium text-slate-600 dark:text-navy-100">
984 MB
</p>
</div>
</div>
<div class="card swiper-slide w-56 shrink-0 p-3 pt-4">
<div class="flex items-center justify-between">
<img class="w-14" src="{{ asset('images/folders/folder-success.svg') }}"
alt="folder" />
<button
class="btn -mr-2 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="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>
<div class="pt-5 text-base font-medium tracking-wide text-success">
Backup Files
</div>
<div class="mt-1.5 flex items-center justify-between">
<p class="text-salte-400 text-xs+ dark:text-navy-300">
65 files
</p>
<p class="font-medium text-slate-600 dark:text-navy-100">
12 GB
</p>
</div>
</div>
<div class="card swiper-slide w-56 shrink-0 p-3 pt-4">
<div class="flex items-center justify-between">
<img class="w-14" src="{{ asset('images/folders/folder-error.svg') }}"
alt="folder" />
<button
class="btn -mr-2 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="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>
<div class="pt-5 text-base font-medium tracking-wide text-error">
Vue Apps
</div>
<div class="mt-1.5 flex items-center justify-between">
<p class="text-salte-400 text-xs+ dark:text-navy-300">
34 files
</p>
<p class="font-medium text-slate-600 dark:text-navy-100">
146 MB
</p>
</div>
</div>
</div>
</div>
<div x-show="activeTab === 'tab-pinned'" x-transition:enter="transition-all duration-500 easy-in-out"
x-transition:enter-start="opacity-0 [transform:translate3d(1rem,0,0)]"
x-transition:enter-end="opacity-100 [transform:translate3d(0,0,0)]" x-init="$nextTick(() => new Swiper($el, { slidesPerView: 'auto', spaceBetween: 20 }))"
class="swiper px-[var(--margin-x)] pt-4 transition-all duration-[.25s]">
<div class="swiper-wrapper">
<div class="card swiper-slide w-56 shrink-0 p-3 pt-4">
<div class="flex items-center justify-between">
<img class="w-14" src="{{ asset('images/folders/folder-error.svg') }}"
alt="folder" />
<button
class="btn -mr-2 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="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>
<div class="pt-5 text-base font-medium tracking-wide text-error">
Vue Apps
</div>
<div class="mt-1.5 flex items-center justify-between">
<p class="text-salte-400 text-xs+ dark:text-navy-300">
34 files
</p>
<p class="font-medium text-slate-600 dark:text-navy-100">
146 MB
</p>
</div>
</div>
<div class="card swiper-slide w-56 shrink-0 p-3 pt-4">
<div class="flex items-center justify-between">
<img class="w-14" src="{{ asset('images/folders/folder-warning.svg') }}"
alt="folder" />
<button
class="btn -mr-2 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="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>
<div class="pt-5 text-base font-medium tracking-wide text-warning">
Design
</div>
<div class="mt-1.5 flex items-center justify-between">
<p class="text-salte-400 text-xs+ dark:text-navy-300">
135 files
</p>
<p class="font-medium text-slate-600 dark:text-navy-100">
3.5 GB
</p>
</div>
</div>
<div class="card swiper-slide w-56 shrink-0 p-3 pt-4">
<div class="flex items-center justify-between">
<img class="w-14" src="{{ asset('images/folders/folder-primary.svg') }}"
alt="folder" />
<button
class="btn -mr-2 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="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>
<div class="pt-5 text-base font-medium tracking-wide text-primary dark:text-accent-light">
Dribble Shots
</div>
<div class="mt-1.5 flex items-center justify-between">
<p class="text-salte-400 text-xs+ dark:text-navy-300">
22 files
</p>
<p class="font-medium text-slate-600 dark:text-navy-100">
455 MB
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<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:gap-6">
<div class="col-span-12 lg:col-span-8">
<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">
Folders
</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">
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">
Last edit
</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 bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5">
Members
</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">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-yellow-500"
viewBox="0 0 20 20" fill="currentColor">
<path
d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" />
</svg>
<span class="font-medium text-slate-700 dark:text-navy-100">Designs</span>
</div>
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
2 day ago
</td>
<td class="whitespace-nowrap px-4 py-3 text-slate-700 dark:text-navy-100 sm:px-5">
14.3GB
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<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>
</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">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-yellow-500"
viewBox="0 0 20 20" fill="currentColor">
<path
d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" />
</svg>
<span class="font-medium text-slate-700 dark:text-navy-100">Movies</span>
</div>
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
a month ago
</td>
<td class="whitespace-nowrap px-4 py-3 text-slate-700 dark:text-navy-100 sm:px-5">
31 GB
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<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">
sm
</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>
</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">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-secondary"
viewBox="0 0 20 20" fill="currentColor">
<path
d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" />
</svg>
<span class="font-medium text-slate-700 dark:text-navy-100">Media</span>
</div>
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
2 hour ago
</td>
<td class="whitespace-nowrap px-4 py-3 text-slate-700 dark:text-navy-100 sm:px-5">
17.2 GB
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<div class="flex -space-x-2">
<div class="avatar h-7 w-7 hover:z-10">
<div
class="is-initial rounded-full bg-success text-xs+ uppercase text-white ring ring-white dark:ring-navy-700">
uh
</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>
</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">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-yellow-500"
viewBox="0 0 20 20" fill="currentColor">
<path
d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" />
</svg>
<span class="font-medium text-slate-700 dark:text-navy-100">Web
Applications
</span>
</div>
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
42 minute ago
</td>
<td class="whitespace-nowrap px-4 py-3 text-slate-700 dark:text-navy-100 sm:px-5">
12.4 GB
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<div class="flex -space-x-2">
<div class="avatar h-7 w-7 hover:z-10">
<div
class="is-initial rounded-full bg-error text-xs+ uppercase text-white ring ring-white dark:ring-navy-700">
nd
</div>
</div>
</div>
</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">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-yellow-500"
viewBox="0 0 20 20" fill="currentColor">
<path
d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" />
</svg>
<span class="font-medium text-slate-700 dark:text-navy-100">Designs
</span>
</div>
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
2 day ago
</td>
<td class="whitespace-nowrap px-4 py-3 text-slate-700 dark:text-navy-100 sm:px-5">
4.33 GB
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<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">
<img class="rounded-full ring ring-white dark:ring-navy-700"
src="{{ asset('images/200x200.png') }}" alt="avatar" />
</div>
</div>
</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">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-yellow-500"
viewBox="0 0 20 20" fill="currentColor">
<path
d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" />
</svg>
<span class="font-medium text-slate-700 dark:text-navy-100">Archives
</span>
</div>
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
12 days ago
</td>
<td class="whitespace-nowrap px-4 py-3 text-slate-700 dark:text-navy-100 sm:px-5">
1.2 TB
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<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">
<img class="rounded-full ring ring-white dark:ring-navy-700"
src="{{ asset('images/200x200.png') }}" alt="avatar" />
</div>
</div>
</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">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-yellow-500"
viewBox="0 0 20 20" fill="currentColor">
<path
d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" />
</svg>
<span class="font-medium text-slate-700 dark:text-navy-100">Movies</span>
</div>
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
a month ago
</td>
<td class="whitespace-nowrap px-4 py-3 text-slate-700 dark:text-navy-100 sm:px-5">
31 GB
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<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">
sm
</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>
</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">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-yellow-500"
viewBox="0 0 20 20" fill="currentColor">
<path
d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" />
</svg>
<span class="font-medium text-slate-700 dark:text-navy-100">Documents
</span>
</div>
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
a day ago
</td>
<td class="whitespace-nowrap px-4 py-3 text-slate-700 dark:text-navy-100 sm:px-5">
602 MB
</td>
<td class="whitespace-nowrap px-4 py-3 sm:px-5">
<div class="flex -space-x-2">
<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">
gh
</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>
</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 class="col-span-12 lg:col-span-4">
<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">
Tags
</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-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="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="card mt-3 space-y-3.5 p-4 text-xs+">
<div class="group flex items-center justify-between">
<div class="flex space-x-3">
<div
class="flex h-10 w-10 items-center justify-center rounded-full bg-primary text-white dark:bg-accent">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5.5 w-5.5" viewBox="0 0 20 20"
fill="currentColor">
<path fill-rule="evenodd"
d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-8 3 6 2-4 3 6z"
clip-rule="evenodd" />
</svg>
</div>
<div>
<a href="#" class="text-slate-600 dark:text-navy-100">#Image</a>
<div class="mt-1 flex text-xs text-slate-400 dark:text-navy-300">
<p>654 Files</p>
<div class="mx-2 my-1 w-px bg-slate-200 dark:bg-navy-500"></div>
<p>1.5 GB</p>
</div>
</div>
</div>
<button
class="btn -mr-2 h-8 w-8 rounded-full p-0 opacity-0 hover:bg-slate-300/20 focus:bg-slate-300/20 focus:opacity-100 active:bg-slate-300/25 group-hover:opacity-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" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
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>
<div class="group flex items-center justify-between">
<div class="flex space-x-3">
<div
class="flex h-10 w-10 items-center justify-center rounded-full bg-secondary text-white">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5.5 w-5.5" viewBox="0 0 20 20"
fill="currentColor">
<path
d="M2 6a2 2 0 012-2h6a2 2 0 012 2v8a2 2 0 01-2 2H4a2 2 0 01-2-2V6zM14.553 7.106A1 1 0 0014 8v4a1 1 0 00.553.894l2 1A1 1 0 0018 13V7a1 1 0 00-1.447-.894l-2 1z" />
</svg>
</div>
<div>
<a href="#" class="text-slate-600 dark:text-navy-100">#Video</a>
<div class="mt-1 flex text-xs text-slate-400 dark:text-navy-300">
<p>135 Files</p>
<div class="mx-2 my-1 w-px bg-slate-200 dark:bg-navy-500"></div>
<p>14 GB</p>
</div>
</div>
</div>
<button
class="btn -mr-2 h-8 w-8 rounded-full p-0 opacity-0 hover:bg-slate-300/20 focus:bg-slate-300/20 focus:opacity-100 active:bg-slate-300/25 group-hover:opacity-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" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
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>
<div class="group flex items-center justify-between">
<div class="flex space-x-3">
<div class="flex h-10 w-10 items-center justify-center rounded-full bg-info text-white">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5.5 w-5.5" viewBox="0 0 20 20"
fill="currentColor">
<path
d="M9 2a2 2 0 00-2 2v8a2 2 0 002 2h6a2 2 0 002-2V6.414A2 2 0 0016.414 5L14 2.586A2 2 0 0012.586 2H9z" />
<path d="M3 8a2 2 0 012-2v10h8a2 2 0 01-2 2H5a2 2 0 01-2-2V8z" />
</svg>
</div>
<div>
<a href="#" class="text-slate-600 dark:text-navy-100">#Documents</a>
<div class="mt-1 flex text-xs text-slate-400 dark:text-navy-300">
<p>5477 Files</p>
<div class="mx-2 my-1 w-px bg-slate-200 dark:bg-navy-500"></div>
<p>1.2 GB</p>
</div>
</div>
</div>
<button
class="btn -mr-2 h-8 w-8 rounded-full p-0 opacity-0 hover:bg-slate-300/20 focus:bg-slate-300/20 focus:opacity-100 active:bg-slate-300/25 group-hover:opacity-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" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
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>
<div class="group flex items-center justify-between">
<div class="flex space-x-3">
<div
class="flex h-10 w-10 items-center justify-center rounded-full bg-success text-white">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5.5 w-5.5" viewBox="0 0 20 20"
fill="currentColor">
<path fill-rule="evenodd"
d="M3 3a1 1 0 000 2v8a2 2 0 002 2h2.586l-1.293 1.293a1 1 0 101.414 1.414L10 15.414l2.293 2.293a1 1 0 001.414-1.414L12.414 15H15a2 2 0 002-2V5a1 1 0 100-2H3zm11.707 4.707a1 1 0 00-1.414-1.414L10 9.586 8.707 8.293a1 1 0 00-1.414 0l-2 2a1 1 0 101.414 1.414L8 10.414l1.293 1.293a1 1 0 001.414 0l4-4z"
clip-rule="evenodd" />
</svg>
</div>
<div>
<a href="#" class="text-slate-600 dark:text-navy-100">#adminui</a>
<div class="mt-1 flex text-xs text-slate-400 dark:text-navy-300">
<p>120 Files</p>
<div class="mx-2 my-1 w-px bg-slate-200 dark:bg-navy-500"></div>
<p>166 MB</p>
</div>
</div>
</div>
<button
class="btn -mr-2 h-8 w-8 rounded-full p-0 opacity-0 hover:bg-slate-300/20 focus:bg-slate-300/20 focus:opacity-100 active:bg-slate-300/25 group-hover:opacity-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" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
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>
<div class="group flex items-center justify-between">
<div class="flex space-x-3">
<div
class="flex h-10 w-10 items-center justify-center rounded-full bg-warning text-white">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5.5 w-5.5" viewBox="0 0 20 20"
fill="currentColor">
<path fill-rule="evenodd"
d="M18 10c0 3.866-3.582 7-8 7a8.841 8.841 0 01-4.083-.98L2 17l1.338-3.123C2.493 12.767 2 11.434 2 10c0-3.866 3.582-7 8-7s8 3.134 8 7zM7 9H5v2h2V9zm8 0h-2v2h2V9zM9 9h2v2H9V9z"
clip-rule="evenodd" />
</svg>
</div>
<div>
<a href="#" class="text-slate-600 dark:text-navy-100">#chatUI</a>
<div class="mt-1 flex text-xs text-slate-400 dark:text-navy-300">
<p>54 Files</p>
<div class="mx-2 my-1 w-px bg-slate-200 dark:bg-navy-500"></div>
<p>121 MB</p>
</div>
</div>
</div>
<button
class="btn -mr-2 h-8 w-8 rounded-full p-0 opacity-0 hover:bg-slate-300/20 focus:bg-slate-300/20 focus:opacity-100 active:bg-slate-300/25 group-hover:opacity-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" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
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>
<div class="group flex items-center justify-between">
<div class="flex space-x-3">
<div class="flex h-10 w-10 items-center justify-center rounded-full bg-error text-white">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5.5 w-5.5" viewBox="0 0 20 20"
fill="currentColor">
<path
d="M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zM3 10a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H4a1 1 0 01-1-1v-6zM14 9a1 1 0 00-1 1v6a1 1 0 001 1h2a1 1 0 001-1v-6a1 1 0 00-1-1h-2z" />
</svg>
</div>
<div>
<a href="#" class="text-slate-600 dark:text-navy-100">#uiux</a>
<div class="mt-1 flex text-xs text-slate-400 dark:text-navy-300">
<p>565 Files</p>
<div class="mx-2 my-1 w-px bg-slate-200 dark:bg-navy-500"></div>
<p>756 MB</p>
</div>
</div>
</div>
<button
class="btn -mr-2 h-8 w-8 rounded-full p-0 opacity-0 hover:bg-slate-300/20 focus:bg-slate-300/20 focus:opacity-100 active:bg-slate-300/25 group-hover:opacity-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" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
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>
<div class="group flex items-center justify-between">
<div class="flex space-x-3">
<div
class="flex h-10 w-10 items-center justify-center rounded-full bg-primary text-white dark:bg-accent">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5.5 w-5.5" viewBox="0 0 20 20"
fill="currentColor">
<path fill-rule="evenodd"
d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-8 3 6 2-4 3 6z"
clip-rule="evenodd" />
</svg>
</div>
<div>
<a href="#" class="text-slate-600 dark:text-navy-100">#Image</a>
<div class="mt-1 flex text-xs text-slate-400 dark:text-navy-300">
<p>654 Files</p>
<div class="mx-2 my-1 w-px bg-slate-200 dark:bg-navy-500"></div>
<p>1.5 GB</p>
</div>
</div>
</div>
<button
class="btn -mr-2 h-8 w-8 rounded-full p-0 opacity-0 hover:bg-slate-300/20 focus:bg-slate-300/20 focus:opacity-100 active:bg-slate-300/25 group-hover:opacity-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" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
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>
<div class="group flex items-center justify-between">
<div class="flex space-x-3">
<div
class="flex h-10 w-10 items-center justify-center rounded-full bg-secondary text-white">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5.5 w-5.5" viewBox="0 0 20 20"
fill="currentColor">
<path
d="M2 6a2 2 0 012-2h6a2 2 0 012 2v8a2 2 0 01-2 2H4a2 2 0 01-2-2V6zM14.553 7.106A1 1 0 0014 8v4a1 1 0 00.553.894l2 1A1 1 0 0018 13V7a1 1 0 00-1.447-.894l-2 1z" />
</svg>
</div>
<div>
<a href="#" class="text-slate-600 dark:text-navy-100">#Video</a>
<div class="mt-1 flex text-xs text-slate-400 dark:text-navy-300">
<p>135 Files</p>
<div class="mx-2 my-1 w-px bg-slate-200 dark:bg-navy-500"></div>
<p>14 GB</p>
</div>
</div>
</div>
<button
class="btn -mr-2 h-8 w-8 rounded-full p-0 opacity-0 hover:bg-slate-300/20 focus:bg-slate-300/20 focus:opacity-100 active:bg-slate-300/25 group-hover:opacity-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" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
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>
<div class="group flex items-center justify-between">
<div class="flex space-x-3">
<div class="flex h-10 w-10 items-center justify-center rounded-full bg-info text-white">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5.5 w-5.5" viewBox="0 0 20 20"
fill="currentColor">
<path
d="M9 2a2 2 0 00-2 2v8a2 2 0 002 2h6a2 2 0 002-2V6.414A2 2 0 0016.414 5L14 2.586A2 2 0 0012.586 2H9z" />
<path d="M3 8a2 2 0 012-2v10h8a2 2 0 01-2 2H5a2 2 0 01-2-2V8z" />
</svg>
</div>
<div>
<a href="#" class="text-slate-600 dark:text-navy-100">#Documents</a>
<div class="mt-1 flex text-xs text-slate-400 dark:text-navy-300">
<p>5477 Files</p>
<div class="mx-2 my-1 w-px bg-slate-200 dark:bg-navy-500"></div>
<p>1.2 GB</p>
</div>
</div>
</div>
<button
class="btn -mr-2 h-8 w-8 rounded-full p-0 opacity-0 hover:bg-slate-300/20 focus:bg-slate-300/20 focus:opacity-100 active:bg-slate-300/25 group-hover:opacity-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" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
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>
</div>
</div>
</div>
</main>
<div x-show="showDrawer" x-data="{ showDrawer: false }"
x-on:show-drawer.window="($event.detail.drawerId === 'filemanager-activity-drawer') && (showDrawer = true)"
@keydown.window.escape="showDrawer = false">
<div class="fixed inset-0 z-[100] bg-slate-900/60 transition-opacity duration-200"
@click="showDrawer = false" x-show="showDrawer" x-transition:enter="ease-out"
x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="ease-in"
x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"></div>
<div class="fixed right-0 top-0 z-[101] h-full w-full sm:w-80">
<div class="flex h-full w-full transform-gpu flex-col bg-white transition-transform duration-200 dark:bg-navy-700"
x-show="showDrawer" x-transition:enter="ease-out" x-transition:enter-start="translate-x-full"
x-transition:enter-end="translate-x-0" x-transition:leave="ease-in"
x-transition:leave-start="translate-x-0" x-transition:leave-end="translate-x-full">
<div class="flex h-14 items-center justify-between bg-slate-150 p-4 dark:bg-navy-800">
<h3 class="text-base font-medium text-slate-700 dark:text-navy-100">
Activity
</h3>
<div class="-mr-1.5 flex">
<button @click="showDrawer=false"
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="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
<div x-init="$el._x_simplebar = new SimpleBar($el)" class="flex grow flex-col overflow-y-auto overscroll-contain p-4"
x-data="{ activeTab: 'tab-recent' }">
<div class="flex space-x-2">
<button @click="activeTab = 'tab-recent'" class="btn h-8 rounded-full text-xs+ font-medium"
:class="activeTab === 'tab-recent' ?
'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'">
Recent
</button>
<button @click="activeTab = 'tab-activity'"
class="btn h-8 rounded-full text-xs+ font-medium"
:class="activeTab === 'tab-activity' ?
'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'">
Activity
</button>
</div>
<div class="tab-content mt-5">
<div x-show="activeTab === 'tab-recent'"
x-transition:enter="transition-all duration-500 easy-in-out"
x-transition:enter-start="opacity-0 [transform:translate3d(1rem,0,0)]"
x-transition:enter-end="opacity-100 [transform:translate3d(0,0,0)]">
<ol class="timeline line-space">
<li class="timeline-item">
<div
class="timeline-item-point rounded-full border-2 border-slate-300 dark:border-navy-400">
</div>
<div class="timeline-item-content flex-1 pl-4">
<div class="flex flex-col justify-between sm:flex-row">
<p class="font-medium leading-none text-slate-600 dark:text-navy-100">
2 minute ago
</p>
</div>
<div class="mt-4 grid grid-cols-3 gap-2">
<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 class="mt-3 flex items-center space-x-2">
<div class="avatar h-6 w-6">
<img class="rounded-full" src="{{ asset('images/200x200.png') }}"
alt="avatar" />
</div>
<p class="text-xs+">
<span class="font-medium">Mores Clarke</span>
<span class="text-slate-400 dark:text-navy-300">added 3 new
Photo</span>
</p>
</div>
</div>
</li>
<li class="timeline-item">
<div
class="timeline-item-point rounded-full border-2 border-secondary dark:border-secondary-light">
</div>
<div class="timeline-item-content flex-1 pl-4">
<div class="flex flex-col justify-between sm:flex-row">
<p class="font-medium leading-none text-slate-600 dark:text-navy-100">
a hour ago
</p>
</div>
<div class="mt-4 flex items-center space-x-3">
<div
class="mask is-squircle flex h-11 w-11 items-center justify-center bg-secondary text-white">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6"
fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
stroke-width="2"
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>
<div>
<p class="font-medium text-slate-700 dark:text-navy-100">
Slow Music
</p>
<div class="flex text-xs text-slate-400 dark:text-navy-300">
<span>03:12</span>
<div class="mx-2 my-1 w-px bg-slate-200 dark:bg-navy-500"></div>
<span>8.32 MB</span>
</div>
</div>
</div>
<div class="mt-3 flex items-center space-x-2">
<div class="avatar h-6 w-6">
<img class="rounded-full" src="{{ asset('images/200x200.png') }}"
alt="avatar" />
</div>
<p class="text-xs+">
<span class="font-medium">Bill Musk </span>
<span class="text-slate-400 dark:text-navy-300">
added a new Music</span>
</p>
</div>
</div>
</li>
<li class="timeline-item">
<div class="timeline-item-point rounded-full border-2 border-info"></div>
<div class="timeline-item-content flex-1 pl-4">
<div class="flex flex-col justify-between sm:flex-row">
<p class="font-medium leading-none text-slate-600 dark:text-navy-100">
a day ago
</p>
</div>
<div class="mt-4 flex items-center space-x-3">
<div
class="mask is-squircle flex h-11 w-11 items-center justify-center bg-info text-white">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6"
fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
stroke-width="2"
d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 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>
<div>
<p class="font-medium text-slate-700 dark:text-navy-100">
Final.fig
</p>
<div class="flex text-xs text-slate-400 dark:text-navy-300">
<span>45 MB</span>
</div>
</div>
</div>
<div class="mt-3 flex items-center space-x-2">
<div class="avatar h-6 w-6">
<img class="rounded-full" src="{{ asset('images/200x200.png') }}"
alt="avatar" />
</div>
<p class="text-xs+">
<span class="font-medium">John Doe </span>
<span class="text-slate-400 dark:text-navy-300">
added a new file</span>
</p>
</div>
</div>
</li>
<li class="timeline-item">
<div
class="timeline-item-point rounded-full border-2 border-slate-300 dark:border-navy-400">
</div>
<div class="timeline-item-content flex-1 pl-4">
<div class="flex flex-col justify-between sm:flex-row">
<p class="font-medium leading-none text-slate-600 dark:text-navy-100">
2 day ago
</p>
</div>
<div class="mt-4 grid grid-cols-3 gap-2">
<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 class="mt-3 flex items-center space-x-2">
<div class="avatar h-6 w-6">
<img class="rounded-full" src="{{ asset('images/200x200.png') }}"
alt="avatar" />
</div>
<p class="text-xs+">
<span class="font-medium">Mores Clarke</span>
<span class="text-slate-400 dark:text-navy-300">added 3 new
Photo</span>
</p>
</div>
</div>
</li>
<li class="timeline-item">
<div
class="timeline-item-point rounded-full border-2 border-secondary dark:border-secondary-light">
</div>
<div class="timeline-item-content flex-1 pl-4">
<div class="flex flex-col justify-between sm:flex-row">
<p class="font-medium leading-none text-slate-600 dark:text-navy-100">
a month ago
</p>
</div>
<div class="mt-4 flex items-center space-x-3">
<div
class="mask is-squircle flex h-11 w-11 items-center justify-center bg-secondary text-white">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6"
fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
stroke-width="2"
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>
<div>
<p class="font-medium text-slate-700 dark:text-navy-100">
Slow Music
</p>
<div class="flex text-xs text-slate-400 dark:text-navy-300">
<span>03:12</span>
<div class="mx-2 my-1 w-px bg-slate-200 dark:bg-navy-500"></div>
<span>8.32 MB</span>
</div>
</div>
</div>
<div class="mt-3 flex items-center space-x-2">
<div class="avatar h-6 w-6">
<img class="rounded-full" src="{{ asset('images/200x200.png') }}"
alt="avatar" />
</div>
<p class="text-xs+">
<span class="font-medium">Bill Musk </span>
<span class="text-slate-400 dark:text-navy-300">
added a new Music</span>
</p>
</div>
</div>
</li>
</ol>
</div>
<div x-show="activeTab === 'tab-activity'"
x-transition:enter="transition-all duration-500 easy-in-out"
x-transition:enter-start="opacity-0 [transform:translate3d(1rem,0,0)]"
x-transition:enter-end="opacity-100 [transform:translate3d(0,0,0)]">
<div class="mt-20 text-center">
<img class="mx-auto w-40"
src="{{ asset('images/illustrations/empty-girl-box.svg') }}" alt="image" />
<div class="mt-5">
<p class="text-lg font-semibold text-slate-700 dark:text-navy-100">
No any activity
</p>
<p class="text-slate-400 dark:text-navy-300">
Lorem ipsum dolor sit amet, consectetur adipisicing
elit.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fixed right-3 bottom-3 rounded-full bg-white dark:bg-navy-700">
<button
class="btn h-14 w-14 rounded-full 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-focus/90 sm:hidden">
<svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7" fill="none" viewBox="0 0 24 24"
stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
</svg>
</button>
</div>
</x-base-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