Admin page
@jrmc.drawer({ class: 'drawer-mobile lg:drawer-open' })
@jrmc.drawer.content({ class: 'bg-base-100' })
{{-- navbar --}}
<div class="navbar bg-base-200">
<div class="flex-1">
@jrmc.button({ class: 'lg:hidden btn-square btn-ghost', ...$context.event.open })
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block w-5 h-5 stroke-current"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
@end
</div>
<div class="flex-none gap-2">
@jrmc.dropdown({ class: 'dropdown-end' })
@slot('button')
@jrmc.button.label({ class: 'btn-ghost btn-circle avatar' })
<div class="w-10 rounded-full">
<img src="https://picsum.photos/80/80" />
</div>
@end
@end
<ul tabindex="0" class="mt-3 p-2 shadow menu menu-compact dropdown-content bg-base-200 rounded-box w-52">
<li>
<a class="justify-between">
Profile
@!jrmc.badge({ text: 'New'})
</a>
</li>
<li><a>Settings</a></li>
<li><a>Logout</a></li>
</ul>
@end
</div>
</div>
{{-- end navbar --}}
<div class="flex flex-col justify-center px-4">
{{-- breadcrumbs --}}
<div class="text-sm breadcrumbs">
<ul>
<li><a>Dashboard</a></li>
<li>Users</li>
</ul>
</div>
{{-- end breadcrumbs --}}
<div class="w-full my-5">
<div class="navbar bg-base-100">
<div class="flex-1"></div>
<div class="flex-none gap-2">
<div class="form-control">
@!jrmc.form.input({ placeholder: 'Search', class: 'input input-bordered' })
</div>
</div>
</div>
@jrmc.table({ class: 'w-full' })
@slot('header')
<tr>
<th>
<label>
@!jrmc.form.input({ type: 'checkbox', name: 'my_name' })
</label>
</th>
<th>Name</th>
<th>Job</th>
<th>Favorite Color</th>
<th></th>
</tr>
@end
@slot('body')
<!-- row 1 -->
<tr>
<th>
<label>
@!jrmc.form.input({ type: 'checkbox', name: 'my_name', checked: true })
</label>
</th>
<td>
<div class="flex items-center space-x-3">
@!jrmc.avatar({ url: 'https://daisyui.com/tailwind-css-component-profile-2@56w.png', class: 'w-12 mask mask-squircle' })
<div>
<div class="font-bold">Hart Hagerty</div>
<div class="text-sm opacity-50">United States</div>
</div>
</div>
</td>
<td>
Zemlak, Daniel and Leannon
<br>
@!jrmc.badge({ text: 'Desktop Support Technician', class: 'badge-primary' })
</td>
<td>Purple</td>
<th>
@!jrmc.button({ text: 'details', class: 'btn-neutral' })
</th>
</tr>
<!-- row 2 -->
<tr>
<th>
<label>
@!jrmc.form.input({ type: 'checkbox', name: 'my_name' })
</label>
</th>
<td>
<div class="flex items-center space-x-3">
@!jrmc.avatar({ url: 'https://daisyui.com/tailwind-css-component-profile-3@56w.png', class: 'w-12 mask mask-squircle' })
<div>
<div class="font-bold">Brice Swyre</div>
<div class="text-sm opacity-50">China</div>
</div>
</div>
</td>
<td>
Carroll Group
<br>
@!jrmc.badge({ text: 'Tax Accountant', class: 'badge-warning' })
</td>
<td>Red</td>
<th>
@!jrmc.button({ text: 'details', class: 'btn-neutral' })
</th>
</tr>
<!-- row 3 -->
<tr>
<th>
<label>
@!jrmc.form.input({ type: 'checkbox', name: 'my_name' })
</label>
</th>
<td>
<div class="flex items-center space-x-3">
@!jrmc.avatar({ url: 'https://daisyui.com/tailwind-css-component-profile-4@56w.png', class: 'w-12 mask mask-squircle' })
<div>
<div class="font-bold">Marjy Ferencz</div>
<div class="text-sm opacity-50">Russia</div>
</div>
</div>
</td>
<td>
Rowe-Schoen
<br>
@!jrmc.badge({ text: 'Office Assistant I', class: 'badge-info' })
</td>
<td>Crimson</td>
<th>
@!jrmc.button({ text: 'details', class: 'btn-neutral' })
</th>
</tr>
<!-- row 4 -->
<tr>
<th>
<label>
@!jrmc.form.input({ type: 'checkbox', name: 'my_name' })
</label>
</th>
<td>
<div class="flex items-center space-x-3">
@!jrmc.avatar({ url: 'https://daisyui.com/tailwind-css-component-profile-5@56w.png', class: 'w-12 mask mask-squircle' })
<div>
<div class="font-bold">Yancy Tear</div>
<div class="text-sm opacity-50">Brazil</div>
</div>
</div>
</td>
<td>
Wyman-Ledner
<br>
@!jrmc.badge({ text: 'Community Outreach Specialist', class: 'badge-error' })
</td>
<td>Indigo</td>
<th>
@!jrmc.button({ text: 'details', class: 'btn-neutral' })
</th>
</tr>
@end
@end
</div>
<div class="w-full text-center my-5 hidden sm:block">
@!jrmc.pagination({ object: fakeUsers({ currentPage: 40, total: 99 }) })
</div>
<div class="w-full text-center my-5 sm:hidden">
@!jrmc.pagination.light({ object: fakeUsers({ currentPage: 40, total: 99 }) })
</div>
</div>
@end
@jrmc.drawer.side({ class: 'overflow-y-auto w-80 bg-base-200' })
<div class="z-20 bg-base-200 bg-opacity-90 backdrop-blur sticky top-0 items-center justify-center gap-2 mb-10 px-4 py-2 flex shadow-sm">
<a href="/" aria-current="page" aria-label="Homepage" class="flex-0 btn btn-ghost px-2">
<div class="font-title text-accent inline-flex text-lg transition-all duration-200 text-3xl">
<span class="lowercase">Edge</span> <span class="text-base-content uppercase">Component</span>
</div>
</a>
</div>
<ul class="menu text-base-content p-2 rounded-box">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
</ul>
@end
@end
<div class="drawer drawer-mobile lg:drawer-open" x-data="{ open: false }" @click.outside="open = false">
<input type="checkbox" :checked="open" class="drawer-toggle" />
<div class="drawer-content bg-base-100">
<div class="navbar bg-base-200">
<div class="flex-1"><button @click="open = true" class="btn lg:hidden btn-square btn-ghost">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block w-5 h-5 stroke-current"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
</button>
</div>
<div class="flex-none gap-2"><div class="dropdown dropdown-end"> <label
tabindex="0"
class="btn btn-ghost btn-circle avatar"> <div class="w-10 rounded-full">
<img src="https://picsum.photos/80/80" />
</div></label>
<ul tabindex="0" class="mt-3 p-2 shadow menu menu-compact dropdown-content bg-base-200 rounded-box w-52">
<li>
<a class="justify-between">
Profile<span class="badge" >
New
</span>
</a>
</li>
<li><a>Settings</a></li>
<li><a>Logout</a></li>
</ul></div>
</div>
</div>
<div class="flex flex-col justify-center px-4">
<div class="text-sm breadcrumbs">
<ul>
<li><a>Dashboard</a></li>
<li>Users</li>
</ul>
</div>
<div class="w-full my-5">
<div class="navbar bg-base-100">
<div class="flex-1"></div>
<div class="flex-none gap-2">
<div class="form-control"><input
type="text"
class="input input input-bordered"
placeholder="Search"
value=""
/>
</div>
</div>
</div>
<div class="overflow-x-auto">
<table class="table w-full table-md"> <thead> <tr>
<th>
<label><input
type="checkbox"
class="checkbox"
name="my_name"
id="my_name"
value=""
/>
</label>
</th>
<th>Name</th>
<th>Job</th>
<th>Favorite Color</th>
<th></th>
</tr></thead> <tbody> <!-- row 1 -->
<tr>
<th>
<label><input
type="checkbox"
class="checkbox"
name="my_name"
id="my_name"
checked
value=""
/>
</label>
</th>
<td>
<div class="flex items-center space-x-3"><div class="avatar " >
<div class="w-12 mask mask-squircle">
<img src="https://daisyui.com/tailwind-css-component-profile-2@56w.png" alt="" />
</div>
</div>
<div>
<div class="font-bold">Hart Hagerty</div>
<div class="text-sm opacity-50">United States</div>
</div>
</div>
</td>
<td>
Zemlak, Daniel and Leannon
<br><span class="badge badge-primary" >
Desktop Support Technician
</span>
</td>
<td>Purple</td>
<th><button class="btn btn-neutral">
details
</button>
</th>
</tr>
<!-- row 2 -->
<tr>
<th>
<label><input
type="checkbox"
class="checkbox"
name="my_name"
id="my_name"
value=""
/>
</label>
</th>
<td>
<div class="flex items-center space-x-3"><div class="avatar " >
<div class="w-12 mask mask-squircle">
<img src="https://daisyui.com/tailwind-css-component-profile-3@56w.png" alt="" />
</div>
</div>
<div>
<div class="font-bold">Brice Swyre</div>
<div class="text-sm opacity-50">China</div>
</div>
</div>
</td>
<td>
Carroll Group
<br><span class="badge badge-warning" >
Tax Accountant
</span>
</td>
<td>Red</td>
<th><button class="btn btn-neutral">
details
</button>
</th>
</tr>
<!-- row 3 -->
<tr>
<th>
<label><input
type="checkbox"
class="checkbox"
name="my_name"
id="my_name"
value=""
/>
</label>
</th>
<td>
<div class="flex items-center space-x-3"><div class="avatar " >
<div class="w-12 mask mask-squircle">
<img src="https://daisyui.com/tailwind-css-component-profile-4@56w.png" alt="" />
</div>
</div>
<div>
<div class="font-bold">Marjy Ferencz</div>
<div class="text-sm opacity-50">Russia</div>
</div>
</div>
</td>
<td>
Rowe-Schoen
<br><span class="badge badge-info" >
Office Assistant I
</span>
</td>
<td>Crimson</td>
<th><button class="btn btn-neutral">
details
</button>
</th>
</tr>
<!-- row 4 -->
<tr>
<th>
<label><input
type="checkbox"
class="checkbox"
name="my_name"
id="my_name"
value=""
/>
</label>
</th>
<td>
<div class="flex items-center space-x-3"><div class="avatar " >
<div class="w-12 mask mask-squircle">
<img src="https://daisyui.com/tailwind-css-component-profile-5@56w.png" alt="" />
</div>
</div>
<div>
<div class="font-bold">Yancy Tear</div>
<div class="text-sm opacity-50">Brazil</div>
</div>
</div>
</td>
<td>
Wyman-Ledner
<br><span class="badge badge-error" >
Community Outreach Specialist
</span>
</td>
<td>Indigo</td>
<th><button class="btn btn-neutral">
details
</button>
</th>
</tr></tbody>
</table>
</div>
</div>
<div class="w-full text-center my-5 hidden sm:block"><div class="join">
<a role="button" href="#1" class="btn join-item">
1
</a>
<a role="button" class="btn join-item btn-disabled">
...
</a>
<a role="button" href="#37" class="btn join-item">
37
</a>
<a role="button" href="#38" class="btn join-item">
38
</a>
<a role="button" href="#39" class="btn join-item">
39
</a>
<a role="button" href="#40" class="btn join-item btn-active">
40
</a>
<a role="button" href="#41" class="btn join-item">
41
</a>
<a role="button" href="#42" class="btn join-item">
42
</a>
<a role="button" href="#43" class="btn join-item">
43
</a>
<a role="button" class="btn join-item btn-disabled">
...
</a>
<a role="button" href="#97" class="btn join-item">
97
</a>
<a role="button" href="#98" class="btn join-item">
98
</a>
<a role="button" href="#99" class="btn join-item">
99
</a>
</div>
</div>
<div class="w-full text-center my-5 sm:hidden"><div class="join">
<a role="button" href="#40" class="btn join-item btn-md">
«
</a>
<button class="btn join-item btn-md">Page 40</button>
<a role="button" href="#42" class="btn join-item btn-md">
»
</a>
</div>
</div>
</div>
</div>
<div class="drawer-side z-50 ">
<label class="drawer-overlay" @click="open = false"></label>
<div class="overflow-y-auto h-full overflow-y-auto w-80 bg-base-200">
<div class="z-20 bg-base-200 bg-opacity-90 backdrop-blur sticky top-0 items-center justify-center gap-2 mb-10 px-4 py-2 flex shadow-sm">
<a href="/" aria-current="page" aria-label="Homepage" class="flex-0 btn btn-ghost px-2">
<div class="font-title text-accent inline-flex text-lg transition-all duration-200 text-3xl">
<span class="lowercase">Edge</span> <span class="text-base-content uppercase">Component</span>
</div>
</a>
</div>
<ul class="menu text-base-content p-2 rounded-box">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
</ul>
</div>
</div>
</div>
