1520 lines
67 KiB
HTML
1520 lines
67 KiB
HTML
|
<body
|
||
|
|
class="bg-background font-geist-sans text-sm text-foreground"
|
||
|
|
data-sveltekit-preload-data="hover"
|
||
|
|
>
|
||
|
|
<div style="display: contents">
|
||
|
|
<!----><!----><!----><!---->
|
||
|
|
<div class="hidden divide-x divide-border xl:flex">
|
||
|
|
<div class="w-72">
|
||
|
|
<div
|
||
|
|
class="flex h-14 items-center justify-center border-b border-border px-4 py-2"
|
||
|
|
>
|
||
|
|
<div class="h-10 flex-1">
|
||
|
|
<uk-select
|
||
|
|
><select hidden="">
|
||
|
|
<option data-icon="user" selected="">alicia@example.com</option>
|
||
|
|
<option data-icon="user">alicia@yahoo.com</option>
|
||
|
|
<option data-icon="user">alicia@cloud.com</option></select
|
||
|
|
><!---->
|
||
|
|
<div class="uk-position-relative">
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
class="uk-input-fake w-full flex justify-between items-center"
|
||
|
|
aria-haspopup="true"
|
||
|
|
>
|
||
|
|
<!--?lit$383522438$-->alicia@example.com
|
||
|
|
<!--?lit$383522438$-->
|
||
|
|
<uk-icon class="" icon="chevrons-up-down"
|
||
|
|
><!----><svg
|
||
|
|
xmlns="http://www.w3.org/2000/svg"
|
||
|
|
width="16"
|
||
|
|
height="16"
|
||
|
|
viewBox="0 0 24 24"
|
||
|
|
fill="none"
|
||
|
|
stroke="currentColor"
|
||
|
|
stroke-width="2"
|
||
|
|
stroke-linecap="round"
|
||
|
|
stroke-linejoin="round"
|
||
|
|
class=""
|
||
|
|
>
|
||
|
|
<path d="m7 15 5 5 5-5"></path>
|
||
|
|
<path d="m7 9 5-5 5 5"></path></svg
|
||
|
|
></uk-icon>
|
||
|
|
</button>
|
||
|
|
<div
|
||
|
|
class="uk-drop uk-dropdown w-full"
|
||
|
|
uk-dropdown="mode: click"
|
||
|
|
>
|
||
|
|
<!--?lit$383522438$-->
|
||
|
|
<!--?lit$383522438$-->
|
||
|
|
<ul
|
||
|
|
tabindex="-1"
|
||
|
|
class="uk-nav uk-dropdown-nav uk-overflow-auto uk-cs-options"
|
||
|
|
>
|
||
|
|
<!--?lit$383522438$--><!---->
|
||
|
|
<!--?lit$383522438$-->
|
||
|
|
<!--?lit$383522438$--><!---->
|
||
|
|
<li class="uk-active">
|
||
|
|
<a tabindex="-1" class="uk-drop-close">
|
||
|
|
<div class="uk-cs-item-wrapper">
|
||
|
|
<!--?lit$383522438$-->
|
||
|
|
<uk-icon class="uk-cs-item-icon" icon="user"
|
||
|
|
><!----><svg
|
||
|
|
xmlns="http://www.w3.org/2000/svg"
|
||
|
|
width="16"
|
||
|
|
height="16"
|
||
|
|
viewBox="0 0 24 24"
|
||
|
|
fill="none"
|
||
|
|
stroke="currentColor"
|
||
|
|
stroke-width="2"
|
||
|
|
stroke-linecap="round"
|
||
|
|
stroke-linejoin="round"
|
||
|
|
class=""
|
||
|
|
>
|
||
|
|
<path
|
||
|
|
d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"
|
||
|
|
></path>
|
||
|
|
<circle cx="12" cy="7" r="4"></circle></svg
|
||
|
|
></uk-icon>
|
||
|
|
|
||
|
|
<!--?lit$383522438$--><span class="uk-cs-item-text"
|
||
|
|
><!--?lit$383522438$-->alicia@example.com</span
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
<!--?lit$383522438$--><uk-icon
|
||
|
|
class="uk-cs-check"
|
||
|
|
icon="check"
|
||
|
|
><!----><svg
|
||
|
|
xmlns="http://www.w3.org/2000/svg"
|
||
|
|
width="16"
|
||
|
|
height="16"
|
||
|
|
viewBox="0 0 24 24"
|
||
|
|
fill="none"
|
||
|
|
stroke="currentColor"
|
||
|
|
stroke-width="2"
|
||
|
|
stroke-linecap="round"
|
||
|
|
stroke-linejoin="round"
|
||
|
|
class=""
|
||
|
|
>
|
||
|
|
<path d="M20 6 9 17l-5-5"></path></svg
|
||
|
|
></uk-icon>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<!----><!---->
|
||
|
|
<li class="">
|
||
|
|
<a tabindex="-1" class="uk-drop-close">
|
||
|
|
<div class="uk-cs-item-wrapper">
|
||
|
|
<!--?lit$383522438$-->
|
||
|
|
<uk-icon class="uk-cs-item-icon" icon="user"
|
||
|
|
><!----><svg
|
||
|
|
xmlns="http://www.w3.org/2000/svg"
|
||
|
|
width="16"
|
||
|
|
height="16"
|
||
|
|
viewBox="0 0 24 24"
|
||
|
|
fill="none"
|
||
|
|
stroke="currentColor"
|
||
|
|
stroke-width="2"
|
||
|
|
stroke-linecap="round"
|
||
|
|
stroke-linejoin="round"
|
||
|
|
class=""
|
||
|
|
>
|
||
|
|
<path
|
||
|
|
d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"
|
||
|
|
></path>
|
||
|
|
<circle cx="12" cy="7" r="4"></circle></svg
|
||
|
|
></uk-icon>
|
||
|
|
|
||
|
|
<!--?lit$383522438$--><span class="uk-cs-item-text"
|
||
|
|
><!--?lit$383522438$-->alicia@yahoo.com</span
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
<!--?lit$383522438$-->
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<!----><!---->
|
||
|
|
<li class="">
|
||
|
|
<a tabindex="-1" class="uk-drop-close">
|
||
|
|
<div class="uk-cs-item-wrapper">
|
||
|
|
<!--?lit$383522438$-->
|
||
|
|
<uk-icon class="uk-cs-item-icon" icon="user"
|
||
|
|
><!----><svg
|
||
|
|
xmlns="http://www.w3.org/2000/svg"
|
||
|
|
width="16"
|
||
|
|
height="16"
|
||
|
|
viewBox="0 0 24 24"
|
||
|
|
fill="none"
|
||
|
|
stroke="currentColor"
|
||
|
|
stroke-width="2"
|
||
|
|
stroke-linecap="round"
|
||
|
|
stroke-linejoin="round"
|
||
|
|
class=""
|
||
|
|
>
|
||
|
|
<path
|
||
|
|
d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"
|
||
|
|
></path>
|
||
|
|
<circle cx="12" cy="7" r="4"></circle></svg
|
||
|
|
></uk-icon>
|
||
|
|
|
||
|
|
<!--?lit$383522438$--><span class="uk-cs-item-text"
|
||
|
|
><!--?lit$383522438$-->alicia@cloud.com</span
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
<!--?lit$383522438$-->
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<!---->
|
||
|
|
<!---->
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<!--?lit$383522438$-->
|
||
|
|
</div>
|
||
|
|
</uk-select>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="p-1">
|
||
|
|
<ul class="uk-nav uk-nav-primary">
|
||
|
|
<li class="uk-active">
|
||
|
|
<a class="flex justify-between" href="#"
|
||
|
|
><div class="flex flex-1 items-center gap-x-2">
|
||
|
|
<span class="size-4"
|
||
|
|
><uk-icon
|
||
|
|
><!----><svg
|
||
|
|
xmlns="http://www.w3.org/2000/svg"
|
||
|
|
width="16"
|
||
|
|
height="16"
|
||
|
|
viewBox="0 0 24 24"
|
||
|
|
fill="none"
|
||
|
|
stroke="currentColor"
|
||
|
|
stroke-width="2"
|
||
|
|
stroke-linecap="round"
|
||
|
|
stroke-linejoin="round"
|
||
|
|
class=""
|
||
|
|
>
|
||
|
|
<polyline
|
||
|
|
points="22 12 16 12 14 15 10 15 8 12 2 12"
|
||
|
|
></polyline>
|
||
|
|
<path
|
||
|
|
d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"
|
||
|
|
></path></svg></uk-icon
|
||
|
|
></span>
|
||
|
|
<span>Inbox</span>
|
||
|
|
</div>
|
||
|
|
<span>128</span
|
||
|
|
><!----></a
|
||
|
|
>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a class="flex justify-between" href="#"
|
||
|
|
><div class="flex flex-1 items-center gap-x-2">
|
||
|
|
<span class="size-4"
|
||
|
|
><uk-icon
|
||
|
|
><!----><svg
|
||
|
|
xmlns="http://www.w3.org/2000/svg"
|
||
|
|
width="16"
|
||
|
|
height="16"
|
||
|
|
viewBox="0 0 24 24"
|
||
|
|
fill="none"
|
||
|
|
stroke="currentColor"
|
||
|
|
stroke-width="2"
|
||
|
|
stroke-linecap="round"
|
||
|
|
stroke-linejoin="round"
|
||
|
|
class=""
|
||
|
|
>
|
||
|
|
<path
|
||
|
|
d="M16 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V8Z"
|
||
|
|
></path>
|
||
|
|
<path d="M15 3v4a2 2 0 0 0 2 2h4"></path></svg></uk-icon
|
||
|
|
></span>
|
||
|
|
<span>Draft</span>
|
||
|
|
</div>
|
||
|
|
<span>9</span
|
||
|
|
><!----></a
|
||
|
|
>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a class="flex justify-between" href="#"
|
||
|
|
><div class="flex flex-1 items-center gap-x-2">
|
||
|
|
<span class="size-4"
|
||
|
|
><uk-icon
|
||
|
|
><!----><svg
|
||
|
|
xmlns="http://www.w3.org/2000/svg"
|
||
|
|
width="16"
|
||
|
|
height="16"
|
||
|
|
viewBox="0 0 24 24"
|
||
|
|
fill="none"
|
||
|
|
stroke="currentColor"
|
||
|
|
stroke-width="2"
|
||
|
|
stroke-linecap="round"
|
||
|
|
stroke-linejoin="round"
|
||
|
|
class=""
|
||
|
|
>
|
||
|
|
<path d="m22 2-7 20-4-9-9-4Z"></path>
|
||
|
|
<path d="M22 2 11 13"></path></svg></uk-icon
|
||
|
|
></span>
|
||
|
|
<span>Sent</span>
|
||
|
|
</div>
|
||
|
|
<!----></a
|
||
|
|
>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a class="flex justify-between" href="#"
|
||
|
|
><div class="flex flex-1 items-center gap-x-2">
|
||
|
|
<span class="size-4"
|
||
|
|
><uk-icon
|
||
|
|
><!----><svg
|
||
|
|
xmlns="http://www.w3.org/2000/svg"
|
||
|
|
width="16"
|
||
|
|
height="16"
|
||
|
|
viewBox="0 0 24 24"
|
||
|
|
fill="none"
|
||
|
|
stroke="currentColor"
|
||
|
|
stroke-width="2"
|
||
|
|
stroke-linecap="round"
|
||
|
|
stroke-linejoin="round"
|
||
|
|
class=""
|
||
|
|
>
|
||
|
|
<rect width="20" height="5" x="2" y="3" rx="1"></rect>
|
||
|
|
<path
|
||
|
|
d="M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8"
|
||
|
|
></path>
|
||
|
|
<path d="m9.5 17 5-5"></path>
|
||
|
|
<path d="m9.5 12 5 5"></path></svg></uk-icon
|
||
|
|
></span>
|
||
|
|
<span>Junk</span>
|
||
|
|
</div>
|
||
|
|
<span>23</span
|
||
|
|
><!----></a
|
||
|
|
>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a class="flex justify-between" href="#"
|
||
|
|
><div class="flex flex-1 items-center gap-x-2">
|
||
|
|
<span class="size-4"
|
||
|
|
><uk-icon
|
||
|
|
><!----><svg
|
||
|
|
xmlns="http://www.w3.org/2000/svg"
|
||
|
|
width="16"
|
||
|
|
height="16"
|
||
|
|
viewBox="0 0 24 24"
|
||
|
|
fill="none"
|
||
|
|
stroke="currentColor"
|
||
|
|
stroke-width="2"
|
||
|
|
stroke-linecap="round"
|
||
|
|
stroke-linejoin="round"
|
||
|
|
class=""
|
||
|
|
>
|
||
|
|
<path d="M3 6h18"></path>
|
||
|
|
<path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path>
|
||
|
|
<path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"></path>
|
||
|
|
<line x1="10" x2="10" y1="11" y2="17"></line>
|
||
|
|
<line
|
||
|
|
x1="14"
|
||
|
|
x2="14"
|
||
|
|
y1="11"
|
||
|
|
y2="17"
|
||
|
|
></line></svg></uk-icon
|
||
|
|
></span>
|
||
|
|
<span>Trash</span>
|
||
|
|
</div>
|
||
|
|
<!----></a
|
||
|
|
>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a class="flex justify-between" href="#"
|
||
|
|
><div class="flex flex-1 items-center gap-x-2">
|
||
|
|
<span class="size-4"
|
||
|
|
><uk-icon
|
||
|
|
><!----><svg
|
||
|
|
xmlns="http://www.w3.org/2000/svg"
|
||
|
|
width="16"
|
||
|
|
height="16"
|
||
|
|
viewBox="0 0 24 24"
|
||
|
|
fill="none"
|
||
|
|
stroke="currentColor"
|
||
|
|
stroke-width="2"
|
||
|
|
stroke-linecap="round"
|
||
|
|
stroke-linejoin="round"
|
||
|
|
class=""
|
||
|
|
>
|
||
|
|
<rect width="20" height="5" x="2" y="3" rx="1"></rect>
|
||
|
|
<path
|
||
|
|
d="M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8"
|
||
|
|
></path>
|
||
|
|
<path d="M10 12h4"></path></svg></uk-icon
|
||
|
|
></span>
|
||
|
|
<span>Archive</span>
|
||
|
|
</div>
|
||
|
|
<!----></a
|
||
|
|
>
|
||
|
|
</li>
|
||
|
|
<!---->
|
||
|
|
<li class="uk-nav-divider -mx-1"></li>
|
||
|
|
<li>
|
||
|
|
<a class="flex justify-between" href="#"
|
||
|
|
><div class="flex flex-1 items-center gap-x-2">
|
||
|
|
<span class="size-4"
|
||
|
|
><uk-icon
|
||
|
|
><!----><svg
|
||
|
|
xmlns="http://www.w3.org/2000/svg"
|
||
|
|
width="16"
|
||
|
|
height="16"
|
||
|
|
viewBox="0 0 24 24"
|
||
|
|
fill="none"
|
||
|
|
stroke="currentColor"
|
||
|
|
stroke-width="2"
|
||
|
|
stroke-linecap="round"
|
||
|
|
stroke-linejoin="round"
|
||
|
|
class=""
|
||
|
|
>
|
||
|
|
<path d="M18 21a8 8 0 0 0-16 0"></path>
|
||
|
|
<circle cx="10" cy="8" r="5"></circle>
|
||
|
|
<path
|
||
|
|
d="M22 20c0-3.37-2-6.5-4-8a5 5 0 0 0-.45-8.3"
|
||
|
|
></path></svg></uk-icon
|
||
|
|
></span>
|
||
|
|
<span>Social</span>
|
||
|
|
</div>
|
||
|
|
<span>972</span
|
||
|
|
><!----></a
|
||
|
|
>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a class="flex justify-between" href="#"
|
||
|
|
><div class="flex flex-1 items-center gap-x-2">
|
||
|
|
<span class="size-4"
|
||
|
|
><uk-icon
|
||
|
|
><!----><svg
|
||
|
|
xmlns="http://www.w3.org/2000/svg"
|
||
|
|
width="16"
|
||
|
|
height="16"
|
||
|
|
viewBox="0 0 24 24"
|
||
|
|
fill="none"
|
||
|
|
stroke="currentColor"
|
||
|
|
stroke-width="2"
|
||
|
|
stroke-linecap="round"
|
||
|
|
stroke-linejoin="round"
|
||
|
|
class=""
|
||
|
|
>
|
||
|
|
<path d="M12 16h.01"></path>
|
||
|
|
<path d="M12 8v4"></path>
|
||
|
|
<path
|
||
|
|
d="M15.312 2a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586l-4.688-4.688A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2z"
|
||
|
|
></path></svg></uk-icon
|
||
|
|
></span>
|
||
|
|
<span>Updates</span>
|
||
|
|
</div>
|
||
|
|
<span>342</span
|
||
|
|
><!----></a
|
||
|
|
>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a class="flex justify-between" href="#"
|
||
|
|
><div class="flex flex-1 items-center gap-x-2">
|
||
|
|
<span class="size-4"
|
||
|
|
><uk-icon
|
||
|
|
><!----><svg
|
||
|
|
xmlns="http://www.w3.org/2000/svg"
|
||
|
|
width="16"
|
||
|
|
height="16"
|
||
|
|
viewBox="0 0 24 24"
|
||
|
|
fill="none"
|
||
|
|
stroke="currentColor"
|
||
|
|
stroke-width="2"
|
||
|
|
stroke-linecap="round"
|
||
|
|
stroke-linejoin="round"
|
||
|
|
class=""
|
||
|
|
>
|
||
|
|
<path
|
||
|
|
d="M14 9a2 2 0 0 1-2 2H6l-4 4V4c0-1.1.9-2 2-2h8a2 2 0 0 1 2 2z"
|
||
|
|
></path>
|
||
|
|
<path
|
||
|
|
d="M18 9h2a2 2 0 0 1 2 2v11l-4-4h-6a2 2 0 0 1-2-2v-1"
|
||
|
|
></path></svg></uk-icon
|
||
|
|
></span>
|
||
|
|
<span>Forums</span>
|
||
|
|
</div>
|
||
|
|
<span>128</span
|
||
|
|
><!----></a
|
||
|
|
>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a class="flex justify-between" href="#"
|
||
|
|
><div class="flex flex-1 items-center gap-x-2">
|
||
|
|
<span class="size-4"
|
||
|
|
><uk-icon
|
||
|
|
><!----><svg
|
||
|
|
xmlns="http://www.w3.org/2000/svg"
|
||
|
|
width="16"
|
||
|
|
height="16"
|
||
|
|
viewBox="0 0 24 24"
|
||
|
|
fill="none"
|
||
|
|
stroke="currentColor"
|
||
|
|
stroke-width="2"
|
||
|
|
stroke-linecap="round"
|
||
|
|
stroke-linejoin="round"
|
||
|
|
class=""
|
||
|
|
>
|
||
|
|
<circle cx="8" cy="21" r="1"></circle>
|
||
|
|
<circle cx="19" cy="21" r="1"></circle>
|
||
|
|
<path
|
||
|
|
d="M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12"
|
||
|
|
></path></svg></uk-icon
|
||
|
|
></span>
|
||
|
|
<span>Shopping</span>
|
||
|
|
</div>
|
||
|
|
<span>8</span
|
||
|
|
><!----></a
|
||
|
|
>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a class="flex justify-between" href="#"
|
||
|
|
><div class="flex flex-1 items-center gap-x-2">
|
||
|
|
<span class="size-4"
|
||
|
|
><uk-icon
|
||
|
|
><!----><svg
|
||
|
|
xmlns="http://www.w3.org/2000/svg"
|
||
|
|
width="16"
|
||
|
|
height="16"
|
||
|
|
viewBox="0 0 24 24"
|
||
|
|
fill="none"
|
||
|
|
stroke="currentColor"
|
||
|
|
stroke-width="2"
|
||
|
|
stroke-linecap="round"
|
||
|
|
stroke-linejoin="round"
|
||
|
|
class=""
|
||
|
|
>
|
||
|
|
<rect width="20" height="5" x="2" y="3" rx="1"></rect>
|
||
|
|
<path
|
||
|
|
d="M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8"
|
||
|
|
></path>
|
||
|
|
<path d="M10 12h4"></path></svg></uk-icon
|
||
|
|
></span>
|
||
|
|
<span>Promotion</span>
|
||
|
|
</div>
|
||
|
|
<span>21</span
|
||
|
|
><!----></a
|
||
|
|
>
|
||
|
|
</li>
|
||
|
|
<!---->
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="grid flex-1 grid-cols-2 divide-x divide-border">
|
||
|
|
<div class="flex flex-col" data-uk-filter="target: .js-filter">
|
||
|
|
<div
|
||
|
|
class="flex h-14 flex-none items-center border-b border-border px-4 py-2"
|
||
|
|
>
|
||
|
|
<h1 class="text-xl font-bold">Inbox</h1>
|
||
|
|
<ul class="uk-tab-alt ml-auto max-w-40">
|
||
|
|
<li class="uk-active" data-uk-filter-control="">
|
||
|
|
<a href="#" role="button">All mail</a>
|
||
|
|
</li>
|
||
|
|
<li data-uk-filter-control="[data-status='unread']">
|
||
|
|
<a href="#" role="button">Unread</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div class="flex flex-1 flex-col">
|
||
|
|
<div class="p-4">
|
||
|
|
<div class="uk-inline w-full">
|
||
|
|
<span class="uk-form-icon text-muted-foreground"
|
||
|
|
><span class="size-4"
|
||
|
|
><uk-icon
|
||
|
|
><!----><svg
|
||
|
|
xmlns="http://www.w3.org/2000/svg"
|
||
|
|
width="16"
|
||
|
|
height="16"
|
||
|
|
viewBox="0 0 24 24"
|
||
|
|
fill="none"
|
||
|
|
stroke="currentColor"
|
||
|
|
stroke-width="2"
|
||
|
|
stroke-linecap="round"
|
||
|
|
stroke-linejoin="round"
|
||
|
|
class=""
|
||
|
|
>
|
||
|
|
<circle cx="11" cy="11" r="8"></circle>
|
||
|
|
<path d="m21 21-4.3-4.3"></path></svg></uk-icon></span
|
||
|
|
></span>
|
||
|
|
<input class="uk-input" type="text" placeholder="Search" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="max-h-[600px] flex-1 overflow-y-auto">
|
||
|
|
<ul class="js-filter space-y-2 p-4 pt-0">
|
||
|
|
<li
|
||
|
|
class="uk-rounded relative border border-border p-3 hover:bg-accent bg-muted"
|
||
|
|
data-status="read"
|
||
|
|
>
|
||
|
|
<div class="flex w-full flex-col gap-1">
|
||
|
|
<div class="flex items-center">
|
||
|
|
<div class="flex items-center gap-2">
|
||
|
|
<div class="font-semibold">William Smith</div>
|
||
|
|
<!---->
|
||
|
|
</div>
|
||
|
|
<div class="ml-auto text-xs text-foreground">
|
||
|
|
a year ago
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<a class="text-xs font-medium" href="#"
|
||
|
|
>Meeting Tomorrow <span class="absolute inset-0"></span
|
||
|
|
></a>
|
||
|
|
<div class="line-clamp-2 text-xs text-muted-foreground">
|
||
|
|
Hi, let's have a meeting tomorrow to discuss the project.
|
||
|
|
I've been reviewing the project details and have some
|
||
|
|
ideas I'd like to share. It's crucial that we align on our
|
||
|
|
next steps to ensure the project's success. Please come
|
||
|
|
prepared with any questions or insights you may have.
|
||
|
|
Looking forward to our meeting! Best regards, William
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center gap-2">
|
||
|
|
<a href="#" class="uk-label relative z-10">meeting</a
|
||
|
|
><a
|
||
|
|
href="#"
|
||
|
|
class="uk-label relative z-10 uk-label-primary"
|
||
|
|
>work</a
|
||
|
|
><a href="#" class="uk-label relative z-10">important</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li
|
||
|
|
class="uk-rounded relative border border-border p-3 hover:bg-accent"
|
||
|
|
data-status="read"
|
||
|
|
>
|
||
|
|
<div class="flex w-full flex-col gap-1">
|
||
|
|
<div class="flex items-center">
|
||
|
|
<div class="flex items-center gap-2">
|
||
|
|
<div class="font-semibold">Alice Smith</div>
|
||
|
|
<!---->
|
||
|
|
</div>
|
||
|
|
<div class="ml-auto text-xs text-foreground">
|
||
|
|
a year ago
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<a class="text-xs font-medium" href="#"
|
||
|
|
>Re: Project Update <span class="absolute inset-0"></span
|
||
|
|
></a>
|
||
|
|
<div class="line-clamp-2 text-xs text-muted-foreground">
|
||
|
|
Thank you for the project update. It looks great! I've
|
||
|
|
gone through the report, and the progress is impressive.
|
||
|
|
The team has done a fantastic job, and I appreciate the
|
||
|
|
hard work everyone has put in. I have a few minor
|
||
|
|
suggestions that I'll include in the attached document.
|
||
|
|
Let's discuss these during our next meeting. Keep up the
|
||
|
|
excellent work! Best regards, Alice
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center gap-2">
|
||
|
|
<a
|
||
|
|
href="#"
|
||
|
|
class="uk-label relative z-10 uk-label-primary"
|
||
|
|
>work</a
|
||
|
|
><a href="#" class="uk-label relative z-10">important</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li
|
||
|
|
class="uk-rounded relative border border-border p-3 hover:bg-accent"
|
||
|
|
data-status="read"
|
||
|
|
>
|
||
|
|
<div class="flex w-full flex-col gap-1">
|
||
|
|
<div class="flex items-center">
|
||
|
|
<div class="flex items-center gap-2">
|
||
|
|
<div class="font-semibold">Bob Johnson</div>
|
||
|
|
<!---->
|
||
|
|
</div>
|
||
|
|
<div class="ml-auto text-xs text-foreground">
|
||
|
|
2 years ago
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<a class="text-xs font-medium" href="#"
|
||
|
|
>Weekend Plans <span class="absolute inset-0"></span
|
||
|
|
></a>
|
||
|
|
<div class="line-clamp-2 text-xs text-muted-foreground">
|
||
|
|
Any plans for the weekend? I was thinking of going hiking
|
||
|
|
in the nearby mountains. It's been a while since we had
|
||
|
|
some outdoor fun. If you're interested, let me know, and
|
||
|
|
we can plan the details. It'll be a great way to unwind
|
||
|
|
and enjoy nature. Looking forward to your response! Best,
|
||
|
|
Bob
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center gap-2">
|
||
|
|
<a href="#" class="uk-label relative z-10">personal</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li
|
||
|
|
class="uk-rounded relative border border-border p-3 hover:bg-accent"
|
||
|
|
data-status="unread"
|
||
|
|
>
|
||
|
|
<div class="flex w-full flex-col gap-1">
|
||
|
|
<div class="flex items-center">
|
||
|
|
<div class="flex items-center gap-2">
|
||
|
|
<div class="font-semibold">Emily Davis</div>
|
||
|
|
<span
|
||
|
|
class="flex h-2 w-2 rounded-full bg-blue-600"
|
||
|
|
></span
|
||
|
|
><!---->
|
||
|
|
</div>
|
||
|
|
<div class="ml-auto text-xs text-foreground">
|
||
|
|
2 years ago
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<a class="text-xs font-medium" href="#"
|
||
|
|
>Re: Question about Budget
|
||
|
|
<span class="absolute inset-0"></span
|
||
|
|
></a>
|
||
|
|
<div class="line-clamp-2 text-xs text-muted-foreground">
|
||
|
|
I have a question about the budget for the upcoming
|
||
|
|
project. It seems like there's a discrepancy in the
|
||
|
|
allocation of resources. I've reviewed the budget report
|
||
|
|
and identified a few areas where we might be able to
|
||
|
|
optimize our spending without compromising the project's
|
||
|
|
quality. I've attached a detailed analysis for your
|
||
|
|
reference. Let's discuss this further in our next meeting.
|
||
|
|
Thanks, Emily
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center gap-2">
|
||
|
|
<a
|
||
|
|
href="#"
|
||
|
|
class="uk-label relative z-10 uk-label-primary"
|
||
|
|
>work</a
|
||
|
|
><a href="#" class="uk-label relative z-10">budget</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li
|
||
|
|
class="uk-rounded relative border border-border p-3 hover:bg-accent"
|
||
|
|
data-status="unread"
|
||
|
|
>
|
||
|
|
<div class="flex w-full flex-col gap-1">
|
||
|
|
<div class="flex items-center">
|
||
|
|
<div class="flex items-center gap-2">
|
||
|
|
<div class="font-semibold">Michael Wilson</div>
|
||
|
|
<span
|
||
|
|
class="flex h-2 w-2 rounded-full bg-blue-600"
|
||
|
|
></span
|
||
|
|
><!---->
|
||
|
|
</div>
|
||
|
|
<div class="ml-auto text-xs text-foreground">
|
||
|
|
2 years ago
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<a class="text-xs font-medium" href="#"
|
||
|
|
>Important Announcement
|
||
|
|
<span class="absolute inset-0"></span
|
||
|
|
></a>
|
||
|
|
<div class="line-clamp-2 text-xs text-muted-foreground">
|
||
|
|
I have an important announcement to make during our team
|
||
|
|
meeting. It pertains to a strategic shift in our approach
|
||
|
|
to the upcoming product launch. We've received valuable
|
||
|
|
feedback from our beta testers, and I believe it's time to
|
||
|
|
make some adjustments to better meet our customers' needs.
|
||
|
|
This change is crucial to our success, and I look forward
|
||
|
|
to discussing it with the team. Please be prepared to
|
||
|
|
share your insights during the meeting. Regards, Michael
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center gap-2">
|
||
|
|
<a href="#" class="uk-label relative z-10">meeting</a
|
||
|
|
><a
|
||
|
|
href="#"
|
||
|
|
class="uk-label relative z-10 uk-label-primary"
|
||
|
|
>work</a
|
||
|
|
><a href="#" class="uk-label relative z-10">important</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li
|
||
|
|
class="uk-rounded relative border border-border p-3 hover:bg-accent"
|
||
|
|
data-status="read"
|
||
|
|
>
|
||
|
|
<div class="flex w-full flex-col gap-1">
|
||
|
|
<div class="flex items-center">
|
||
|
|
<div class="flex items-center gap-2">
|
||
|
|
<div class="font-semibold">Sarah Brown</div>
|
||
|
|
<!---->
|
||
|
|
</div>
|
||
|
|
<div class="ml-auto text-xs text-foreground">
|
||
|
|
2 years ago
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<a class="text-xs font-medium" href="#"
|
||
|
|
>Re: Feedback on Proposal
|
||
|
|
<span class="absolute inset-0"></span
|
||
|
|
></a>
|
||
|
|
<div class="line-clamp-2 text-xs text-muted-foreground">
|
||
|
|
Thank you for your feedback on the proposal. It looks
|
||
|
|
great! I'm pleased to hear that you found it promising.
|
||
|
|
The team worked diligently to address all the key points
|
||
|
|
you raised, and I believe we now have a strong foundation
|
||
|
|
for the project. I've attached the revised proposal for
|
||
|
|
your review. Please let me know if you have any further
|
||
|
|
comments or suggestions. Looking forward to your response.
|
||
|
|
Best regards, Sarah
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center gap-2">
|
||
|
|
<a
|
||
|
|
href="#"
|
||
|
|
class="uk-label relative z-10 uk-label-primary"
|
||
|
|
>work</a
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li
|
||
|
|
class="uk-rounded relative border border-border p-3 hover:bg-accent"
|
||
|
|
data-status="unread"
|
||
|
|
>
|
||
|
|
<div class="flex w-full flex-col gap-1">
|
||
|
|
<div class="flex items-center">
|
||
|
|
<div class="flex items-center gap-2">
|
||
|
|
<div class="font-semibold">David Lee</div>
|
||
|
|
<span
|
||
|
|
class="flex h-2 w-2 rounded-full bg-blue-600"
|
||
|
|
></span
|
||
|
|
><!---->
|
||
|
|
</div>
|
||
|
|
<div class="ml-auto text-xs text-foreground">
|
||
|
|
2 years ago
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<a class="text-xs font-medium" href="#"
|
||
|
|
>New Project Idea <span class="absolute inset-0"></span
|
||
|
|
></a>
|
||
|
|
<div class="line-clamp-2 text-xs text-muted-foreground">
|
||
|
|
I have an exciting new project idea to discuss with you.
|
||
|
|
It involves expanding our services to target a niche
|
||
|
|
market that has shown considerable growth in recent
|
||
|
|
months. I've prepared a detailed proposal outlining the
|
||
|
|
potential benefits and the strategy for execution. This
|
||
|
|
project has the potential to significantly impact our
|
||
|
|
business positively. Let's set up a meeting to dive into
|
||
|
|
the details and determine if it aligns with our current
|
||
|
|
goals. Best regards, David
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center gap-2">
|
||
|
|
<a href="#" class="uk-label relative z-10">meeting</a
|
||
|
|
><a
|
||
|
|
href="#"
|
||
|
|
class="uk-label relative z-10 uk-label-primary"
|
||
|
|
>work</a
|
||
|
|
><a href="#" class="uk-label relative z-10">important</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li
|
||
|
|
class="uk-rounded relative border border-border p-3 hover:bg-accent"
|
||
|
|
data-status="read"
|
||
|
|
>
|
||
|
|
<div class="flex w-full flex-col gap-1">
|
||
|
|
<div class="flex items-center">
|
||
|
|
<div class="flex items-center gap-2">
|
||
|
|
<div class="font-semibold">Olivia Wilson</div>
|
||
|
|
<!---->
|
||
|
|
</div>
|
||
|
|
<div class="ml-auto text-xs text-foreground">
|
||
|
|
2 years ago
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<a class="text-xs font-medium" href="#"
|
||
|
|
>Vacation Plans <span class="absolute inset-0"></span
|
||
|
|
></a>
|
||
|
|
<div class="line-clamp-2 text-xs text-muted-foreground">
|
||
|
|
Let's plan our vacation for next month. What do you think?
|
||
|
|
I've been thinking of visiting a tropical paradise, and
|
||
|
|
I've put together some destination options. I believe it's
|
||
|
|
time for us to unwind and recharge. Please take a look at
|
||
|
|
the options and let me know your preferences. We can start
|
||
|
|
making arrangements to ensure a smooth and enjoyable trip.
|
||
|
|
Excited to hear your thoughts! Olivia
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center gap-2">
|
||
|
|
<a href="#" class="uk-label relative z-10">personal</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li
|
||
|
|
class="uk-rounded relative border border-border p-3 hover:bg-accent"
|
||
|
|
data-status="read"
|
||
|
|
>
|
||
|
|
<div class="flex w-full flex-col gap-1">
|
||
|
|
<div class="flex items-center">
|
||
|
|
<div class="flex items-center gap-2">
|
||
|
|
<div class="font-semibold">James Martin</div>
|
||
|
|
<!---->
|
||
|
|
</div>
|
||
|
|
<div class="ml-auto text-xs text-foreground">
|
||
|
|
2 years ago
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<a class="text-xs font-medium" href="#"
|
||
|
|
>Re: Conference Registration
|
||
|
|
<span class="absolute inset-0"></span
|
||
|
|
></a>
|
||
|
|
<div class="line-clamp-2 text-xs text-muted-foreground">
|
||
|
|
I've completed the registration for the conference next
|
||
|
|
month. The event promises to be a great networking
|
||
|
|
opportunity, and I'm looking forward to attending the
|
||
|
|
various sessions and connecting with industry experts.
|
||
|
|
I've also attached the conference schedule for your
|
||
|
|
reference. If there are any specific topics or sessions
|
||
|
|
you'd like me to explore, please let me know. It's an
|
||
|
|
exciting event, and I'll make the most of it. Best
|
||
|
|
regards, James
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center gap-2">
|
||
|
|
<a
|
||
|
|
href="#"
|
||
|
|
class="uk-label relative z-10 uk-label-primary"
|
||
|
|
>work</a
|
||
|
|
><a href="#" class="uk-label relative z-10">conference</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li
|
||
|
|
class="uk-rounded relative border border-border p-3 hover:bg-accent"
|
||
|
|
data-status="unread"
|
||
|
|
>
|
||
|
|
<div class="flex w-full flex-col gap-1">
|
||
|
|
<div class="flex items-center">
|
||
|
|
<div class="flex items-center gap-2">
|
||
|
|
<div class="font-semibold">Sophia White</div>
|
||
|
|
<span
|
||
|
|
class="flex h-2 w-2 rounded-full bg-blue-600"
|
||
|
|
></span
|
||
|
|
><!---->
|
||
|
|
</div>
|
||
|
|
<div class="ml-auto text-xs text-foreground">
|
||
|
|
2 years ago
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<a class="text-xs font-medium" href="#"
|
||
|
|
>Team Dinner <span class="absolute inset-0"></span
|
||
|
|
></a>
|
||
|
|
<div class="line-clamp-2 text-xs text-muted-foreground">
|
||
|
|
Let's have a team dinner next week to celebrate our
|
||
|
|
success. We've achieved some significant milestones, and
|
||
|
|
it's time to acknowledge our hard work and dedication.
|
||
|
|
I've made reservations at a lovely restaurant, and I'm
|
||
|
|
sure it'll be an enjoyable evening. Please confirm your
|
||
|
|
availability and any dietary preferences. Looking forward
|
||
|
|
to a fun and memorable dinner with the team! Best, Sophia
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center gap-2">
|
||
|
|
<a href="#" class="uk-label relative z-10">meeting</a
|
||
|
|
><a
|
||
|
|
href="#"
|
||
|
|
class="uk-label relative z-10 uk-label-primary"
|
||
|
|
>work</a
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li
|
||
|
|
class="uk-rounded relative border border-border p-3 hover:bg-accent"
|
||
|
|
data-status="unread"
|
||
|
|
>
|
||
|
|
<div class="flex w-full flex-col gap-1">
|
||
|
|
<div class="flex items-center">
|
||
|
|
<div class="flex items-center gap-2">
|
||
|
|
<div class="font-semibold">Daniel Johnson</div>
|
||
|
|
<span
|
||
|
|
class="flex h-2 w-2 rounded-full bg-blue-600"
|
||
|
|
></span
|
||
|
|
><!---->
|
||
|
|
</div>
|
||
|
|
<div class="ml-auto text-xs text-foreground">
|
||
|
|
2 years ago
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<a class="text-xs font-medium" href="#"
|
||
|
|
>Feedback Request <span class="absolute inset-0"></span
|
||
|
|
></a>
|
||
|
|
<div class="line-clamp-2 text-xs text-muted-foreground">
|
||
|
|
I'd like your feedback on the latest project deliverables.
|
||
|
|
We've made significant progress, and I value your input to
|
||
|
|
ensure we're on the right track. I've attached the
|
||
|
|
deliverables for your review, and I'm particularly
|
||
|
|
interested in any areas where you think we can further
|
||
|
|
enhance the quality or efficiency. Your feedback is
|
||
|
|
invaluable, and I appreciate your time and expertise.
|
||
|
|
Let's work together to make this project a success.
|
||
|
|
Regards, Daniel
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center gap-2">
|
||
|
|
<a
|
||
|
|
href="#"
|
||
|
|
class="uk-label relative z-10 uk-label-primary"
|
||
|
|
>work</a
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li
|
||
|
|
class="uk-rounded relative border border-border p-3 hover:bg-accent"
|
||
|
|
data-status="read"
|
||
|
|
>
|
||
|
|
<div class="flex w-full flex-col gap-1">
|
||
|
|
<div class="flex items-center">
|
||
|
|
<div class="flex items-center gap-2">
|
||
|
|
<div class="font-semibold">Ava Taylor</div>
|
||
|
|
<!---->
|
||
|
|
</div>
|
||
|
|
<div class="ml-auto text-xs text-foreground">
|
||
|
|
2 years ago
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<a class="text-xs font-medium" href="#"
|
||
|
|
>Re: Meeting Agenda <span class="absolute inset-0"></span
|
||
|
|
></a>
|
||
|
|
<div class="line-clamp-2 text-xs text-muted-foreground">
|
||
|
|
Here's the agenda for our meeting next week. I've included
|
||
|
|
all the topics we need to cover, as well as time
|
||
|
|
allocations for each. If you have any additional items to
|
||
|
|
discuss or any specific points to address, please let me
|
||
|
|
know, and we can integrate them into the agenda. It's
|
||
|
|
essential that our meeting is productive and addresses all
|
||
|
|
relevant matters. Looking forward to our meeting! Ava
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center gap-2">
|
||
|
|
<a href="#" class="uk-label relative z-10">meeting</a
|
||
|
|
><a
|
||
|
|
href="#"
|
||
|
|
class="uk-label relative z-10 uk-label-primary"
|
||
|
|
>work</a
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li
|
||
|
|
class="uk-rounded relative border border-border p-3 hover:bg-accent"
|
||
|
|
data-status="unread"
|
||
|
|
>
|
||
|
|
<div class="flex w-full flex-col gap-1">
|
||
|
|
<div class="flex items-center">
|
||
|
|
<div class="flex items-center gap-2">
|
||
|
|
<div class="font-semibold">William Anderson</div>
|
||
|
|
<span
|
||
|
|
class="flex h-2 w-2 rounded-full bg-blue-600"
|
||
|
|
></span
|
||
|
|
><!---->
|
||
|
|
</div>
|
||
|
|
<div class="ml-auto text-xs text-foreground">
|
||
|
|
2 years ago
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<a class="text-xs font-medium" href="#"
|
||
|
|
>Product Launch Update
|
||
|
|
<span class="absolute inset-0"></span
|
||
|
|
></a>
|
||
|
|
<div class="line-clamp-2 text-xs text-muted-foreground">
|
||
|
|
The product launch is on track. I'll provide an update
|
||
|
|
during our call. We've made substantial progress in the
|
||
|
|
development and marketing of our new product. I'm excited
|
||
|
|
to share the latest updates with you during our upcoming
|
||
|
|
call. It's crucial that we coordinate our efforts to
|
||
|
|
ensure a successful launch. Please come prepared with any
|
||
|
|
questions or insights you may have. Let's make this
|
||
|
|
product launch a resounding success! Best regards, William
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center gap-2">
|
||
|
|
<a href="#" class="uk-label relative z-10">meeting</a
|
||
|
|
><a
|
||
|
|
href="#"
|
||
|
|
class="uk-label relative z-10 uk-label-primary"
|
||
|
|
>work</a
|
||
|
|
><a href="#" class="uk-label relative z-10">important</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li
|
||
|
|
class="uk-rounded relative border border-border p-3 hover:bg-accent"
|
||
|
|
data-status="read"
|
||
|
|
>
|
||
|
|
<div class="flex w-full flex-col gap-1">
|
||
|
|
<div class="flex items-center">
|
||
|
|
<div class="flex items-center gap-2">
|
||
|
|
<div class="font-semibold">Mia Harris</div>
|
||
|
|
<!---->
|
||
|
|
</div>
|
||
|
|
<div class="ml-auto text-xs text-foreground">
|
||
|
|
2 years ago
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<a class="text-xs font-medium" href="#"
|
||
|
|
>Re: Travel Itinerary
|
||
|
|
<span class="absolute inset-0"></span
|
||
|
|
></a>
|
||
|
|
<div class="line-clamp-2 text-xs text-muted-foreground">
|
||
|
|
I've received the travel itinerary. It looks great! Thank
|
||
|
|
you for your prompt assistance in arranging the details.
|
||
|
|
I've reviewed the schedule and the accommodations, and
|
||
|
|
everything seems to be in order. I'm looking forward to
|
||
|
|
the trip, and I'm confident it'll be a smooth and
|
||
|
|
enjoyable experience. If there are any specific activities
|
||
|
|
or attractions you recommend at our destination, please
|
||
|
|
feel free to share your suggestions. Excited for the trip!
|
||
|
|
Mia
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center gap-2">
|
||
|
|
<a href="#" class="uk-label relative z-10">personal</a
|
||
|
|
><a href="#" class="uk-label relative z-10">travel</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li
|
||
|
|
class="uk-rounded relative border border-border p-3 hover:bg-accent"
|
||
|
|
data-status="unread"
|
||
|
|
>
|
||
|
|
<div class="flex w-full flex-col gap-1">
|
||
|
|
<div class="flex items-center">
|
||
|
|
<div class="flex items-center gap-2">
|
||
|
|
<div class="font-semibold">Ethan Clark</div>
|
||
|
|
<span
|
||
|
|
class="flex h-2 w-2 rounded-full bg-blue-600"
|
||
|
|
></span
|
||
|
|
><!---->
|
||
|
|
</div>
|
||
|
|
<div class="ml-auto text-xs text-foreground">
|
||
|
|
2 years ago
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<a class="text-xs font-medium" href="#"
|
||
|
|
>Team Building Event <span class="absolute inset-0"></span
|
||
|
|
></a>
|
||
|
|
<div class="line-clamp-2 text-xs text-muted-foreground">
|
||
|
|
Let's plan a team-building event for our department. Team
|
||
|
|
cohesion and morale are vital to our success, and I
|
||
|
|
believe a well-organized team-building event can be
|
||
|
|
incredibly beneficial. I've done some research and have a
|
||
|
|
few ideas for fun and engaging activities. Please let me
|
||
|
|
know your thoughts and availability. We want this event to
|
||
|
|
be both enjoyable and productive. Together, we'll
|
||
|
|
strengthen our team and boost our performance. Regards,
|
||
|
|
Ethan
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center gap-2">
|
||
|
|
<a href="#" class="uk-label relative z-10">meeting</a
|
||
|
|
><a
|
||
|
|
href="#"
|
||
|
|
class="uk-label relative z-10 uk-label-primary"
|
||
|
|
>work</a
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li
|
||
|
|
class="uk-rounded relative border border-border p-3 hover:bg-accent"
|
||
|
|
data-status="read"
|
||
|
|
>
|
||
|
|
<div class="flex w-full flex-col gap-1">
|
||
|
|
<div class="flex items-center">
|
||
|
|
<div class="flex items-center gap-2">
|
||
|
|
<div class="font-semibold">Chloe Hall</div>
|
||
|
|
<!---->
|
||
|
|
</div>
|
||
|
|
<div class="ml-auto text-xs text-foreground">
|
||
|
|
3 years ago
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<a class="text-xs font-medium" href="#"
|
||
|
|
>Re: Budget Approval <span class="absolute inset-0"></span
|
||
|
|
></a>
|
||
|
|
<div class="line-clamp-2 text-xs text-muted-foreground">
|
||
|
|
The budget has been approved. We can proceed with the
|
||
|
|
project. I'm delighted to inform you that our budget
|
||
|
|
proposal has received the green light from the finance
|
||
|
|
department. This is a significant milestone, and it means
|
||
|
|
we can move forward with the project as planned. I've
|
||
|
|
attached the finalized budget for your reference. Let's
|
||
|
|
ensure that we stay on track and deliver the project on
|
||
|
|
time and within budget. It's an exciting time for us!
|
||
|
|
Chloe
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center gap-2">
|
||
|
|
<a
|
||
|
|
href="#"
|
||
|
|
class="uk-label relative z-10 uk-label-primary"
|
||
|
|
>work</a
|
||
|
|
><a href="#" class="uk-label relative z-10">budget</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
<li
|
||
|
|
class="uk-rounded relative border border-border p-3 hover:bg-accent"
|
||
|
|
data-status="unread"
|
||
|
|
>
|
||
|
|
<div class="flex w-full flex-col gap-1">
|
||
|
|
<div class="flex items-center">
|
||
|
|
<div class="flex items-center gap-2">
|
||
|
|
<div class="font-semibold">Samuel Turner</div>
|
||
|
|
<span
|
||
|
|
class="flex h-2 w-2 rounded-full bg-blue-600"
|
||
|
|
></span
|
||
|
|
><!---->
|
||
|
|
</div>
|
||
|
|
<div class="ml-auto text-xs text-foreground">
|
||
|
|
3 years ago
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<a class="text-xs font-medium" href="#"
|
||
|
|
>Weekend Hike <span class="absolute inset-0"></span
|
||
|
|
></a>
|
||
|
|
<div class="line-clamp-2 text-xs text-muted-foreground">
|
||
|
|
Who's up for a weekend hike in the mountains? I've been
|
||
|
|
craving some outdoor adventure, and a hike in the
|
||
|
|
mountains sounds like the perfect escape. If you're up for
|
||
|
|
the challenge, we can explore some scenic trails and enjoy
|
||
|
|
the beauty of nature. I've done some research and have a
|
||
|
|
few routes in mind. Let me know if you're interested, and
|
||
|
|
we can plan the details. It's sure to be a memorable
|
||
|
|
experience! Samuel
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center gap-2">
|
||
|
|
<a href="#" class="uk-label relative z-10">personal</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="flex flex-col">
|
||
|
|
<div
|
||
|
|
class="flex h-14 flex-none items-center border-b border-border p-2"
|
||
|
|
>
|
||
|
|
<div class="flex w-full justify-between">
|
||
|
|
<div class="flex gap-x-2 divide-x divide-border">
|
||
|
|
<ul class="flex gap-x-1">
|
||
|
|
<li>
|
||
|
|
<a
|
||
|
|
class="uk-btn uk-btn-ghost uk-btn-icon"
|
||
|
|
href="#"
|
||
|
|
data-uk-tooltip="Archive"
|
||
|
|
aria-label="Archive"
|
||
|
|
><span class="size-4"
|
||
|
|
><uk-icon
|
||
|
|
><!----><svg
|
||
|
|
xmlns="http://www.w3.org/2000/svg"
|
||
|
|
width="16"
|
||
|
|
height="16"
|
||
|
|
viewBox="0 0 24 24"
|
||
|
|
fill="none"
|
||
|
|
stroke="currentColor"
|
||
|
|
stroke-width="2"
|
||
|
|
stroke-linecap="round"
|
||
|
|
stroke-linejoin="round"
|
||
|
|
class=""
|
||
|
|
>
|
||
|
|
<rect
|
||
|
|
width="20"
|
||
|
|
height="5"
|
||
|
|
x="2"
|
||
|
|
y="3"
|
||
|
|
rx="1"
|
||
|
|
></rect>
|
||
|
|
<path
|
||
|
|
d="M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8"
|
||
|
|
></path>
|
||
|
|
<path d="M10 12h4"></path></svg></uk-icon></span
|
||
|
|
></a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a
|
||
|
|
class="uk-btn uk-btn-ghost uk-btn-icon"
|
||
|
|
href="#"
|
||
|
|
data-uk-tooltip="Move to junk"
|
||
|
|
aria-label="Move to junk"
|
||
|
|
><span class="size-4"
|
||
|
|
><uk-icon
|
||
|
|
><!----><svg
|
||
|
|
xmlns="http://www.w3.org/2000/svg"
|
||
|
|
width="16"
|
||
|
|
height="16"
|
||
|
|
viewBox="0 0 24 24"
|
||
|
|
fill="none"
|
||
|
|
stroke="currentColor"
|
||
|
|
stroke-width="2"
|
||
|
|
stroke-linecap="round"
|
||
|
|
stroke-linejoin="round"
|
||
|
|
class=""
|
||
|
|
>
|
||
|
|
<rect
|
||
|
|
width="20"
|
||
|
|
height="5"
|
||
|
|
x="2"
|
||
|
|
y="3"
|
||
|
|
rx="1"
|
||
|
|
></rect>
|
||
|
|
<path
|
||
|
|
d="M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8"
|
||
|
|
></path>
|
||
|
|
<path d="m9.5 17 5-5"></path>
|
||
|
|
<path d="m9.5 12 5 5"></path></svg></uk-icon></span
|
||
|
|
></a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a
|
||
|
|
class="uk-btn uk-btn-ghost uk-btn-icon"
|
||
|
|
href="#"
|
||
|
|
data-uk-tooltip="Move to trash"
|
||
|
|
aria-label="Move to trash"
|
||
|
|
><span class="size-4"
|
||
|
|
><uk-icon
|
||
|
|
><!----><svg
|
||
|
|
xmlns="http://www.w3.org/2000/svg"
|
||
|
|
width="16"
|
||
|
|
height="16"
|
||
|
|
viewBox="0 0 24 24"
|
||
|
|
fill="none"
|
||
|
|
stroke="currentColor"
|
||
|
|
stroke-width="2"
|
||
|
|
stroke-linecap="round"
|
||
|
|
stroke-linejoin="round"
|
||
|
|
class=""
|
||
|
|
>
|
||
|
|
<path d="M3 6h18"></path>
|
||
|
|
<path
|
||
|
|
d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"
|
||
|
|
></path>
|
||
|
|
<path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"></path>
|
||
|
|
<line x1="10" x2="10" y1="11" y2="17"></line>
|
||
|
|
<line
|
||
|
|
x1="14"
|
||
|
|
x2="14"
|
||
|
|
y1="11"
|
||
|
|
y2="17"
|
||
|
|
></line></svg></uk-icon></span
|
||
|
|
></a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<ul class="flex gap-x-1 pl-2">
|
||
|
|
<li>
|
||
|
|
<a
|
||
|
|
class="uk-btn uk-btn-ghost uk-btn-icon"
|
||
|
|
href="#"
|
||
|
|
data-uk-tooltip="Snooze"
|
||
|
|
aria-label="Snooze"
|
||
|
|
><span class="size-4"
|
||
|
|
><uk-icon
|
||
|
|
><!----><svg
|
||
|
|
xmlns="http://www.w3.org/2000/svg"
|
||
|
|
width="16"
|
||
|
|
height="16"
|
||
|
|
viewBox="0 0 24 24"
|
||
|
|
fill="none"
|
||
|
|
stroke="currentColor"
|
||
|
|
stroke-width="2"
|
||
|
|
stroke-linecap="round"
|
||
|
|
stroke-linejoin="round"
|
||
|
|
class=""
|
||
|
|
>
|
||
|
|
<circle cx="12" cy="12" r="10"></circle>
|
||
|
|
<polyline
|
||
|
|
points="12 6 12 12 16 14"
|
||
|
|
></polyline></svg></uk-icon></span
|
||
|
|
></a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div class="flex gap-x-2 divide-x divide-border">
|
||
|
|
<ul class="flex gap-x-1">
|
||
|
|
<li>
|
||
|
|
<a
|
||
|
|
class="uk-btn uk-btn-ghost uk-btn-icon"
|
||
|
|
href="#"
|
||
|
|
data-uk-tooltip="Reply"
|
||
|
|
aria-label="Reply"
|
||
|
|
><span class="size-4"
|
||
|
|
><uk-icon
|
||
|
|
><!----><svg
|
||
|
|
xmlns="http://www.w3.org/2000/svg"
|
||
|
|
width="16"
|
||
|
|
height="16"
|
||
|
|
viewBox="0 0 24 24"
|
||
|
|
fill="none"
|
||
|
|
stroke="currentColor"
|
||
|
|
stroke-width="2"
|
||
|
|
stroke-linecap="round"
|
||
|
|
stroke-linejoin="round"
|
||
|
|
class=""
|
||
|
|
>
|
||
|
|
<polyline points="9 17 4 12 9 7"></polyline>
|
||
|
|
<path
|
||
|
|
d="M20 18v-2a4 4 0 0 0-4-4H4"
|
||
|
|
></path></svg></uk-icon></span
|
||
|
|
></a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a
|
||
|
|
class="uk-btn uk-btn-ghost uk-btn-icon"
|
||
|
|
href="#"
|
||
|
|
data-uk-tooltip="Reply all"
|
||
|
|
aria-label="Reply all"
|
||
|
|
><span class="size-4"
|
||
|
|
><uk-icon
|
||
|
|
><!----><svg
|
||
|
|
xmlns="http://www.w3.org/2000/svg"
|
||
|
|
width="16"
|
||
|
|
height="16"
|
||
|
|
viewBox="0 0 24 24"
|
||
|
|
fill="none"
|
||
|
|
stroke="currentColor"
|
||
|
|
stroke-width="2"
|
||
|
|
stroke-linecap="round"
|
||
|
|
stroke-linejoin="round"
|
||
|
|
class=""
|
||
|
|
>
|
||
|
|
<polyline points="7 17 2 12 7 7"></polyline>
|
||
|
|
<polyline points="12 17 7 12 12 7"></polyline>
|
||
|
|
<path
|
||
|
|
d="M22 18v-2a4 4 0 0 0-4-4H7"
|
||
|
|
></path></svg></uk-icon></span
|
||
|
|
></a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a
|
||
|
|
class="uk-btn uk-btn-ghost uk-btn-icon"
|
||
|
|
href="#"
|
||
|
|
data-uk-tooltip="Forward"
|
||
|
|
aria-label="Forward"
|
||
|
|
><span class="size-4"
|
||
|
|
><uk-icon
|
||
|
|
><!----><svg
|
||
|
|
xmlns="http://www.w3.org/2000/svg"
|
||
|
|
width="16"
|
||
|
|
height="16"
|
||
|
|
viewBox="0 0 24 24"
|
||
|
|
fill="none"
|
||
|
|
stroke="currentColor"
|
||
|
|
stroke-width="2"
|
||
|
|
stroke-linecap="round"
|
||
|
|
stroke-linejoin="round"
|
||
|
|
class=""
|
||
|
|
>
|
||
|
|
<polyline points="15 17 20 12 15 7"></polyline>
|
||
|
|
<path
|
||
|
|
d="M4 18v-2a4 4 0 0 1 4-4h12"
|
||
|
|
></path></svg></uk-icon></span
|
||
|
|
></a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<div class="uk-inline pl-2">
|
||
|
|
<button
|
||
|
|
class="uk-btn uk-btn-ghost uk-btn-icon"
|
||
|
|
aria-label="Menu"
|
||
|
|
aria-haspopup="true"
|
||
|
|
>
|
||
|
|
<span class="size-4"
|
||
|
|
><uk-icon
|
||
|
|
><!----><svg
|
||
|
|
xmlns="http://www.w3.org/2000/svg"
|
||
|
|
width="16"
|
||
|
|
height="16"
|
||
|
|
viewBox="0 0 24 24"
|
||
|
|
fill="none"
|
||
|
|
stroke="currentColor"
|
||
|
|
stroke-width="2"
|
||
|
|
stroke-linecap="round"
|
||
|
|
stroke-linejoin="round"
|
||
|
|
class=""
|
||
|
|
>
|
||
|
|
<circle cx="12" cy="12" r="1"></circle>
|
||
|
|
<circle cx="12" cy="5" r="1"></circle>
|
||
|
|
<circle cx="12" cy="19" r="1"></circle></svg></uk-icon
|
||
|
|
></span>
|
||
|
|
</button>
|
||
|
|
<div
|
||
|
|
class="uk-drop uk-dropdown w-52"
|
||
|
|
data-uk-dropdown="pos: bottom-right; mode: click"
|
||
|
|
>
|
||
|
|
<ul class="uk-dropdown-nav uk-nav">
|
||
|
|
<li><a class="uk-drop-close">Mark as unread</a></li>
|
||
|
|
<li><a class="uk-drop-close">Star thread</a></li>
|
||
|
|
<li><a class="uk-drop-close">Add label</a></li>
|
||
|
|
<li><a class="uk-drop-close">Mute thread</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="flex flex-1 flex-col" id="test">
|
||
|
|
<div class="flex-1">
|
||
|
|
<div class="flex items-start p-4">
|
||
|
|
<div class="flex items-start gap-4">
|
||
|
|
<span
|
||
|
|
class="flex h-10 w-10 items-center justify-center rounded-full bg-muted"
|
||
|
|
>WS</span
|
||
|
|
>
|
||
|
|
<div class="grid gap-1">
|
||
|
|
<div class="font-semibold">William Smith</div>
|
||
|
|
<div class="line-clamp-1 text-xs">Meeting Tomorrow</div>
|
||
|
|
<div class="line-clamp-1 text-xs">
|
||
|
|
<span class="font-medium">Reply-To:</span>
|
||
|
|
williamsmith@example.com
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="ml-auto text-xs text-muted-foreground">
|
||
|
|
October 22, 23 at 09:00:00 AM
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
class="flex-1 space-y-4 whitespace-pre-line border-t border-border p-4"
|
||
|
|
>
|
||
|
|
Hi, let's have a meeting tomorrow to discuss the project. I've
|
||
|
|
been reviewing the project details and have some ideas I'd like
|
||
|
|
to share. It's crucial that we align on our next steps to ensure
|
||
|
|
the project's success. Please come prepared with any questions
|
||
|
|
or insights you may have. Looking forward to our meeting! Best
|
||
|
|
regards, William
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="flex-none space-y-4 border-t border-border p-4">
|
||
|
|
<div>
|
||
|
|
<label for="message" class="sr-only">Message</label>
|
||
|
|
<textarea
|
||
|
|
class="uk-textarea"
|
||
|
|
id="message"
|
||
|
|
placeholder="Reply William Smith"
|
||
|
|
></textarea>
|
||
|
|
</div>
|
||
|
|
<div class="flex justify-between">
|
||
|
|
<label
|
||
|
|
class="inline-flex items-center gap-x-2 text-xs"
|
||
|
|
for="mute"
|
||
|
|
><input
|
||
|
|
class="uk-toggle-switch uk-toggle-switch-primary"
|
||
|
|
id="mute"
|
||
|
|
type="checkbox"
|
||
|
|
/>
|
||
|
|
Mute this thread</label
|
||
|
|
>
|
||
|
|
<button class="uk-btn uk-btn-primary">Send</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!---->
|
||
|
|
<div
|
||
|
|
id="svelte-announcer"
|
||
|
|
aria-live="assertive"
|
||
|
|
aria-atomic="true"
|
||
|
|
style="
|
||
|
|
position: absolute;
|
||
|
|
left: 0;
|
||
|
|
top: 0;
|
||
|
|
clip: rect(0 0 0 0);
|
||
|
|
clip-path: inset(50%);
|
||
|
|
overflow: hidden;
|
||
|
|
white-space: nowrap;
|
||
|
|
width: 1px;
|
||
|
|
height: 1px;
|
||
|
|
"
|
||
|
|
>
|
||
|
|
<!---->
|
||
|
|
</div>
|
||
|
|
<!---->
|
||
|
|
</div>
|
||
|
|
</body>
|