295 lines
11 KiB
Svelte
295 lines
11 KiB
Svelte
<script>
|
|
import StatCards from "./StatCards.svelte";
|
|
import Table from "./Table.svelte";
|
|
import Pagination from "./Pagination.svelte";
|
|
import FormLayout from "./FormLayout.svelte";
|
|
import Tracks from "./Tracks.svelte";
|
|
</script>
|
|
|
|
<div>
|
|
<nav class="bg-gray-800">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="flex items-center justify-between h-16">
|
|
<div class="flex items-center">
|
|
<div class="flex-shrink-0">
|
|
<img
|
|
class="h-8 w-8"
|
|
src="https://tailwindui.com/img/logos/workflow-mark-indigo-500.svg"
|
|
alt="Workflow" />
|
|
</div>
|
|
<div class="hidden md:block">
|
|
<div class="ml-10 flex items-baseline space-x-4">
|
|
<a
|
|
href="#"
|
|
class="bg-gray-900 text-white px-3 py-2 rounded-md text-sm font-medium">Dashboard</a>
|
|
|
|
<a
|
|
href="#"
|
|
class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Team</a>
|
|
|
|
<a
|
|
href="#"
|
|
class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Projects</a>
|
|
|
|
<a
|
|
href="#"
|
|
class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Calendar</a>
|
|
|
|
<a
|
|
href="#"
|
|
class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Reports</a>
|
|
<form class="w-full max-w-xs mr-2 navbar-search">
|
|
<div class="relative">
|
|
<input
|
|
type="search"
|
|
name="search"
|
|
placeholder="Search..."
|
|
class="pl-10 pr-5 appearance-none h-10 w-full rounded-full text-sm focus:outline-none" /><button
|
|
type="submit"
|
|
class="absolute top-0 mt-3 left-0 ml-4"><svg
|
|
stroke="currentColor"
|
|
fill="none"
|
|
stroke-width="2"
|
|
viewBox="0 0 24 24"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
class="stroke-current h-4 w-4"
|
|
height="1em"
|
|
width="1em"
|
|
xmlns="http://www.w3.org/2000/svg"><circle
|
|
cx="11"
|
|
cy="11"
|
|
r="8" />
|
|
<line
|
|
x1="21"
|
|
y1="21"
|
|
x2="16.65"
|
|
y2="16.65" /></svg></button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="hidden md:block">
|
|
<div class="ml-4 flex items-center md:ml-6">
|
|
<button
|
|
class="bg-gray-800 p-1 rounded-full text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white">
|
|
<span class="sr-only">View notifications</span>
|
|
<!-- Heroicon name: bell -->
|
|
<svg
|
|
class="h-6 w-6"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
aria-hidden="true">
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
|
|
</svg>
|
|
</button>
|
|
|
|
<!-- Profile dropdown -->
|
|
<div class="ml-3 relative">
|
|
<div>
|
|
<button
|
|
class="max-w-xs bg-gray-800 rounded-full flex items-center text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white"
|
|
id="user-menu"
|
|
aria-haspopup="true">
|
|
<span class="sr-only">Open user menu</span>
|
|
<img
|
|
class="h-8 w-8 rounded-full"
|
|
src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
|
alt="" />
|
|
</button>
|
|
</div>
|
|
<!--
|
|
Profile dropdown panel, show/hide based on dropdown state.
|
|
|
|
Entering: "transition ease-out duration-100"
|
|
From: "transform opacity-0 scale-95"
|
|
To: "transform opacity-100 scale-100"
|
|
Leaving: "transition ease-in duration-75"
|
|
From: "transform opacity-100 scale-100"
|
|
To: "transform opacity-0 scale-95"
|
|
-->
|
|
<div
|
|
class="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5"
|
|
role="menu"
|
|
aria-orientation="vertical"
|
|
aria-labelledby="user-menu">
|
|
<a
|
|
href="#"
|
|
class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
|
|
role="menuitem">Your Profile</a>
|
|
|
|
<a
|
|
href="#"
|
|
class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
|
|
role="menuitem">Settings</a>
|
|
|
|
<a
|
|
href="#"
|
|
class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
|
|
role="menuitem">Sign out</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="-mr-2 flex md:hidden">
|
|
<!-- Mobile menu button -->
|
|
<button
|
|
class="bg-gray-800 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white">
|
|
<span class="sr-only">Open main menu</span>
|
|
<!--
|
|
Heroicon name: menu
|
|
|
|
Menu open: "hidden", Menu closed: "block"
|
|
-->
|
|
<svg
|
|
class="block h-6 w-6"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
aria-hidden="true">
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M4 6h16M4 12h16M4 18h16" />
|
|
</svg>
|
|
<!--
|
|
Heroicon name: x
|
|
|
|
Menu open: "block", Menu closed: "hidden"
|
|
-->
|
|
<svg
|
|
class="hidden h-6 w-6"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
aria-hidden="true">
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!--
|
|
Mobile menu, toggle classes based on menu state.
|
|
|
|
Open: "block", closed: "hidden"
|
|
-->
|
|
<div class="hidden md:hidden">
|
|
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
|
|
<!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
|
|
<a
|
|
href="#"
|
|
class="bg-gray-900 text-white block px-3 py-2 rounded-md text-base font-medium">Dashboard</a>
|
|
|
|
<a
|
|
href="#"
|
|
class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Team</a>
|
|
|
|
<a
|
|
href="#"
|
|
class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Projects</a>
|
|
|
|
<a
|
|
href="#"
|
|
class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Calendar</a>
|
|
|
|
<a
|
|
href="#"
|
|
class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Reports</a>
|
|
</div>
|
|
<div class="pt-4 pb-3 border-t border-gray-700">
|
|
<div class="flex items-center px-5">
|
|
<div class="flex-shrink-0">
|
|
<img
|
|
class="h-10 w-10 rounded-full"
|
|
src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
|
alt="" />
|
|
</div>
|
|
<div class="ml-3">
|
|
<div class="text-base font-medium leading-none text-white">
|
|
Tom Cook
|
|
</div>
|
|
<div class="text-sm font-medium leading-none text-gray-400">
|
|
tom@example.com
|
|
</div>
|
|
</div>
|
|
<button
|
|
class="ml-auto bg-gray-800 flex-shrink-0 p-1 rounded-full text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white">
|
|
<span class="sr-only">View notifications</span>
|
|
<!-- Heroicon name: bell -->
|
|
<svg
|
|
class="h-6 w-6"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
aria-hidden="true">
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div class="mt-3 px-2 space-y-1">
|
|
<a
|
|
href="#"
|
|
class="block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700">Your
|
|
Profile</a>
|
|
|
|
<a
|
|
href="#"
|
|
class="block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700">Settings</a>
|
|
|
|
<a
|
|
href="#"
|
|
class="block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700">Sign
|
|
out</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<header class="bg-white shadow">
|
|
<div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
|
|
<h1 class="text-3xl leading-tight">
|
|
<span class="font-bold">Dashboard</span><span> - hello there 👋</span>
|
|
</h1>
|
|
</div>
|
|
</header>
|
|
<main>
|
|
<div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
|
|
<!-- -->
|
|
<StatCards />
|
|
<!-- -->
|
|
|
|
<div class="mb-8">
|
|
<Tracks />
|
|
</div>
|
|
<Pagination />
|
|
<div class="mb-8">
|
|
<Table />
|
|
</div>
|
|
<div class="mb-8">
|
|
<FormLayout />
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|