<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>