Commit 930e8709 authored by Sarun Mungthanya's avatar Sarun Mungthanya
Browse files

add , reload , delete patch

parent 5bad2db9
This diff is collapsed.
<x-app-layout title="Application List" is-header-blur="true">
<!-- Main Content Wrapper -->
<main class="main-content w-full px-[var(--margin-x)] pb-8">
<div class="mt-12 text-center">
<div class="avatar h-16 w-16">
<div class="is-initial rounded-full bg-gradient-to-br from-pink-500 to-rose-500 text-white">
<i class="fa-solid fa-shapes text-2xl"></i>
</div>
</div>
<h3 class="mt-3 text-xl font-semibold text-slate-600 dark:text-navy-100">
Lineone Applications
</h3>
<p class="mt-0.5 text-base">
List of prebuilt applications of Lineone
</p>
</div>
<div class="mx-auto mt-8 grid w-full max-w-4xl grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-5 lg:gap-6">
<div class="card p-4 sm:p-5">
<div class="avatar h-12 w-12">
<div class="is-initial rounded-full bg-info text-white">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
</svg>
</div>
</div>
<h2 class="mt-5 text-base font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100">
Chat App
</h2>
<p class="mt-1">
Lineone prebuilt Messaging UI kit includes designs for social
chat.
</p>
<div class="mt-5 pb-1">
<a href="{{ route('apps/chat') }}"
class="border-b border-dashed border-current pb-0.5 font-medium text-primary outline-none transition-colors duration-300 hover:text-primary/70 focus:text-primary/70 dark:text-accent-light dark:hover:text-accent-light/70 dark:focus:text-accent-light/70">View
Application</a>
</div>
</div>
<div class="card p-4 sm:p-5">
<div class="avatar h-12 w-12">
<div class="is-initial rounded-full bg-warning text-white">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2" />
</svg>
</div>
</div>
<h2 class="mt-5 text-base font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100">
Kanban Board
</h2>
<p class="mt-1">
The Kanban Board to keep track of your personal and work tasks.
</p>
<div class="mt-5 pb-1">
<a href="{{ route('apps/kanban') }}"
class="border-b border-dashed border-current pb-0.5 font-medium text-primary outline-none transition-colors duration-300 hover:text-primary/70 focus:text-primary/70 dark:text-accent-light dark:hover:text-accent-light/70 dark:focus:text-accent-light/70">View
Application</a>
</div>
</div>
<div class="card p-4 sm:p-5">
<div class="avatar h-12 w-12">
<div class="is-initial rounded-full bg-secondary text-white">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z" />
</svg>
</div>
</div>
<h2 class="mt-5 text-base font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100">
File Manager
</h2>
<p class="mt-1">
Lineone File Manager UI Kit is designed with modern design trends.
</p>
<div class="mt-5 pb-1">
<a href="{{ route('apps/filemanager') }}"
class="border-b border-dashed border-current pb-0.5 font-medium text-primary outline-none transition-colors duration-300 hover:text-primary/70 focus:text-primary/70 dark:text-accent-light dark:hover:text-accent-light/70 dark:focus:text-accent-light/70">View
Application</a>
</div>
</div>
<div class="card p-4 sm:p-5">
<div class="avatar h-12 w-12">
<div class="is-initial rounded-full bg-primary text-white dark:bg-accent">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
stroke="currentColor" stroke-width="2">
<path d="M12.5293 18L20.9999 8.40002" stroke-linecap="round" stroke-linejoin="round" />
<path d="M3 13.2L7.23529 18L17.8235 6" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
</div>
<h2 class="mt-5 text-base font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100">
Todo App
</h2>
<p class="mt-1">
Lineone Todo UI kit is a simple to-do list and an task management
app.
</p>
<div class="mt-5 pb-1">
<a href="{{ route('apps/todo') }}"
class="border-b border-dashed border-current pb-0.5 font-medium text-primary outline-none transition-colors duration-300 hover:text-primary/70 focus:text-primary/70 dark:text-accent-light dark:hover:text-accent-light/70 dark:focus:text-accent-light/70">View
Application</a>
</div>
</div>
<div class="card p-4 sm:p-5">
<div class="avatar h-12 w-12">
<div class="is-initial rounded-full bg-error text-white">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
</svg>
</div>
</div>
<h2 class="mt-5 text-base font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100">
Mail App
</h2>
<p class="mt-1">
Lineone prebuilt Mail UI kit includes designs for email system.
</p>
<div class="mt-5 pb-1">
<a href="{{ route('apps/mail') }}"
class="border-b border-dashed border-current pb-0.5 font-medium text-primary outline-none transition-colors duration-300 hover:text-primary/70 focus:text-primary/70 dark:text-accent-light dark:hover:text-accent-light/70 dark:focus:text-accent-light/70">View
Application</a>
</div>
</div>
<div class="card p-4 sm:p-5">
<div class="avatar h-12 w-12">
<div class="is-initial rounded-full bg-success text-white">
<i class="fa-solid fa-n text-xl"></i>
</div>
</div>
<h2 class="mt-5 text-base font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100">
NFT Marketplace V1
</h2>
<p class="mt-1">
Lineone NFT Store UI Kit is responsive and high-quality UI design
kit for the NFT marketplace.
</p>
<div class="mt-5 pb-1">
<a href="{{ route('apps/nft1') }}"
class="border-b border-dashed border-current pb-0.5 font-medium text-primary outline-none transition-colors duration-300 hover:text-primary/70 focus:text-primary/70 dark:text-accent-light dark:hover:text-accent-light/70 dark:focus:text-accent-light/70">View
Application</a>
</div>
</div>
<div class="card p-4 sm:p-5">
<div class="avatar h-12 w-12">
<div class="is-initial rounded-full bg-info text-white">
<i class="fa-solid fa-n text-xl"></i>
</div>
</div>
<h2 class="mt-5 text-base font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100">
NFT Marketplace V2
</h2>
<p class="mt-1">
Lineone NFT Store UI Kit is responsive and high-quality UI design
kit for the NFT marketplace.
</p>
<div class="mt-5 pb-1">
<a href="{{ route('apps/nft2') }}"
class="border-b border-dashed border-current pb-0.5 font-medium text-primary outline-none transition-colors duration-300 hover:text-primary/70 focus:text-primary/70 dark:text-accent-light dark:hover:text-accent-light/70 dark:focus:text-accent-light/70">View
Application</a>
</div>
</div>
<div class="card p-4 sm:p-5">
<div class="avatar h-12 w-12">
<div class="is-initial rounded-full bg-warning text-white">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z" />
</svg>
</div>
</div>
<h2 class="mt-5 text-base font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100">
Point of Sale
</h2>
<p class="mt-1">
Lineone POS UI Kit is responsive and high-quality UI design kit
for the Point of sale system.
</p>
<div class="mt-5 pb-1">
<a href="{{ route('apps/pos') }}"
class="border-b border-dashed border-current pb-0.5 font-medium text-primary outline-none transition-colors duration-300 hover:text-primary/70 focus:text-primary/70 dark:text-accent-light dark:hover:text-accent-light/70 dark:focus:text-accent-light/70">View
Application</a>
</div>
</div>
<div class="card p-4 sm:p-5">
<div class="avatar h-12 w-12">
<div class="is-initial rounded-full bg-primary text-white dark:bg-accent">
<i class="fa-solid fa-car-rear text-xl"></i>
</div>
</div>
<h2 class="mt-5 text-base font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100">
Travel
</h2>
<p class="mt-1">
Lineone Travel UI Kit is responsive and high-quality UI design kit
for the travel agancy wesites.
</p>
<div class="mt-5 pb-1">
<a href="{{ route('apps/travel') }}"
class="border-b border-dashed border-current pb-0.5 font-medium text-primary outline-none transition-colors duration-300 hover:text-primary/70 focus:text-primary/70 dark:text-accent-light dark:hover:text-accent-light/70 dark:focus:text-accent-light/70">View
Application</a>
</div>
</div>
</div>
</main>
</x-app-layout>
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
<x-app-layout title="Apexchart Component" is-sidebar-open="true" is-header-blur="true">
<main class="main-content w-full px-[var(--margin-x)] pb-8">
<div class="flex items-center space-x-4 py-5 lg:py-6">
<h2
class="text-xl font-medium text-slate-800 dark:text-navy-50 lg:text-2xl"
>
Apexcharts
</h2>
<div class="hidden h-full py-1 sm:flex">
<div class="h-full w-px bg-slate-300 dark:bg-navy-600"></div>
</div>
<ul class="hidden flex-wrap items-center space-x-2 sm:flex">
<li class="flex items-center space-x-2">
<a
class="text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
href="#"
>Components</a
>
<svg
x-ignore
xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9 5l7 7-7 7"
/>
</svg>
</li>
<li>Apexcharts</li>
</ul>
</div>
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-5 lg:gap-6">
<div class="space-y-4 sm:space-y-5 lg:space-y-6">
<!-- Area Chart -->
<div class="card px-4 pb-4 sm:px-5">
<div class="my-3 flex h-8 items-center justify-between">
<h2
class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base"
>
Area Chart
</h2>
</div>
<div class="max-w-xl">
<p>
<a
href="https://github.com/apexcharts/apexcharts.js"
class="font-normal text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
>Apexcharts</a
>
a modern JavaScript charting library that allows you to build
interactive data visualizations with simple API and many
samples. Check out code for detail of usage.
</p>
<div class="mt-5">
<div>
<div
x-init="$nextTick(() => { $el._x_chart = new ApexCharts($el,pages.charts.demoChart1); $el._x_chart.render() });"
></div>
</div>
</div>
</div>
</div>
<!-- Bar Chart -->
<div class="card px-4 pb-4 sm:px-5">
<div class="my-3 flex h-8 items-center justify-between">
<h2
class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base"
>
Bar Chart
</h2>
</div>
<div class="max-w-xl">
<p>
<a
href="https://github.com/apexcharts/apexcharts.js"
class="font-normal text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
>Apexcharts</a
>
a modern JavaScript charting library that allows you to build
interactive data visualizations with simple API and many
samples. Check out code for detail of usage.
</p>
<div class="mt-5">
<div>
<div
x-init="$nextTick(() => { $el._x_chart = new ApexCharts($el,pages.charts.demoChart3); $el._x_chart.render() });"
></div>
</div>
</div>
</div>
</div>
<!-- Candlestick Chart -->
<div class="card px-4 pb-4 sm:px-5">
<div class="my-3 flex h-8 items-center justify-between">
<h2
class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base"
>
Candlestick
</h2>
</div>
<div class="max-w-xl">
<p>
<a
href="https://github.com/apexcharts/apexcharts.js"
class="font-normal text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
>Apexcharts</a
>
a modern JavaScript charting library that allows you to build
interactive data visualizations with simple API and many
samples. Check out code for detail of usage.
</p>
<div class="mt-5">
<div>
<div
x-init="$nextTick(() => { $el._x_chart = new ApexCharts($el,pages.charts.demoChart5); $el._x_chart.render() });"
></div>
</div>
</div>
</div>
</div>
<!-- Bubble Chart -->
<div class="card px-4 pb-4 sm:px-5">
<div class="my-3 flex h-8 items-center justify-between">
<h2
class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base"
>
Bubble Chart
</h2>
</div>
<div class="max-w-xl">
<p>
<a
href="https://github.com/apexcharts/apexcharts.js"
class="font-normal text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
>Apexcharts</a
>
a modern JavaScript charting library that allows you to build
interactive data visualizations with simple API and many
samples. Check out code for detail of usage.
</p>
<div class="mt-5">
<div>
<div
x-init="$nextTick(() => { $el._x_chart = new ApexCharts($el,pages.charts.demoChart7); $el._x_chart.render() });"
></div>
</div>
</div>
</div>
</div>
<!-- Radar Chart -->
<div class="card px-4 pb-4 sm:px-5">
<div class="my-3 flex h-8 items-center justify-between">
<h2
class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base"
>
Radar Chart
</h2>
</div>
<div class="max-w-xl">
<p>
<a
href="https://github.com/apexcharts/apexcharts.js"
class="font-normal text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
>Apexcharts</a
>
a modern JavaScript charting library that allows you to build
interactive data visualizations with simple API and many
samples. Check out code for detail of usage.
</p>
<div class="mt-5">
<div>
<div
x-init="$nextTick(() => { $el._x_chart = new ApexCharts($el,pages.charts.demoChart9); $el._x_chart.render() });"
></div>
</div>
</div>
</div>
</div>
</div>
<div class="space-y-4 sm:space-y-5 lg:space-y-6">
<!-- Area Chart -->
<div class="card px-4 pb-4 sm:px-5">
<div class="my-3 flex h-8 items-center justify-between">
<h2
class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base"
>
Area Chart
</h2>
</div>
<div class="max-w-xl">
<p>
<a
href="https://github.com/apexcharts/apexcharts.js"
class="font-normal text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
>Apexcharts</a
>
a modern JavaScript charting library that allows you to build
interactive data visualizations with simple API and many
samples. Check out code for detail of usage.
</p>
<div class="mt-5">
<div>
<div
x-init="$nextTick(() => { $el._x_chart = new ApexCharts($el,pages.charts.demoChart2); $el._x_chart.render() });"
></div>
</div>
</div>
</div>
</div>
<!-- Line Chart -->
<div class="card px-4 pb-4 sm:px-5">
<div class="my-3 flex h-8 items-center justify-between">
<h2
class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base"
>
Line Chart
</h2>
</div>
<div class="max-w-xl">
<p>
<a
href="https://github.com/apexcharts/apexcharts.js"
class="font-normal text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
>Apexcharts</a
>
a modern JavaScript charting library that allows you to build
interactive data visualizations with simple API and many
samples. Check out code for detail of usage.
</p>
<div class="mt-5">
<div>
<div
x-init="$nextTick(() => { $el._x_chart = new ApexCharts($el,pages.charts.demoChart4); $el._x_chart.render() });"
></div>
</div>
</div>
</div>
</div>
<!-- Column Chart -->
<div class="card px-4 pb-4 sm:px-5">
<div class="my-3 flex h-8 items-center justify-between">
<h2
class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base"
>
Column Chart
</h2>
</div>
<div class="max-w-xl">
<p>
<a
href="https://github.com/apexcharts/apexcharts.js"
class="font-normal text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
>Apexcharts</a
>
a modern JavaScript charting library that allows you to build
interactive data visualizations with simple API and many
samples. Check out code for detail of usage.
</p>
<div class="mt-5">
<div>
<div
x-init="$nextTick(() => { $el._x_chart = new ApexCharts($el,pages.charts.demoChart6); $el._x_chart.render() });"
></div>
</div>
</div>
</div>
</div>
<!-- Radialbar Chart -->
<div class="card px-4 pb-4 sm:px-5">
<div class="my-3 flex h-8 items-center justify-between">
<h2
class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base"
>
Radialbar Chart
</h2>
</div>
<div class="max-w-xl">
<p>
<a
href="https://github.com/apexcharts/apexcharts.js"
class="font-normal text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
>Apexcharts</a
>
a modern JavaScript charting library that allows you to build
interactive data visualizations with simple API and many
samples. Check out code for detail of usage.
</p>
<div class="mt-5">
<div>
<div
x-init="$nextTick(() => { $el._x_chart = new ApexCharts($el,pages.charts.demoChart8); $el._x_chart.render() });"
></div>
</div>
</div>
</div>
</div>
<!-- Polar Area Chart -->
<div class="card px-4 pb-4 sm:px-5">
<div class="my-3 flex h-8 items-center justify-between">
<h2
class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base"
>
Polar Area Chart
</h2>
</div>
<div class="max-w-xl">
<p>
<a
href="https://github.com/apexcharts/apexcharts.js"
class="font-normal text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
>Apexcharts</a
>
a modern JavaScript charting library that allows you to build
interactive data visualizations with simple API and many
samples. Check out code for detail of usage.
</p>
<div class="mt-5">
<div>
<div
x-init="$nextTick(() => { $el._x_chart = new ApexCharts($el,pages.charts.demoChart10); $el._x_chart.render() });"
></div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</x-app-layout>
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
<x-app-layout title="Monochrome Mode" is-sidebar-open="true" is-header-blur="true">
<main class="main-content w-full px-[var(--margin-x)] pb-8">
<div class="flex items-center space-x-4 py-5 lg:py-6">
<h2
class="text-xl font-medium text-slate-800 dark:text-navy-50 lg:text-2xl"
>
Monochrome Mode
</h2>
<div class="hidden h-full py-1 sm:flex">
<div class="h-full w-px bg-slate-300 dark:bg-navy-600"></div>
</div>
<ul class="hidden flex-wrap items-center space-x-2 sm:flex">
<li class="flex items-center space-x-2">
<a
class="text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
href="#"
>Components</a
>
<svg
x-ignore
xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9 5l7 7-7 7"
/>
</svg>
</li>
<li>Monochrome Mode</li>
</ul>
</div>
<div class="grid grid-cols-1 gap-4 sm:gap-5 lg:gap-6">
<!-- Monochrome Mode -->
<div class="card px-4 pb-4 sm:px-5">
<div class="my-3 flex h-8 items-center justify-between">
<h2
class="font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base"
>
Monochrome Mode
</h2>
<label class="inline-flex items-center space-x-2">
<span class="text-xs text-slate-400 dark:text-navy-300"
>Code</span
>
<input
@change="helpers.toggleCode"
class="form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
type="checkbox"
/>
</label>
</div>
<div class="max-w-xl">
<p>
Monochromatic UI/UX design may look simpler. Monochrome mode can
be used if the network is offline.
</p>
<div class="inline-space mt-5 flex flex-wrap">
<div
class="h-16 w-16 rounded-lg bg-primary dark:bg-accent"
></div>
<div class="h-16 w-16 rounded-lg bg-secondary"></div>
<div class="h-16 w-16 rounded-lg bg-info"></div>
<div class="h-16 w-16 rounded-lg bg-success"></div>
<div class="h-16 w-16 rounded-lg bg-warning"></div>
<div class="h-16 w-16 rounded-lg bg-error"></div>
</div>
<label class="mt-4 flex items-center space-x-2">
<input
x-model="$store.global.isMonochromeModeEnabled"
class="form-switch h-5 w-10 rounded-lg bg-slate-300 before:rounded-md before:bg-slate-50 checked:bg-slate-500 checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-navy-400 dark:checked:before:bg-white"
type="checkbox"
/>
<span> Toggle Monochrome Mode</span>
</label>
</div>
<div class="code-wrapper hidden pt-4">
<pre
class="is-scrollbar-hidden max-h-96 overflow-auto rounded-lg"
x-init="hljs.highlightElement($el)"
>
<code class="language-html" x-ignore>
&lt;label class=&quot;flex items-center space-x-2&quot;&gt;&#13;&#10; &lt;input&#13;&#10; x-model=&quot;$store.global.isMonochromeModeEnabled&quot;&#13;&#10; class=&quot;form-switch h-5 w-10 rounded-lg bg-slate-300 before:rounded-md before:bg-slate-50 checked:bg-slate-500 checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-navy-400 dark:checked:before:bg-white&quot;&#13;&#10; type=&quot;checkbox&quot;&#13;&#10; /&gt;&#13;&#10; &lt;span&gt; Toggle Monochrome Mode&lt;/span&gt;&#13;&#10; &lt;/label&gt;&#13;&#10; </code>
</pre>
</div>
</div>
</div>
</main>
</x-app-layout>
This diff is collapsed.
This diff is collapsed.
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment