tabler/preview/pages/email-inbox.astro

---

import Subheader from '@ui/Subheader.astro';
import ButtonGroup from '@ui/ButtonGroup.astro';
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
import Button from '@ui/Button.astro';
import Icon from '@ui/Icon.astro';
import Card from '@ui/Card.astro';
import Offcanvas from '@ui/Offcanvas.astro';
import Progress from '@ui/Progress.astro';
import Modal from '@shared/components/modals/Modal.astro';
import CaptureModal from '@shared/components/CaptureModal.astro';
import NewEmailModalContent from '@shared/components/modals/NewEmailModalContent.astro';
import mails from '@data/mails.json';
---

<DefaultLayout
	title="Email inbox"
	pageHeader="Inbox"
	pageMenu="extra.email-inbox"
	pageLibs={['hugerte']}
>
	<Card>
		<div class="row g-0">
			<div class="col-xxl-3 email-border border-end">
				<Offcanvas size="xxl" direction="start" class="h-100 file-offcanvas" tabindex="-1" id="emailSidebaroffcanvas">
					<div class="card-body h-100">
						<div>
							<Button icon="pencil" text="Compose" color="primary" class="d-none d-sm-block" modalId="new-email" />
						</div>

						<div class="mt-3 nav nav-vertical">
							<a href="#" class="nav-link text-danger fw-bold">
								<Icon name="inbox" class="me-2" />
								Inbox<span class="badge badge-danger ms-auto">{mails.length}</span>
							</a>
							<a href="#" class="nav-link"><Icon name="star" class="me-2" />Starred</a>
							<a href="#" class="nav-link"><Icon name="clock" class="me-2" />Snoozed</a>
							<a href="#" class="nav-link "><Icon name="file" class="me-2" />Draft<span class="badge badge-info ms-auto">32</span></a>
							<a href="#" class="nav-link"><Icon name="mail-up" class="me-2" />Sent Mail</a>
							<a href="#" class="nav-link"><Icon name="trash" class="me-2" />Trash</a>
							<a href="#" class="nav-link"><Icon name="tag" class="me-2" />Important</a>
							<a href="#" class="nav-link"><Icon name="alert-octagon" class="me-2" />Spam</a>
						</div>

						<div class="mt-4">
							<Subheader as="h6">Labels</Subheader>
							<div class="mt-2 nav nav-vertical">
								<a href="#" class="nav-link">
									<div class="badge bg-info me-2"></div> Updates
								</a>
								<a href="#" class="nav-link">
									<div class="badge bg-warning me-2"></div> Friends
								</a>
								<a href="#" class="nav-link">
									<div class="badge bg-success me-2"></div> Family
								</a>
								<a href="#" class="nav-link">
									<div class="badge bg-primary me-2"></div> Social
								</a>
								<a href="#" class="nav-link">
									<div class="badge bg-danger me-2"></div> Important
								</a>
								<a href="#" class="nav-link">
									<div class="badge bg-purple me-2"></div> Promotions
								</a>
							</div>
						</div>

						<div class="mt-5">
							<Subheader as="h6">Storage</Subheader>
							<Progress value={46} class="my-2" />

							<p class="text-muted font-13 mb-0">7.02 GB (46%) of 15 GB used</p>
						</div>


					</div>
				</Offcanvas>
			</div>

			<div class="col-xxl-9">
				<div class="card-body">
					<div class="d-flex flex-wrap align-items-center gap-2">
						<div class="d-xxl-none d-inline-flex">
							<button class="btn btn-icon" type="button" data-bs-toggle="offcanvas"
								data-bs-target="#emailSidebaroffcanvas" aria-controls="emailSidebaroffcanvas">
								<Icon name="menu-2" />
							</button>
						</div>

						<ButtonGroup>
							<Button icon="archive" iconOnly />
							<Button icon="alert-octagon" iconOnly />
							<Button icon="trash" iconOnly />
						</ButtonGroup>

						<ButtonGroup>
							<button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
								<Icon name="folder" />
							</button>
							<div class="dropdown-menu">
								<span class="dropdown-header">Move to</span>
								<a class="dropdown-item" href="#">Social</a>
								<a class="dropdown-item" href="#">Promotions</a>
								<a class="dropdown-item" href="#">Updates</a>
								<a class="dropdown-item" href="#">Forums</a>
							</div>
						</ButtonGroup>

						<ButtonGroup>
							<button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
								<Icon name="tag" />
							</button>
							<div class="dropdown-menu">
								<span class="dropdown-header">Label as:</span>
								<a class="dropdown-item" href="#">Updates</a>
								<a class="dropdown-item" href="#">Social</a>
								<a class="dropdown-item" href="#">Promotions</a>
								<a class="dropdown-item" href="#">Forums</a>
							</div>
						</ButtonGroup>

						<ButtonGroup>
							<button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
								<Icon name="dots" /> More
							</button>
							<div class="dropdown-menu">
								<span class="dropdown-header">More Options :</span>
								<a class="dropdown-item" href="#">Mark as Unread</a>
								<a class="dropdown-item" href="#">Add to Tasks</a>
								<a class="dropdown-item" href="#">Add Star</a>
								<a class="dropdown-item" href="#">Mute</a>
							</div>
						</ButtonGroup>
					</div>

					<div class="mt-3">
						<ul class="email-list">
							{mails && mails.length > 0 ? (
								mails.map((mail) => (
									<li>
										<div class="email-sender-info">
											<div class="checkbox-wrapper-mail">
												<div class="form-check">
													<input type="checkbox" class="form-check-input" id={`mail-${mail.id}`} />
													<label class="form-check-label" for={`mail-${mail.id}`}></label>
												</div>
											</div>
											<span class="star-toggle"><Icon name="star" /></span>
											<a href="#" class="email-title">{mail.sender}</a>
										</div>

										<div class="email-content">
											<a href="#" class="email-subject">{mail.subject} &nbsp;–&nbsp;
												<span>{mail.preview}</span>
											</a>
											<div class="email-date">{mail.date}</div>
										</div>

										<div class="email-action-icons">
											<ul class="list-inline">
												<li class="list-inline-item">
													<a href="#"><Icon name="archive" /></a>
												</li>
												<li class="list-inline-item">
													<a href="#"><Icon name="trash" /></a>
												</li>
												<li class="list-inline-item">
													<a href="#">
														<Icon name="mail-opened" class="email-action-icons-item" />
													</a>
												</li>
												<li class="list-inline-item">
													<a href="#"><Icon name="clock" /></a>
												</li>
											</ul>
										</div>
									</li>
								))
							) : (
								<li class="text-muted">No emails</li>
							)}
						</ul>
					</div>

					<div class="row">
						<div class="col-7 mt-1">
							Showing 1 - {mails.length} of {mails.length}
						</div> <!-- end col-->
						<div class="col-5">
							<ButtonGroup class="float-end">
								<button type="button" class="btn btn-icon"><Icon name="chevron-left" /></button>
								<button type="button" class="btn btn-icon"><Icon name="chevron-right" /></button>
							</ButtonGroup>
						</div> <!-- end col-->
					</div> <!-- end row-->
				</div>
			</div>
		</div>
	</Card>

	<CaptureModal>
		<Modal modalId="new-email">
			<NewEmailModalContent />
		</Modal>
	</CaptureModal>
</DefaultLayout>