You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1697 lines
110 KiB
HTML
1697 lines
110 KiB
HTML
<!-- Include this script tag or install `@tailwindplus/elements` via npm: -->
|
|
<!-- <script src="https://cdn.jsdelivr.net/npm/@tailwindplus/elements@1" type="module"></script> -->
|
|
<button
|
|
command="show-modal"
|
|
commandfor="drawer"
|
|
class="rounded-md bg-gray-950/5 px-2.5 py-1.5 text-sm font-semibold text-gray-900 hover:bg-gray-950/10"
|
|
>
|
|
Open drawer
|
|
</button>
|
|
<el-dialog>
|
|
<dialog
|
|
id="drawer"
|
|
aria-labelledby="drawer-title"
|
|
class="fixed inset-0 size-auto max-h-none max-w-none overflow-hidden bg-transparent backdrop:bg-transparent"
|
|
>
|
|
<div
|
|
tabindex="0"
|
|
class="absolute inset-0 pl-10 focus:outline-none sm:pl-16"
|
|
>
|
|
<el-dialog-panel
|
|
class="group/dialog-panel ml-auto block size-full max-w-md transform transition duration-500 ease-in-out data-closed:translate-x-full sm:duration-700"
|
|
>
|
|
<div
|
|
class="flex h-full flex-col overflow-y-auto bg-white shadow-xl"
|
|
>
|
|
<div class="p-6">
|
|
<div class="flex items-start justify-between">
|
|
<h2
|
|
id="drawer-title"
|
|
class="text-base font-semibold text-gray-900"
|
|
>
|
|
Team
|
|
</h2>
|
|
<div class="ml-3 flex h-7 items-center">
|
|
<button
|
|
type="button"
|
|
command="close"
|
|
commandfor="drawer"
|
|
class="relative rounded-md bg-white text-gray-400 hover:text-gray-500 focus-visible:ring-2 focus-visible:ring-indigo-500"
|
|
>
|
|
<span class="absolute -inset-2.5"></span>
|
|
<span class="sr-only">Close panel</span>
|
|
<svg
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="1.5"
|
|
data-slot="icon"
|
|
aria-hidden="true"
|
|
class="size-6"
|
|
>
|
|
<path
|
|
d="M6 18 18 6M6 6l12 12"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="border-b border-gray-200">
|
|
<div class="px-6">
|
|
<!-- Tab component -->
|
|
<nav class="-mb-px flex space-x-6">
|
|
<!-- Current: "border-indigo-500 text-indigo-600", Default: "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700" -->
|
|
<a
|
|
href="#"
|
|
class="border-b-2 border-indigo-500 px-1 pb-4 text-sm font-medium whitespace-nowrap text-indigo-600"
|
|
>All</a
|
|
>
|
|
<a
|
|
href="#"
|
|
class="border-b-2 border-transparent px-1 pb-4 text-sm font-medium whitespace-nowrap text-gray-500 hover:border-gray-300 hover:text-gray-700"
|
|
>Online</a
|
|
>
|
|
<a
|
|
href="#"
|
|
class="border-b-2 border-transparent px-1 pb-4 text-sm font-medium whitespace-nowrap text-gray-500 hover:border-gray-300 hover:text-gray-700"
|
|
>Offline</a
|
|
>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
<ul
|
|
role="list"
|
|
class="flex-1 divide-y divide-gray-200 overflow-y-auto"
|
|
>
|
|
<li>
|
|
<div
|
|
class="group relative flex items-center px-5 py-6"
|
|
>
|
|
<a href="#" class="-m-1 block flex-1 p-1">
|
|
<div
|
|
aria-hidden="true"
|
|
class="absolute inset-0 group-hover:bg-gray-50"
|
|
></div>
|
|
<div
|
|
class="relative flex min-w-0 flex-1 items-center"
|
|
>
|
|
<span
|
|
class="relative inline-block shrink-0"
|
|
>
|
|
<img
|
|
src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
|
alt=""
|
|
class="size-10 rounded-full"
|
|
/>
|
|
<!-- Online: "bg-green-400", Offline: "bg-gray-300" -->
|
|
<span
|
|
aria-hidden="true"
|
|
class="absolute top-0 right-0 block size-2.5 rounded-full bg-green-400 ring-2 ring-white"
|
|
></span>
|
|
</span>
|
|
<div class="ml-4 truncate">
|
|
<p
|
|
class="truncate text-sm font-medium text-gray-900"
|
|
>
|
|
Leslie Alexander
|
|
</p>
|
|
<p
|
|
class="truncate text-sm text-gray-500"
|
|
>
|
|
@lesliealexander
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<el-dropdown
|
|
class="relative ml-2 inline-block shrink-0 text-left"
|
|
>
|
|
<button
|
|
class="group relative inline-flex size-8 items-center justify-center rounded-full bg-white focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 focus-visible:outline-hidden"
|
|
>
|
|
<span
|
|
class="absolute -inset-1.5"
|
|
></span>
|
|
<span class="sr-only"
|
|
>Open options menu</span
|
|
>
|
|
<span
|
|
class="flex size-full items-center justify-center rounded-full"
|
|
>
|
|
<svg
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
data-slot="icon"
|
|
aria-hidden="true"
|
|
class="size-5 text-gray-400 group-hover:text-gray-500"
|
|
>
|
|
<path
|
|
d="M10 3a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM10 8.5a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM11.5 15.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0Z"
|
|
/>
|
|
</svg>
|
|
</span>
|
|
</button>
|
|
<el-menu
|
|
anchor="left start"
|
|
popover
|
|
class="w-48 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black/5 transition transition-discrete [--anchor-gap:--spacing(1)] focus-visible:outline-hidden data-closed:scale-95 data-closed:transform data-closed:opacity-0 data-enter:duration-100 data-enter:ease-out data-leave:duration-75 data-leave:ease-in"
|
|
>
|
|
<div class="py-1">
|
|
<a
|
|
href="#"
|
|
class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:text-gray-900 focus:outline-hidden"
|
|
>View profile</a
|
|
>
|
|
<a
|
|
href="#"
|
|
class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:text-gray-900 focus:outline-hidden"
|
|
>Send message</a
|
|
>
|
|
</div>
|
|
</el-menu>
|
|
</el-dropdown>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div
|
|
class="group relative flex items-center px-5 py-6"
|
|
>
|
|
<a href="#" class="-m-1 block flex-1 p-1">
|
|
<div
|
|
aria-hidden="true"
|
|
class="absolute inset-0 group-hover:bg-gray-50"
|
|
></div>
|
|
<div
|
|
class="relative flex min-w-0 flex-1 items-center"
|
|
>
|
|
<span
|
|
class="relative inline-block shrink-0"
|
|
>
|
|
<img
|
|
src="https://images.unsplash.com/photo-1519244703995-f4e0f30006d5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
|
alt=""
|
|
class="size-10 rounded-full"
|
|
/>
|
|
<!-- Online: "bg-green-400", Offline: "bg-gray-300" -->
|
|
<span
|
|
aria-hidden="true"
|
|
class="absolute top-0 right-0 block size-2.5 rounded-full bg-green-400 ring-2 ring-white"
|
|
></span>
|
|
</span>
|
|
<div class="ml-4 truncate">
|
|
<p
|
|
class="truncate text-sm font-medium text-gray-900"
|
|
>
|
|
Michael Foster
|
|
</p>
|
|
<p
|
|
class="truncate text-sm text-gray-500"
|
|
>
|
|
@michaelfoster
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<el-dropdown
|
|
class="relative ml-2 inline-block shrink-0 text-left"
|
|
>
|
|
<button
|
|
class="group relative inline-flex size-8 items-center justify-center rounded-full bg-white focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 focus-visible:outline-hidden"
|
|
>
|
|
<span
|
|
class="absolute -inset-1.5"
|
|
></span>
|
|
<span class="sr-only"
|
|
>Open options menu</span
|
|
>
|
|
<span
|
|
class="flex size-full items-center justify-center rounded-full"
|
|
>
|
|
<svg
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
data-slot="icon"
|
|
aria-hidden="true"
|
|
class="size-5 text-gray-400 group-hover:text-gray-500"
|
|
>
|
|
<path
|
|
d="M10 3a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM10 8.5a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM11.5 15.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0Z"
|
|
/>
|
|
</svg>
|
|
</span>
|
|
</button>
|
|
<el-menu
|
|
anchor="left start"
|
|
popover
|
|
class="w-48 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black/5 transition transition-discrete [--anchor-gap:--spacing(1)] focus-visible:outline-hidden data-closed:scale-95 data-closed:transform data-closed:opacity-0 data-enter:duration-100 data-enter:ease-out data-leave:duration-75 data-leave:ease-in"
|
|
>
|
|
<div class="py-1">
|
|
<a
|
|
href="#"
|
|
class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:text-gray-900 focus:outline-hidden"
|
|
>View profile</a
|
|
>
|
|
<a
|
|
href="#"
|
|
class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:text-gray-900 focus:outline-hidden"
|
|
>Send message</a
|
|
>
|
|
</div>
|
|
</el-menu>
|
|
</el-dropdown>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div
|
|
class="group relative flex items-center px-5 py-6"
|
|
>
|
|
<a href="#" class="-m-1 block flex-1 p-1">
|
|
<div
|
|
aria-hidden="true"
|
|
class="absolute inset-0 group-hover:bg-gray-50"
|
|
></div>
|
|
<div
|
|
class="relative flex min-w-0 flex-1 items-center"
|
|
>
|
|
<span
|
|
class="relative inline-block shrink-0"
|
|
>
|
|
<img
|
|
src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
|
alt=""
|
|
class="size-10 rounded-full"
|
|
/>
|
|
<!-- Online: "bg-green-400", Offline: "bg-gray-300" -->
|
|
<span
|
|
aria-hidden="true"
|
|
class="absolute top-0 right-0 block size-2.5 rounded-full bg-green-400 ring-2 ring-white"
|
|
></span>
|
|
</span>
|
|
<div class="ml-4 truncate">
|
|
<p
|
|
class="truncate text-sm font-medium text-gray-900"
|
|
>
|
|
Dries Vincent
|
|
</p>
|
|
<p
|
|
class="truncate text-sm text-gray-500"
|
|
>
|
|
@driesvincent
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<el-dropdown
|
|
class="relative ml-2 inline-block shrink-0 text-left"
|
|
>
|
|
<button
|
|
class="group relative inline-flex size-8 items-center justify-center rounded-full bg-white focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 focus-visible:outline-hidden"
|
|
>
|
|
<span
|
|
class="absolute -inset-1.5"
|
|
></span>
|
|
<span class="sr-only"
|
|
>Open options menu</span
|
|
>
|
|
<span
|
|
class="flex size-full items-center justify-center rounded-full"
|
|
>
|
|
<svg
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
data-slot="icon"
|
|
aria-hidden="true"
|
|
class="size-5 text-gray-400 group-hover:text-gray-500"
|
|
>
|
|
<path
|
|
d="M10 3a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM10 8.5a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM11.5 15.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0Z"
|
|
/>
|
|
</svg>
|
|
</span>
|
|
</button>
|
|
<el-menu
|
|
anchor="left start"
|
|
popover
|
|
class="w-48 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black/5 transition transition-discrete [--anchor-gap:--spacing(1)] focus-visible:outline-hidden data-closed:scale-95 data-closed:transform data-closed:opacity-0 data-enter:duration-100 data-enter:ease-out data-leave:duration-75 data-leave:ease-in"
|
|
>
|
|
<div class="py-1">
|
|
<a
|
|
href="#"
|
|
class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:text-gray-900 focus:outline-hidden"
|
|
>View profile</a
|
|
>
|
|
<a
|
|
href="#"
|
|
class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:text-gray-900 focus:outline-hidden"
|
|
>Send message</a
|
|
>
|
|
</div>
|
|
</el-menu>
|
|
</el-dropdown>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div
|
|
class="group relative flex items-center px-5 py-6"
|
|
>
|
|
<a href="#" class="-m-1 block flex-1 p-1">
|
|
<div
|
|
aria-hidden="true"
|
|
class="absolute inset-0 group-hover:bg-gray-50"
|
|
></div>
|
|
<div
|
|
class="relative flex min-w-0 flex-1 items-center"
|
|
>
|
|
<span
|
|
class="relative inline-block shrink-0"
|
|
>
|
|
<img
|
|
src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
|
alt=""
|
|
class="size-10 rounded-full"
|
|
/>
|
|
<!-- Online: "bg-green-400", Offline: "bg-gray-300" -->
|
|
<span
|
|
aria-hidden="true"
|
|
class="absolute top-0 right-0 block size-2.5 rounded-full bg-gray-300 ring-2 ring-white"
|
|
></span>
|
|
</span>
|
|
<div class="ml-4 truncate">
|
|
<p
|
|
class="truncate text-sm font-medium text-gray-900"
|
|
>
|
|
Lindsay Walton
|
|
</p>
|
|
<p
|
|
class="truncate text-sm text-gray-500"
|
|
>
|
|
@lindsaywalton
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<el-dropdown
|
|
class="relative ml-2 inline-block shrink-0 text-left"
|
|
>
|
|
<button
|
|
class="group relative inline-flex size-8 items-center justify-center rounded-full bg-white focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 focus-visible:outline-hidden"
|
|
>
|
|
<span
|
|
class="absolute -inset-1.5"
|
|
></span>
|
|
<span class="sr-only"
|
|
>Open options menu</span
|
|
>
|
|
<span
|
|
class="flex size-full items-center justify-center rounded-full"
|
|
>
|
|
<svg
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
data-slot="icon"
|
|
aria-hidden="true"
|
|
class="size-5 text-gray-400 group-hover:text-gray-500"
|
|
>
|
|
<path
|
|
d="M10 3a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM10 8.5a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM11.5 15.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0Z"
|
|
/>
|
|
</svg>
|
|
</span>
|
|
</button>
|
|
<el-menu
|
|
anchor="left start"
|
|
popover
|
|
class="w-48 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black/5 transition transition-discrete [--anchor-gap:--spacing(1)] focus-visible:outline-hidden data-closed:scale-95 data-closed:transform data-closed:opacity-0 data-enter:duration-100 data-enter:ease-out data-leave:duration-75 data-leave:ease-in"
|
|
>
|
|
<div class="py-1">
|
|
<a
|
|
href="#"
|
|
class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:text-gray-900 focus:outline-hidden"
|
|
>View profile</a
|
|
>
|
|
<a
|
|
href="#"
|
|
class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:text-gray-900 focus:outline-hidden"
|
|
>Send message</a
|
|
>
|
|
</div>
|
|
</el-menu>
|
|
</el-dropdown>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div
|
|
class="group relative flex items-center px-5 py-6"
|
|
>
|
|
<a href="#" class="-m-1 block flex-1 p-1">
|
|
<div
|
|
aria-hidden="true"
|
|
class="absolute inset-0 group-hover:bg-gray-50"
|
|
></div>
|
|
<div
|
|
class="relative flex min-w-0 flex-1 items-center"
|
|
>
|
|
<span
|
|
class="relative inline-block shrink-0"
|
|
>
|
|
<img
|
|
src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
|
alt=""
|
|
class="size-10 rounded-full"
|
|
/>
|
|
<!-- Online: "bg-green-400", Offline: "bg-gray-300" -->
|
|
<span
|
|
aria-hidden="true"
|
|
class="absolute top-0 right-0 block size-2.5 rounded-full bg-gray-300 ring-2 ring-white"
|
|
></span>
|
|
</span>
|
|
<div class="ml-4 truncate">
|
|
<p
|
|
class="truncate text-sm font-medium text-gray-900"
|
|
>
|
|
Courtney Henry
|
|
</p>
|
|
<p
|
|
class="truncate text-sm text-gray-500"
|
|
>
|
|
@courtneyhenry
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<el-dropdown
|
|
class="relative ml-2 inline-block shrink-0 text-left"
|
|
>
|
|
<button
|
|
class="group relative inline-flex size-8 items-center justify-center rounded-full bg-white focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 focus-visible:outline-hidden"
|
|
>
|
|
<span
|
|
class="absolute -inset-1.5"
|
|
></span>
|
|
<span class="sr-only"
|
|
>Open options menu</span
|
|
>
|
|
<span
|
|
class="flex size-full items-center justify-center rounded-full"
|
|
>
|
|
<svg
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
data-slot="icon"
|
|
aria-hidden="true"
|
|
class="size-5 text-gray-400 group-hover:text-gray-500"
|
|
>
|
|
<path
|
|
d="M10 3a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM10 8.5a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM11.5 15.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0Z"
|
|
/>
|
|
</svg>
|
|
</span>
|
|
</button>
|
|
<el-menu
|
|
anchor="left start"
|
|
popover
|
|
class="w-48 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black/5 transition transition-discrete [--anchor-gap:--spacing(1)] focus-visible:outline-hidden data-closed:scale-95 data-closed:transform data-closed:opacity-0 data-enter:duration-100 data-enter:ease-out data-leave:duration-75 data-leave:ease-in"
|
|
>
|
|
<div class="py-1">
|
|
<a
|
|
href="#"
|
|
class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:text-gray-900 focus:outline-hidden"
|
|
>View profile</a
|
|
>
|
|
<a
|
|
href="#"
|
|
class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:text-gray-900 focus:outline-hidden"
|
|
>Send message</a
|
|
>
|
|
</div>
|
|
</el-menu>
|
|
</el-dropdown>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div
|
|
class="group relative flex items-center px-5 py-6"
|
|
>
|
|
<a href="#" class="-m-1 block flex-1 p-1">
|
|
<div
|
|
aria-hidden="true"
|
|
class="absolute inset-0 group-hover:bg-gray-50"
|
|
></div>
|
|
<div
|
|
class="relative flex min-w-0 flex-1 items-center"
|
|
>
|
|
<span
|
|
class="relative inline-block shrink-0"
|
|
>
|
|
<img
|
|
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=""
|
|
class="size-10 rounded-full"
|
|
/>
|
|
<!-- Online: "bg-green-400", Offline: "bg-gray-300" -->
|
|
<span
|
|
aria-hidden="true"
|
|
class="absolute top-0 right-0 block size-2.5 rounded-full bg-gray-300 ring-2 ring-white"
|
|
></span>
|
|
</span>
|
|
<div class="ml-4 truncate">
|
|
<p
|
|
class="truncate text-sm font-medium text-gray-900"
|
|
>
|
|
Tom Cook
|
|
</p>
|
|
<p
|
|
class="truncate text-sm text-gray-500"
|
|
>
|
|
@tomcook
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<el-dropdown
|
|
class="relative ml-2 inline-block shrink-0 text-left"
|
|
>
|
|
<button
|
|
class="group relative inline-flex size-8 items-center justify-center rounded-full bg-white focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 focus-visible:outline-hidden"
|
|
>
|
|
<span
|
|
class="absolute -inset-1.5"
|
|
></span>
|
|
<span class="sr-only"
|
|
>Open options menu</span
|
|
>
|
|
<span
|
|
class="flex size-full items-center justify-center rounded-full"
|
|
>
|
|
<svg
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
data-slot="icon"
|
|
aria-hidden="true"
|
|
class="size-5 text-gray-400 group-hover:text-gray-500"
|
|
>
|
|
<path
|
|
d="M10 3a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM10 8.5a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM11.5 15.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0Z"
|
|
/>
|
|
</svg>
|
|
</span>
|
|
</button>
|
|
<el-menu
|
|
anchor="left start"
|
|
popover
|
|
class="w-48 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black/5 transition transition-discrete [--anchor-gap:--spacing(1)] focus-visible:outline-hidden data-closed:scale-95 data-closed:transform data-closed:opacity-0 data-enter:duration-100 data-enter:ease-out data-leave:duration-75 data-leave:ease-in"
|
|
>
|
|
<div class="py-1">
|
|
<a
|
|
href="#"
|
|
class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:text-gray-900 focus:outline-hidden"
|
|
>View profile</a
|
|
>
|
|
<a
|
|
href="#"
|
|
class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:text-gray-900 focus:outline-hidden"
|
|
>Send message</a
|
|
>
|
|
</div>
|
|
</el-menu>
|
|
</el-dropdown>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div
|
|
class="group relative flex items-center px-5 py-6"
|
|
>
|
|
<a href="#" class="-m-1 block flex-1 p-1">
|
|
<div
|
|
aria-hidden="true"
|
|
class="absolute inset-0 group-hover:bg-gray-50"
|
|
></div>
|
|
<div
|
|
class="relative flex min-w-0 flex-1 items-center"
|
|
>
|
|
<span
|
|
class="relative inline-block shrink-0"
|
|
>
|
|
<img
|
|
src="https://images.unsplash.com/photo-1517365830460-955ce3ccd263?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
|
alt=""
|
|
class="size-10 rounded-full"
|
|
/>
|
|
<!-- Online: "bg-green-400", Offline: "bg-gray-300" -->
|
|
<span
|
|
aria-hidden="true"
|
|
class="absolute top-0 right-0 block size-2.5 rounded-full bg-green-400 ring-2 ring-white"
|
|
></span>
|
|
</span>
|
|
<div class="ml-4 truncate">
|
|
<p
|
|
class="truncate text-sm font-medium text-gray-900"
|
|
>
|
|
Whitney Francis
|
|
</p>
|
|
<p
|
|
class="truncate text-sm text-gray-500"
|
|
>
|
|
@whitneyfrancis
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<el-dropdown
|
|
class="relative ml-2 inline-block shrink-0 text-left"
|
|
>
|
|
<button
|
|
class="group relative inline-flex size-8 items-center justify-center rounded-full bg-white focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 focus-visible:outline-hidden"
|
|
>
|
|
<span
|
|
class="absolute -inset-1.5"
|
|
></span>
|
|
<span class="sr-only"
|
|
>Open options menu</span
|
|
>
|
|
<span
|
|
class="flex size-full items-center justify-center rounded-full"
|
|
>
|
|
<svg
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
data-slot="icon"
|
|
aria-hidden="true"
|
|
class="size-5 text-gray-400 group-hover:text-gray-500"
|
|
>
|
|
<path
|
|
d="M10 3a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM10 8.5a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM11.5 15.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0Z"
|
|
/>
|
|
</svg>
|
|
</span>
|
|
</button>
|
|
<el-menu
|
|
anchor="left start"
|
|
popover
|
|
class="w-48 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black/5 transition transition-discrete [--anchor-gap:--spacing(1)] focus-visible:outline-hidden data-closed:scale-95 data-closed:transform data-closed:opacity-0 data-enter:duration-100 data-enter:ease-out data-leave:duration-75 data-leave:ease-in"
|
|
>
|
|
<div class="py-1">
|
|
<a
|
|
href="#"
|
|
class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:text-gray-900 focus:outline-hidden"
|
|
>View profile</a
|
|
>
|
|
<a
|
|
href="#"
|
|
class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:text-gray-900 focus:outline-hidden"
|
|
>Send message</a
|
|
>
|
|
</div>
|
|
</el-menu>
|
|
</el-dropdown>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div
|
|
class="group relative flex items-center px-5 py-6"
|
|
>
|
|
<a href="#" class="-m-1 block flex-1 p-1">
|
|
<div
|
|
aria-hidden="true"
|
|
class="absolute inset-0 group-hover:bg-gray-50"
|
|
></div>
|
|
<div
|
|
class="relative flex min-w-0 flex-1 items-center"
|
|
>
|
|
<span
|
|
class="relative inline-block shrink-0"
|
|
>
|
|
<img
|
|
src="https://images.unsplash.com/photo-1519345182560-3f2917c472ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
|
alt=""
|
|
class="size-10 rounded-full"
|
|
/>
|
|
<!-- Online: "bg-green-400", Offline: "bg-gray-300" -->
|
|
<span
|
|
aria-hidden="true"
|
|
class="absolute top-0 right-0 block size-2.5 rounded-full bg-green-400 ring-2 ring-white"
|
|
></span>
|
|
</span>
|
|
<div class="ml-4 truncate">
|
|
<p
|
|
class="truncate text-sm font-medium text-gray-900"
|
|
>
|
|
Leonard Krasner
|
|
</p>
|
|
<p
|
|
class="truncate text-sm text-gray-500"
|
|
>
|
|
@leonardkrasner
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<el-dropdown
|
|
class="relative ml-2 inline-block shrink-0 text-left"
|
|
>
|
|
<button
|
|
class="group relative inline-flex size-8 items-center justify-center rounded-full bg-white focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 focus-visible:outline-hidden"
|
|
>
|
|
<span
|
|
class="absolute -inset-1.5"
|
|
></span>
|
|
<span class="sr-only"
|
|
>Open options menu</span
|
|
>
|
|
<span
|
|
class="flex size-full items-center justify-center rounded-full"
|
|
>
|
|
<svg
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
data-slot="icon"
|
|
aria-hidden="true"
|
|
class="size-5 text-gray-400 group-hover:text-gray-500"
|
|
>
|
|
<path
|
|
d="M10 3a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM10 8.5a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM11.5 15.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0Z"
|
|
/>
|
|
</svg>
|
|
</span>
|
|
</button>
|
|
<el-menu
|
|
anchor="left start"
|
|
popover
|
|
class="w-48 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black/5 transition transition-discrete [--anchor-gap:--spacing(1)] focus-visible:outline-hidden data-closed:scale-95 data-closed:transform data-closed:opacity-0 data-enter:duration-100 data-enter:ease-out data-leave:duration-75 data-leave:ease-in"
|
|
>
|
|
<div class="py-1">
|
|
<a
|
|
href="#"
|
|
class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:text-gray-900 focus:outline-hidden"
|
|
>View profile</a
|
|
>
|
|
<a
|
|
href="#"
|
|
class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:text-gray-900 focus:outline-hidden"
|
|
>Send message</a
|
|
>
|
|
</div>
|
|
</el-menu>
|
|
</el-dropdown>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div
|
|
class="group relative flex items-center px-5 py-6"
|
|
>
|
|
<a href="#" class="-m-1 block flex-1 p-1">
|
|
<div
|
|
aria-hidden="true"
|
|
class="absolute inset-0 group-hover:bg-gray-50"
|
|
></div>
|
|
<div
|
|
class="relative flex min-w-0 flex-1 items-center"
|
|
>
|
|
<span
|
|
class="relative inline-block shrink-0"
|
|
>
|
|
<img
|
|
src="https://images.unsplash.com/photo-1463453091185-61582044d556?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
|
alt=""
|
|
class="size-10 rounded-full"
|
|
/>
|
|
<!-- Online: "bg-green-400", Offline: "bg-gray-300" -->
|
|
<span
|
|
aria-hidden="true"
|
|
class="absolute top-0 right-0 block size-2.5 rounded-full bg-gray-300 ring-2 ring-white"
|
|
></span>
|
|
</span>
|
|
<div class="ml-4 truncate">
|
|
<p
|
|
class="truncate text-sm font-medium text-gray-900"
|
|
>
|
|
Floyd Miles
|
|
</p>
|
|
<p
|
|
class="truncate text-sm text-gray-500"
|
|
>
|
|
@floydmiles
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<el-dropdown
|
|
class="relative ml-2 inline-block shrink-0 text-left"
|
|
>
|
|
<button
|
|
class="group relative inline-flex size-8 items-center justify-center rounded-full bg-white focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 focus-visible:outline-hidden"
|
|
>
|
|
<span
|
|
class="absolute -inset-1.5"
|
|
></span>
|
|
<span class="sr-only"
|
|
>Open options menu</span
|
|
>
|
|
<span
|
|
class="flex size-full items-center justify-center rounded-full"
|
|
>
|
|
<svg
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
data-slot="icon"
|
|
aria-hidden="true"
|
|
class="size-5 text-gray-400 group-hover:text-gray-500"
|
|
>
|
|
<path
|
|
d="M10 3a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM10 8.5a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM11.5 15.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0Z"
|
|
/>
|
|
</svg>
|
|
</span>
|
|
</button>
|
|
<el-menu
|
|
anchor="left start"
|
|
popover
|
|
class="w-48 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black/5 transition transition-discrete [--anchor-gap:--spacing(1)] focus-visible:outline-hidden data-closed:scale-95 data-closed:transform data-closed:opacity-0 data-enter:duration-100 data-enter:ease-out data-leave:duration-75 data-leave:ease-in"
|
|
>
|
|
<div class="py-1">
|
|
<a
|
|
href="#"
|
|
class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:text-gray-900 focus:outline-hidden"
|
|
>View profile</a
|
|
>
|
|
<a
|
|
href="#"
|
|
class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:text-gray-900 focus:outline-hidden"
|
|
>Send message</a
|
|
>
|
|
</div>
|
|
</el-menu>
|
|
</el-dropdown>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div
|
|
class="group relative flex items-center px-5 py-6"
|
|
>
|
|
<a href="#" class="-m-1 block flex-1 p-1">
|
|
<div
|
|
aria-hidden="true"
|
|
class="absolute inset-0 group-hover:bg-gray-50"
|
|
></div>
|
|
<div
|
|
class="relative flex min-w-0 flex-1 items-center"
|
|
>
|
|
<span
|
|
class="relative inline-block shrink-0"
|
|
>
|
|
<img
|
|
src="https://images.unsplash.com/photo-1502685104226-ee32379fefbe?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
|
alt=""
|
|
class="size-10 rounded-full"
|
|
/>
|
|
<!-- Online: "bg-green-400", Offline: "bg-gray-300" -->
|
|
<span
|
|
aria-hidden="true"
|
|
class="absolute top-0 right-0 block size-2.5 rounded-full bg-green-400 ring-2 ring-white"
|
|
></span>
|
|
</span>
|
|
<div class="ml-4 truncate">
|
|
<p
|
|
class="truncate text-sm font-medium text-gray-900"
|
|
>
|
|
Emily Selman
|
|
</p>
|
|
<p
|
|
class="truncate text-sm text-gray-500"
|
|
>
|
|
@emilyselman
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<el-dropdown
|
|
class="relative ml-2 inline-block shrink-0 text-left"
|
|
>
|
|
<button
|
|
class="group relative inline-flex size-8 items-center justify-center rounded-full bg-white focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 focus-visible:outline-hidden"
|
|
>
|
|
<span
|
|
class="absolute -inset-1.5"
|
|
></span>
|
|
<span class="sr-only"
|
|
>Open options menu</span
|
|
>
|
|
<span
|
|
class="flex size-full items-center justify-center rounded-full"
|
|
>
|
|
<svg
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
data-slot="icon"
|
|
aria-hidden="true"
|
|
class="size-5 text-gray-400 group-hover:text-gray-500"
|
|
>
|
|
<path
|
|
d="M10 3a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM10 8.5a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM11.5 15.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0Z"
|
|
/>
|
|
</svg>
|
|
</span>
|
|
</button>
|
|
<el-menu
|
|
anchor="left start"
|
|
popover
|
|
class="w-48 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black/5 transition transition-discrete [--anchor-gap:--spacing(1)] focus-visible:outline-hidden data-closed:scale-95 data-closed:transform data-closed:opacity-0 data-enter:duration-100 data-enter:ease-out data-leave:duration-75 data-leave:ease-in"
|
|
>
|
|
<div class="py-1">
|
|
<a
|
|
href="#"
|
|
class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:text-gray-900 focus:outline-hidden"
|
|
>View profile</a
|
|
>
|
|
<a
|
|
href="#"
|
|
class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:text-gray-900 focus:outline-hidden"
|
|
>Send message</a
|
|
>
|
|
</div>
|
|
</el-menu>
|
|
</el-dropdown>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div
|
|
class="group relative flex items-center px-5 py-6"
|
|
>
|
|
<a href="#" class="-m-1 block flex-1 p-1">
|
|
<div
|
|
aria-hidden="true"
|
|
class="absolute inset-0 group-hover:bg-gray-50"
|
|
></div>
|
|
<div
|
|
class="relative flex min-w-0 flex-1 items-center"
|
|
>
|
|
<span
|
|
class="relative inline-block shrink-0"
|
|
>
|
|
<img
|
|
src="https://images.unsplash.com/photo-1500917293891-ef795e70e1f6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
|
alt=""
|
|
class="size-10 rounded-full"
|
|
/>
|
|
<!-- Online: "bg-green-400", Offline: "bg-gray-300" -->
|
|
<span
|
|
aria-hidden="true"
|
|
class="absolute top-0 right-0 block size-2.5 rounded-full bg-gray-300 ring-2 ring-white"
|
|
></span>
|
|
</span>
|
|
<div class="ml-4 truncate">
|
|
<p
|
|
class="truncate text-sm font-medium text-gray-900"
|
|
>
|
|
Kristin Watson
|
|
</p>
|
|
<p
|
|
class="truncate text-sm text-gray-500"
|
|
>
|
|
@kristinwatson
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<el-dropdown
|
|
class="relative ml-2 inline-block shrink-0 text-left"
|
|
>
|
|
<button
|
|
class="group relative inline-flex size-8 items-center justify-center rounded-full bg-white focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 focus-visible:outline-hidden"
|
|
>
|
|
<span
|
|
class="absolute -inset-1.5"
|
|
></span>
|
|
<span class="sr-only"
|
|
>Open options menu</span
|
|
>
|
|
<span
|
|
class="flex size-full items-center justify-center rounded-full"
|
|
>
|
|
<svg
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
data-slot="icon"
|
|
aria-hidden="true"
|
|
class="size-5 text-gray-400 group-hover:text-gray-500"
|
|
>
|
|
<path
|
|
d="M10 3a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM10 8.5a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM11.5 15.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0Z"
|
|
/>
|
|
</svg>
|
|
</span>
|
|
</button>
|
|
<el-menu
|
|
anchor="left start"
|
|
popover
|
|
class="w-48 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black/5 transition transition-discrete [--anchor-gap:--spacing(1)] focus-visible:outline-hidden data-closed:scale-95 data-closed:transform data-closed:opacity-0 data-enter:duration-100 data-enter:ease-out data-leave:duration-75 data-leave:ease-in"
|
|
>
|
|
<div class="py-1">
|
|
<a
|
|
href="#"
|
|
class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:text-gray-900 focus:outline-hidden"
|
|
>View profile</a
|
|
>
|
|
<a
|
|
href="#"
|
|
class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:text-gray-900 focus:outline-hidden"
|
|
>Send message</a
|
|
>
|
|
</div>
|
|
</el-menu>
|
|
</el-dropdown>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div
|
|
class="group relative flex items-center px-5 py-6"
|
|
>
|
|
<a href="#" class="-m-1 block flex-1 p-1">
|
|
<div
|
|
aria-hidden="true"
|
|
class="absolute inset-0 group-hover:bg-gray-50"
|
|
></div>
|
|
<div
|
|
class="relative flex min-w-0 flex-1 items-center"
|
|
>
|
|
<span
|
|
class="relative inline-block shrink-0"
|
|
>
|
|
<img
|
|
src="https://images.unsplash.com/photo-1505840717430-882ce147ef2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
|
alt=""
|
|
class="size-10 rounded-full"
|
|
/>
|
|
<!-- Online: "bg-green-400", Offline: "bg-gray-300" -->
|
|
<span
|
|
aria-hidden="true"
|
|
class="absolute top-0 right-0 block size-2.5 rounded-full bg-gray-300 ring-2 ring-white"
|
|
></span>
|
|
</span>
|
|
<div class="ml-4 truncate">
|
|
<p
|
|
class="truncate text-sm font-medium text-gray-900"
|
|
>
|
|
Emma Dorsey
|
|
</p>
|
|
<p
|
|
class="truncate text-sm text-gray-500"
|
|
>
|
|
@emmadorsey
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<el-dropdown
|
|
class="relative ml-2 inline-block shrink-0 text-left"
|
|
>
|
|
<button
|
|
class="group relative inline-flex size-8 items-center justify-center rounded-full bg-white focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 focus-visible:outline-hidden"
|
|
>
|
|
<span
|
|
class="absolute -inset-1.5"
|
|
></span>
|
|
<span class="sr-only"
|
|
>Open options menu</span
|
|
>
|
|
<span
|
|
class="flex size-full items-center justify-center rounded-full"
|
|
>
|
|
<svg
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
data-slot="icon"
|
|
aria-hidden="true"
|
|
class="size-5 text-gray-400 group-hover:text-gray-500"
|
|
>
|
|
<path
|
|
d="M10 3a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM10 8.5a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM11.5 15.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0Z"
|
|
/>
|
|
</svg>
|
|
</span>
|
|
</button>
|
|
<el-menu
|
|
anchor="left start"
|
|
popover
|
|
class="w-48 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black/5 transition transition-discrete [--anchor-gap:--spacing(1)] focus-visible:outline-hidden data-closed:scale-95 data-closed:transform data-closed:opacity-0 data-enter:duration-100 data-enter:ease-out data-leave:duration-75 data-leave:ease-in"
|
|
>
|
|
<div class="py-1">
|
|
<a
|
|
href="#"
|
|
class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:text-gray-900 focus:outline-hidden"
|
|
>View profile</a
|
|
>
|
|
<a
|
|
href="#"
|
|
class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:text-gray-900 focus:outline-hidden"
|
|
>Send message</a
|
|
>
|
|
</div>
|
|
</el-menu>
|
|
</el-dropdown>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div
|
|
class="group relative flex items-center px-5 py-6"
|
|
>
|
|
<a href="#" class="-m-1 block flex-1 p-1">
|
|
<div
|
|
aria-hidden="true"
|
|
class="absolute inset-0 group-hover:bg-gray-50"
|
|
></div>
|
|
<div
|
|
class="relative flex min-w-0 flex-1 items-center"
|
|
>
|
|
<span
|
|
class="relative inline-block shrink-0"
|
|
>
|
|
<img
|
|
src="https://images.unsplash.com/photo-1509783236416-c9ad59bae472?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
|
alt=""
|
|
class="size-10 rounded-full"
|
|
/>
|
|
<!-- Online: "bg-green-400", Offline: "bg-gray-300" -->
|
|
<span
|
|
aria-hidden="true"
|
|
class="absolute top-0 right-0 block size-2.5 rounded-full bg-green-400 ring-2 ring-white"
|
|
></span>
|
|
</span>
|
|
<div class="ml-4 truncate">
|
|
<p
|
|
class="truncate text-sm font-medium text-gray-900"
|
|
>
|
|
Alicia Bell
|
|
</p>
|
|
<p
|
|
class="truncate text-sm text-gray-500"
|
|
>
|
|
@aliciabell
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<el-dropdown
|
|
class="relative ml-2 inline-block shrink-0 text-left"
|
|
>
|
|
<button
|
|
class="group relative inline-flex size-8 items-center justify-center rounded-full bg-white focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 focus-visible:outline-hidden"
|
|
>
|
|
<span
|
|
class="absolute -inset-1.5"
|
|
></span>
|
|
<span class="sr-only"
|
|
>Open options menu</span
|
|
>
|
|
<span
|
|
class="flex size-full items-center justify-center rounded-full"
|
|
>
|
|
<svg
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
data-slot="icon"
|
|
aria-hidden="true"
|
|
class="size-5 text-gray-400 group-hover:text-gray-500"
|
|
>
|
|
<path
|
|
d="M10 3a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM10 8.5a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM11.5 15.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0Z"
|
|
/>
|
|
</svg>
|
|
</span>
|
|
</button>
|
|
<el-menu
|
|
anchor="left start"
|
|
popover
|
|
class="w-48 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black/5 transition transition-discrete [--anchor-gap:--spacing(1)] focus-visible:outline-hidden data-closed:scale-95 data-closed:transform data-closed:opacity-0 data-enter:duration-100 data-enter:ease-out data-leave:duration-75 data-leave:ease-in"
|
|
>
|
|
<div class="py-1">
|
|
<a
|
|
href="#"
|
|
class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:text-gray-900 focus:outline-hidden"
|
|
>View profile</a
|
|
>
|
|
<a
|
|
href="#"
|
|
class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:text-gray-900 focus:outline-hidden"
|
|
>Send message</a
|
|
>
|
|
</div>
|
|
</el-menu>
|
|
</el-dropdown>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div
|
|
class="group relative flex items-center px-5 py-6"
|
|
>
|
|
<a href="#" class="-m-1 block flex-1 p-1">
|
|
<div
|
|
aria-hidden="true"
|
|
class="absolute inset-0 group-hover:bg-gray-50"
|
|
></div>
|
|
<div
|
|
class="relative flex min-w-0 flex-1 items-center"
|
|
>
|
|
<span
|
|
class="relative inline-block shrink-0"
|
|
>
|
|
<img
|
|
src="https://images.unsplash.com/photo-1507101105822-7472b28e22ac?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
|
alt=""
|
|
class="size-10 rounded-full"
|
|
/>
|
|
<!-- Online: "bg-green-400", Offline: "bg-gray-300" -->
|
|
<span
|
|
aria-hidden="true"
|
|
class="absolute top-0 right-0 block size-2.5 rounded-full bg-green-400 ring-2 ring-white"
|
|
></span>
|
|
</span>
|
|
<div class="ml-4 truncate">
|
|
<p
|
|
class="truncate text-sm font-medium text-gray-900"
|
|
>
|
|
Jenny Wilson
|
|
</p>
|
|
<p
|
|
class="truncate text-sm text-gray-500"
|
|
>
|
|
@jennywilson
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<el-dropdown
|
|
class="relative ml-2 inline-block shrink-0 text-left"
|
|
>
|
|
<button
|
|
class="group relative inline-flex size-8 items-center justify-center rounded-full bg-white focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 focus-visible:outline-hidden"
|
|
>
|
|
<span
|
|
class="absolute -inset-1.5"
|
|
></span>
|
|
<span class="sr-only"
|
|
>Open options menu</span
|
|
>
|
|
<span
|
|
class="flex size-full items-center justify-center rounded-full"
|
|
>
|
|
<svg
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
data-slot="icon"
|
|
aria-hidden="true"
|
|
class="size-5 text-gray-400 group-hover:text-gray-500"
|
|
>
|
|
<path
|
|
d="M10 3a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM10 8.5a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM11.5 15.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0Z"
|
|
/>
|
|
</svg>
|
|
</span>
|
|
</button>
|
|
<el-menu
|
|
anchor="left start"
|
|
popover
|
|
class="w-48 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black/5 transition transition-discrete [--anchor-gap:--spacing(1)] focus-visible:outline-hidden data-closed:scale-95 data-closed:transform data-closed:opacity-0 data-enter:duration-100 data-enter:ease-out data-leave:duration-75 data-leave:ease-in"
|
|
>
|
|
<div class="py-1">
|
|
<a
|
|
href="#"
|
|
class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:text-gray-900 focus:outline-hidden"
|
|
>View profile</a
|
|
>
|
|
<a
|
|
href="#"
|
|
class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:text-gray-900 focus:outline-hidden"
|
|
>Send message</a
|
|
>
|
|
</div>
|
|
</el-menu>
|
|
</el-dropdown>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div
|
|
class="group relative flex items-center px-5 py-6"
|
|
>
|
|
<a href="#" class="-m-1 block flex-1 p-1">
|
|
<div
|
|
aria-hidden="true"
|
|
class="absolute inset-0 group-hover:bg-gray-50"
|
|
></div>
|
|
<div
|
|
class="relative flex min-w-0 flex-1 items-center"
|
|
>
|
|
<span
|
|
class="relative inline-block shrink-0"
|
|
>
|
|
<img
|
|
src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
|
alt=""
|
|
class="size-10 rounded-full"
|
|
/>
|
|
<!-- Online: "bg-green-400", Offline: "bg-gray-300" -->
|
|
<span
|
|
aria-hidden="true"
|
|
class="absolute top-0 right-0 block size-2.5 rounded-full bg-gray-300 ring-2 ring-white"
|
|
></span>
|
|
</span>
|
|
<div class="ml-4 truncate">
|
|
<p
|
|
class="truncate text-sm font-medium text-gray-900"
|
|
>
|
|
Anna Roberts
|
|
</p>
|
|
<p
|
|
class="truncate text-sm text-gray-500"
|
|
>
|
|
@annaroberts
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<el-dropdown
|
|
class="relative ml-2 inline-block shrink-0 text-left"
|
|
>
|
|
<button
|
|
class="group relative inline-flex size-8 items-center justify-center rounded-full bg-white focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 focus-visible:outline-hidden"
|
|
>
|
|
<span
|
|
class="absolute -inset-1.5"
|
|
></span>
|
|
<span class="sr-only"
|
|
>Open options menu</span
|
|
>
|
|
<span
|
|
class="flex size-full items-center justify-center rounded-full"
|
|
>
|
|
<svg
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
data-slot="icon"
|
|
aria-hidden="true"
|
|
class="size-5 text-gray-400 group-hover:text-gray-500"
|
|
>
|
|
<path
|
|
d="M10 3a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM10 8.5a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM11.5 15.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0Z"
|
|
/>
|
|
</svg>
|
|
</span>
|
|
</button>
|
|
<el-menu
|
|
anchor="left start"
|
|
popover
|
|
class="w-48 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black/5 transition transition-discrete [--anchor-gap:--spacing(1)] focus-visible:outline-hidden data-closed:scale-95 data-closed:transform data-closed:opacity-0 data-enter:duration-100 data-enter:ease-out data-leave:duration-75 data-leave:ease-in"
|
|
>
|
|
<div class="py-1">
|
|
<a
|
|
href="#"
|
|
class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:text-gray-900 focus:outline-hidden"
|
|
>View profile</a
|
|
>
|
|
<a
|
|
href="#"
|
|
class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:text-gray-900 focus:outline-hidden"
|
|
>Send message</a
|
|
>
|
|
</div>
|
|
</el-menu>
|
|
</el-dropdown>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div
|
|
class="group relative flex items-center px-5 py-6"
|
|
>
|
|
<a href="#" class="-m-1 block flex-1 p-1">
|
|
<div
|
|
aria-hidden="true"
|
|
class="absolute inset-0 group-hover:bg-gray-50"
|
|
></div>
|
|
<div
|
|
class="relative flex min-w-0 flex-1 items-center"
|
|
>
|
|
<span
|
|
class="relative inline-block shrink-0"
|
|
>
|
|
<img
|
|
src="https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
|
alt=""
|
|
class="size-10 rounded-full"
|
|
/>
|
|
<!-- Online: "bg-green-400", Offline: "bg-gray-300" -->
|
|
<span
|
|
aria-hidden="true"
|
|
class="absolute top-0 right-0 block size-2.5 rounded-full bg-green-400 ring-2 ring-white"
|
|
></span>
|
|
</span>
|
|
<div class="ml-4 truncate">
|
|
<p
|
|
class="truncate text-sm font-medium text-gray-900"
|
|
>
|
|
Benjamin Russel
|
|
</p>
|
|
<p
|
|
class="truncate text-sm text-gray-500"
|
|
>
|
|
@benjaminrussel
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<el-dropdown
|
|
class="relative ml-2 inline-block shrink-0 text-left"
|
|
>
|
|
<button
|
|
class="group relative inline-flex size-8 items-center justify-center rounded-full bg-white focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 focus-visible:outline-hidden"
|
|
>
|
|
<span
|
|
class="absolute -inset-1.5"
|
|
></span>
|
|
<span class="sr-only"
|
|
>Open options menu</span
|
|
>
|
|
<span
|
|
class="flex size-full items-center justify-center rounded-full"
|
|
>
|
|
<svg
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
data-slot="icon"
|
|
aria-hidden="true"
|
|
class="size-5 text-gray-400 group-hover:text-gray-500"
|
|
>
|
|
<path
|
|
d="M10 3a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM10 8.5a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM11.5 15.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0Z"
|
|
/>
|
|
</svg>
|
|
</span>
|
|
</button>
|
|
<el-menu
|
|
anchor="left start"
|
|
popover
|
|
class="w-48 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black/5 transition transition-discrete [--anchor-gap:--spacing(1)] focus-visible:outline-hidden data-closed:scale-95 data-closed:transform data-closed:opacity-0 data-enter:duration-100 data-enter:ease-out data-leave:duration-75 data-leave:ease-in"
|
|
>
|
|
<div class="py-1">
|
|
<a
|
|
href="#"
|
|
class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:text-gray-900 focus:outline-hidden"
|
|
>View profile</a
|
|
>
|
|
<a
|
|
href="#"
|
|
class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:text-gray-900 focus:outline-hidden"
|
|
>Send message</a
|
|
>
|
|
</div>
|
|
</el-menu>
|
|
</el-dropdown>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div
|
|
class="group relative flex items-center px-5 py-6"
|
|
>
|
|
<a href="#" class="-m-1 block flex-1 p-1">
|
|
<div
|
|
aria-hidden="true"
|
|
class="absolute inset-0 group-hover:bg-gray-50"
|
|
></div>
|
|
<div
|
|
class="relative flex min-w-0 flex-1 items-center"
|
|
>
|
|
<span
|
|
class="relative inline-block shrink-0"
|
|
>
|
|
<img
|
|
src="https://images.unsplash.com/photo-1517070208541-6ddc4d3efbcb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
|
alt=""
|
|
class="size-10 rounded-full"
|
|
/>
|
|
<!-- Online: "bg-green-400", Offline: "bg-gray-300" -->
|
|
<span
|
|
aria-hidden="true"
|
|
class="absolute top-0 right-0 block size-2.5 rounded-full bg-gray-300 ring-2 ring-white"
|
|
></span>
|
|
</span>
|
|
<div class="ml-4 truncate">
|
|
<p
|
|
class="truncate text-sm font-medium text-gray-900"
|
|
>
|
|
Jeffrey Webb
|
|
</p>
|
|
<p
|
|
class="truncate text-sm text-gray-500"
|
|
>
|
|
@jeffreywebb
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<el-dropdown
|
|
class="relative ml-2 inline-block shrink-0 text-left"
|
|
>
|
|
<button
|
|
class="group relative inline-flex size-8 items-center justify-center rounded-full bg-white focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 focus-visible:outline-hidden"
|
|
>
|
|
<span
|
|
class="absolute -inset-1.5"
|
|
></span>
|
|
<span class="sr-only"
|
|
>Open options menu</span
|
|
>
|
|
<span
|
|
class="flex size-full items-center justify-center rounded-full"
|
|
>
|
|
<svg
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
data-slot="icon"
|
|
aria-hidden="true"
|
|
class="size-5 text-gray-400 group-hover:text-gray-500"
|
|
>
|
|
<path
|
|
d="M10 3a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM10 8.5a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM11.5 15.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0Z"
|
|
/>
|
|
</svg>
|
|
</span>
|
|
</button>
|
|
<el-menu
|
|
anchor="left start"
|
|
popover
|
|
class="w-48 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black/5 transition transition-discrete [--anchor-gap:--spacing(1)] focus-visible:outline-hidden data-closed:scale-95 data-closed:transform data-closed:opacity-0 data-enter:duration-100 data-enter:ease-out data-leave:duration-75 data-leave:ease-in"
|
|
>
|
|
<div class="py-1">
|
|
<a
|
|
href="#"
|
|
class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:text-gray-900 focus:outline-hidden"
|
|
>View profile</a
|
|
>
|
|
<a
|
|
href="#"
|
|
class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:text-gray-900 focus:outline-hidden"
|
|
>Send message</a
|
|
>
|
|
</div>
|
|
</el-menu>
|
|
</el-dropdown>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div
|
|
class="group relative flex items-center px-5 py-6"
|
|
>
|
|
<a href="#" class="-m-1 block flex-1 p-1">
|
|
<div
|
|
aria-hidden="true"
|
|
class="absolute inset-0 group-hover:bg-gray-50"
|
|
></div>
|
|
<div
|
|
class="relative flex min-w-0 flex-1 items-center"
|
|
>
|
|
<span
|
|
class="relative inline-block shrink-0"
|
|
>
|
|
<img
|
|
src="https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
|
alt=""
|
|
class="size-10 rounded-full"
|
|
/>
|
|
<!-- Online: "bg-green-400", Offline: "bg-gray-300" -->
|
|
<span
|
|
aria-hidden="true"
|
|
class="absolute top-0 right-0 block size-2.5 rounded-full bg-gray-300 ring-2 ring-white"
|
|
></span>
|
|
</span>
|
|
<div class="ml-4 truncate">
|
|
<p
|
|
class="truncate text-sm font-medium text-gray-900"
|
|
>
|
|
Kathryn Murphy
|
|
</p>
|
|
<p
|
|
class="truncate text-sm text-gray-500"
|
|
>
|
|
@kathrynmurphy
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<el-dropdown
|
|
class="relative ml-2 inline-block shrink-0 text-left"
|
|
>
|
|
<button
|
|
class="group relative inline-flex size-8 items-center justify-center rounded-full bg-white focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 focus-visible:outline-hidden"
|
|
>
|
|
<span
|
|
class="absolute -inset-1.5"
|
|
></span>
|
|
<span class="sr-only"
|
|
>Open options menu</span
|
|
>
|
|
<span
|
|
class="flex size-full items-center justify-center rounded-full"
|
|
>
|
|
<svg
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
data-slot="icon"
|
|
aria-hidden="true"
|
|
class="size-5 text-gray-400 group-hover:text-gray-500"
|
|
>
|
|
<path
|
|
d="M10 3a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM10 8.5a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM11.5 15.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0Z"
|
|
/>
|
|
</svg>
|
|
</span>
|
|
</button>
|
|
<el-menu
|
|
anchor="left start"
|
|
popover
|
|
class="w-48 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black/5 transition transition-discrete [--anchor-gap:--spacing(1)] focus-visible:outline-hidden data-closed:scale-95 data-closed:transform data-closed:opacity-0 data-enter:duration-100 data-enter:ease-out data-leave:duration-75 data-leave:ease-in"
|
|
>
|
|
<div class="py-1">
|
|
<a
|
|
href="#"
|
|
class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:text-gray-900 focus:outline-hidden"
|
|
>View profile</a
|
|
>
|
|
<a
|
|
href="#"
|
|
class="block px-4 py-2 text-sm text-gray-700 focus:bg-gray-100 focus:text-gray-900 focus:outline-hidden"
|
|
>Send message</a
|
|
>
|
|
</div>
|
|
</el-menu>
|
|
</el-dropdown>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</el-dialog-panel>
|
|
</div>
|
|
</dialog>
|
|
</el-dialog>
|