Removing redundant components
This commit is contained in:
DwCay
@@ -1,226 +0,0 @@
|
||||
import React, { useState } from 'react';
|
||||
|
||||
import Sidebar from '../../partials/Sidebar';
|
||||
import Header from '../../partials/Header';
|
||||
import Banner from '../../components/Banner';
|
||||
import Banner2 from '../../components/Banner2';
|
||||
import Toast from '../../components/Toast';
|
||||
import Toast2 from '../../components/Toast2';
|
||||
import Toast3 from '../../components/Toast3';
|
||||
import Notification from '../../components/Notification';
|
||||
|
||||
function AlertPage() {
|
||||
|
||||
const [sidebarOpen, setSidebarOpen] = useState(false);
|
||||
const [bannerWarningOpen, setBannerWarningOpen] = useState(true);
|
||||
const [bannerErrorOpen, setBannerErrorOpen] = useState(true);
|
||||
const [bannerSuccessOpen, setBannerSuccessOpen] = useState(true);
|
||||
const [bannerInfoOpen, setBannerInfoOpen] = useState(true);
|
||||
const [banner2WarningOpen, setBanner2WarningOpen] = useState(true);
|
||||
const [banner2ErrorOpen, setBanner2ErrorOpen] = useState(true);
|
||||
const [banner2SuccessOpen, setBanner2SuccessOpen] = useState(true);
|
||||
const [banner2InfoOpen, setBanner2InfoOpen] = useState(true);
|
||||
const [toastWarningOpen, setToastWarningOpen] = useState(true);
|
||||
const [toastErrorOpen, setToastErrorOpen] = useState(true);
|
||||
const [toastSuccessOpen, setToastSuccessOpen] = useState(true);
|
||||
const [toastInfoOpen, setToastInfoOpen] = useState(true);
|
||||
const [toast2WarningOpen, setToast2WarningOpen] = useState(true);
|
||||
const [toast2ErrorOpen, setToast2ErrorOpen] = useState(true);
|
||||
const [toast2SuccessOpen, setToast2SuccessOpen] = useState(true);
|
||||
const [toast2InfoOpen, setToast2InfoOpen] = useState(true);
|
||||
const [toast3WarningOpen, setToast3WarningOpen] = useState(true);
|
||||
const [toast3ErrorOpen, setToast3ErrorOpen] = useState(true);
|
||||
const [toast3SuccessOpen, setToast3SuccessOpen] = useState(true);
|
||||
const [toast3InfoOpen, setToast3InfoOpen] = useState(true);
|
||||
const [notificationWarningOpen, setNotificationWarningOpen] = useState(true);
|
||||
const [notificationErrorOpen, setNotificationErrorOpen] = useState(true);
|
||||
const [notificationSuccessOpen, setNotificationSuccessOpen] = useState(true);
|
||||
const [notificationInfoOpen, setNotificationInfoOpen] = useState(true);
|
||||
|
||||
return (
|
||||
<div className="flex h-screen overflow-hidden">
|
||||
|
||||
{/* Sidebar */}
|
||||
<Sidebar sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
|
||||
|
||||
{/* Content area */}
|
||||
<div className="relative flex flex-col flex-1 overflow-y-auto overflow-x-hidden bg-white">
|
||||
|
||||
{/* Site header */}
|
||||
<Header sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
|
||||
|
||||
<main>
|
||||
<div className="px-4 sm:px-6 lg:px-8 py-8 w-full max-w-9xl mx-auto">
|
||||
|
||||
{/* Page header */}
|
||||
<div className="mb-8">
|
||||
<h1 className="text-2xl md:text-3xl text-slate-800 font-bold">Alert & Banner ✨</h1>
|
||||
</div>
|
||||
|
||||
<div className="border-t border-slate-200">
|
||||
|
||||
{/* Components */}
|
||||
<div className="space-y-8 mt-8">
|
||||
|
||||
{/* Banner */}
|
||||
<div>
|
||||
<h2 className="text-2xl text-slate-800 font-bold mb-6">Banner</h2>
|
||||
<div className="space-y-3">
|
||||
|
||||
<Banner type="warning" open={bannerWarningOpen} setOpen={setBannerWarningOpen}>
|
||||
We’re currently experiencing an increase in inquiries. There may be a delay in responses from the Support.
|
||||
</Banner>
|
||||
|
||||
<Banner type="success" open={bannerSuccessOpen} setOpen={setBannerSuccessOpen}>
|
||||
We’re currently experiencing an increase in inquiries. There may be a delay in responses from the Support.
|
||||
</Banner>
|
||||
|
||||
<Banner type="error" open={bannerErrorOpen} setOpen={setBannerErrorOpen}>
|
||||
We’re currently experiencing an increase in inquiries. There may be a delay in responses from the Support.
|
||||
</Banner>
|
||||
|
||||
<Banner open={bannerInfoOpen} setOpen={setBannerInfoOpen}>
|
||||
We’re currently experiencing an increase in inquiries. There may be a delay in responses from the Support.
|
||||
</Banner>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Banner 2 */}
|
||||
<div>
|
||||
<h2 className="text-2xl text-slate-800 font-bold mb-6">Banner 2</h2>
|
||||
<div className="space-y-3">
|
||||
|
||||
<Banner2 type="warning" open={banner2WarningOpen} setOpen={setBanner2WarningOpen}>
|
||||
We’re currently experiencing an increase in inquiries. There may be a delay in responses from the Support.
|
||||
</Banner2>
|
||||
|
||||
<Banner2 type="success" open={banner2SuccessOpen} setOpen={setBanner2SuccessOpen}>
|
||||
We’re currently experiencing an increase in inquiries. There may be a delay in responses from the Support.
|
||||
</Banner2>
|
||||
|
||||
<Banner2 type="error" open={banner2ErrorOpen} setOpen={setBanner2ErrorOpen}>
|
||||
We’re currently experiencing an increase in inquiries. There may be a delay in responses from the Support.
|
||||
</Banner2>
|
||||
|
||||
<Banner2 open={banner2InfoOpen} setOpen={setBanner2InfoOpen}>
|
||||
We’re currently experiencing an increase in inquiries. There may be a delay in responses from the Support.
|
||||
</Banner2>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Toast */}
|
||||
<div>
|
||||
<h2 className="text-2xl text-slate-800 font-bold mb-6">Toast</h2>
|
||||
<div className="space-y-3">
|
||||
|
||||
<Toast type="warning" open={toastWarningOpen} setOpen={setToastWarningOpen}>
|
||||
A warning toast.
|
||||
</Toast>
|
||||
|
||||
<Toast type="success" open={toastSuccessOpen} setOpen={setToastSuccessOpen}>
|
||||
A successful toast.
|
||||
</Toast>
|
||||
|
||||
<Toast type="error" open={toastErrorOpen} setOpen={setToastErrorOpen}>
|
||||
A dangerous toast.
|
||||
</Toast>
|
||||
|
||||
<Toast open={toastInfoOpen} setOpen={setToastInfoOpen}>
|
||||
An informational toast.
|
||||
</Toast>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Toast 2 */}
|
||||
<div>
|
||||
<h2 className="text-2xl text-slate-800 font-bold mb-6">Toast 2</h2>
|
||||
<div className="space-y-3">
|
||||
|
||||
<Toast2 type="warning" open={toast2WarningOpen} setOpen={setToast2WarningOpen}>
|
||||
A warning toast.
|
||||
</Toast2>
|
||||
|
||||
<Toast2 type="success" open={toast2SuccessOpen} setOpen={setToast2SuccessOpen}>
|
||||
A successful toast.
|
||||
</Toast2>
|
||||
|
||||
<Toast2 type="error" open={toast2ErrorOpen} setOpen={setToast2ErrorOpen}>
|
||||
A dangerous toast.
|
||||
</Toast2>
|
||||
|
||||
<Toast2 open={toast2InfoOpen} setOpen={setToast2InfoOpen}>
|
||||
An informational toast.
|
||||
</Toast2>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Toast 3 */}
|
||||
<div>
|
||||
<h2 className="text-2xl text-slate-800 font-bold mb-6">Toast 3</h2>
|
||||
<div className="space-y-3">
|
||||
|
||||
<Toast3 type="warning" open={toast3WarningOpen} setOpen={setToast3WarningOpen}>
|
||||
A warning toast.
|
||||
</Toast3>
|
||||
|
||||
<Toast3 type="success" open={toast3SuccessOpen} setOpen={setToast3SuccessOpen}>
|
||||
A successful toast.
|
||||
</Toast3>
|
||||
|
||||
<Toast3 type="error" open={toast3ErrorOpen} setOpen={setToast3ErrorOpen}>
|
||||
A dangerous toast.
|
||||
</Toast3>
|
||||
|
||||
<Toast3 open={toast3InfoOpen} setOpen={setToast3InfoOpen}>
|
||||
An informational toast.
|
||||
</Toast3>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Notification */}
|
||||
<div>
|
||||
<h2 className="text-2xl text-slate-800 font-bold mb-6">Notification</h2>
|
||||
<div className="space-y-3">
|
||||
|
||||
<Notification type="warning" open={notificationWarningOpen} setOpen={setNotificationWarningOpen}>
|
||||
<div className="font-medium text-slate-800 mb-1">Merged Pull Request</div>
|
||||
<div>Lorem ipsum dolor sit amet, consectetur adipiscing sed do eiusmod tempor incididunt ut labore et dolore.</div>
|
||||
</Notification>
|
||||
|
||||
<Notification type="success" open={notificationSuccessOpen} setOpen={setNotificationSuccessOpen}>
|
||||
<div className="font-medium text-slate-800 mb-1">Merged Pull Request</div>
|
||||
<div>Lorem ipsum dolor sit amet, consectetur adipiscing sed do eiusmod tempor incididunt ut labore et dolore.</div>
|
||||
</Notification>
|
||||
|
||||
<Notification type="error" open={notificationErrorOpen} setOpen={setNotificationErrorOpen}>
|
||||
<div className="font-medium text-slate-800 mb-1">Merged Pull Request</div>
|
||||
<div>Lorem ipsum dolor sit amet, consectetur adipiscing sed do eiusmod tempor incididunt ut labore et dolore.</div>
|
||||
</Notification>
|
||||
|
||||
<Notification open={notificationInfoOpen} setOpen={setNotificationInfoOpen}>
|
||||
<div className="font-medium text-slate-800 mb-1">Merged Pull Request</div>
|
||||
<div>Lorem ipsum dolor sit amet, consectetur adipiscing sed do eiusmod tempor incididunt ut labore et dolore.</div>
|
||||
</Notification>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default AlertPage;
|
||||
@@ -1,228 +0,0 @@
|
||||
import React, { useState } from 'react';
|
||||
|
||||
import Sidebar from '../../partials/Sidebar';
|
||||
import Header from '../../partials/Header';
|
||||
|
||||
import Avatar01 from '../../images/avatar-01.jpg';
|
||||
import Avatar02 from '../../images/avatar-02.jpg';
|
||||
import Avatar03 from '../../images/avatar-03.jpg';
|
||||
import Avatar04 from '../../images/avatar-04.jpg';
|
||||
import Avatar05 from '../../images/avatar-05.jpg';
|
||||
import Avatar06 from '../../images/avatar-06.jpg';
|
||||
|
||||
function AvatarPage() {
|
||||
|
||||
const [sidebarOpen, setSidebarOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<div className="flex h-screen overflow-hidden">
|
||||
|
||||
{/* Sidebar */}
|
||||
<Sidebar sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
|
||||
|
||||
{/* Content area */}
|
||||
<div className="relative flex flex-col flex-1 overflow-y-auto overflow-x-hidden bg-white">
|
||||
|
||||
{/* Site header */}
|
||||
<Header sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
|
||||
|
||||
<main>
|
||||
<div className="px-4 sm:px-6 lg:px-8 py-8 w-full max-w-9xl mx-auto">
|
||||
|
||||
{/* Page header */}
|
||||
<div className="mb-8">
|
||||
<h1 className="text-2xl md:text-3xl text-slate-800 font-bold">Avatar ✨</h1>
|
||||
</div>
|
||||
|
||||
<div className="border-t border-slate-200">
|
||||
|
||||
{/* Components */}
|
||||
<div className="space-y-8 mt-8">
|
||||
|
||||
{/* Basic Avatars */}
|
||||
<div>
|
||||
<h2 className="text-2xl text-slate-800 font-bold mb-6">Basic Avatars</h2>
|
||||
<div className="flex flex-wrap items-center -m-1.5">
|
||||
<div className="m-1.5">
|
||||
{/* Start */}
|
||||
<img className="rounded-full" src={Avatar01} width="24" height="24" alt="Avatar" />
|
||||
{/* End */}
|
||||
</div>
|
||||
<div className="m-1.5">
|
||||
{/* Start */}
|
||||
<img className="rounded-full" src={Avatar01} width="28" height="28" alt="Avatar" />
|
||||
{/* End */}
|
||||
</div>
|
||||
<div className="m-1.5">
|
||||
{/* Start */}
|
||||
<img className="rounded-full" src={Avatar01} width="32" height="32" alt="Avatar" />
|
||||
{/* End */}
|
||||
</div>
|
||||
<div className="m-1.5">
|
||||
{/* Start */}
|
||||
<img className="rounded-full" src={Avatar01} width="40" height="40" alt="Avatar" />
|
||||
{/* End */}
|
||||
</div>
|
||||
<div className="m-1.5">
|
||||
{/* Start */}
|
||||
<img className="rounded-full" src={Avatar01} width="64" height="64" alt="Avatar" />
|
||||
{/* End */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Avatars with Notification */}
|
||||
<div>
|
||||
<h2 className="text-2xl text-slate-800 font-bold mb-6">Avatars with Notification</h2>
|
||||
<div className="flex flex-wrap items-center -m-1.5">
|
||||
<div className="m-1.5">
|
||||
{/* Start */}
|
||||
<div className="relative">
|
||||
<img className="rounded-full" src={Avatar01} width="24" height="24" alt="Avatar" />
|
||||
<div className="absolute top-0 right-0 w-2 h-2 bg-rose-500 border-2 border-white rounded-full"></div>
|
||||
</div>
|
||||
{/* End */}
|
||||
</div>
|
||||
<div className="m-1.5">
|
||||
{/* Start */}
|
||||
<div className="relative">
|
||||
<img className="rounded-full" src={Avatar01} width="28" height="28" alt="Avatar" />
|
||||
<div className="absolute top-0 right-0 w-2.5 h-2.5 bg-emerald-500 border-2 border-white rounded-full"></div>
|
||||
</div>
|
||||
{/* End */}
|
||||
</div>
|
||||
<div className="m-1.5">
|
||||
{/* Start */}
|
||||
<div className="relative">
|
||||
<img className="rounded-full" src={Avatar01} width="32" height="32" alt="Avatar" />
|
||||
<div className="absolute top-0 right-0 w-2.5 h-2.5 bg-rose-500 border-2 border-white rounded-full"></div>
|
||||
</div>
|
||||
{/* End */}
|
||||
</div>
|
||||
<div className="m-1.5">
|
||||
{/* Start */}
|
||||
<div className="relative">
|
||||
<img className="rounded-full" src={Avatar01} width="40" height="40" alt="Avatar" />
|
||||
<div className="absolute top-0 right-0 w-3 h-3 bg-emerald-500 border-2 border-white rounded-full"></div>
|
||||
</div>
|
||||
{/* End */}
|
||||
</div>
|
||||
<div className="m-1.5">
|
||||
{/* Start */}
|
||||
<div className="relative">
|
||||
<img className="rounded-full" src={Avatar01} width="64" height="64" alt="Avatar" />
|
||||
<div className="absolute top-1 right-1 w-3 h-3 bg-rose-500 border-2 border-white rounded-full"></div>
|
||||
</div>
|
||||
{/* End */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Avatars with Placeholder Icon */}
|
||||
<div>
|
||||
<h2 className="text-2xl text-slate-800 font-bold mb-6">Avatars with Placeholder Icon</h2>
|
||||
<div className="flex flex-wrap items-center -m-1.5">
|
||||
<div className="m-1.5">
|
||||
{/* Start */}
|
||||
<div className="flex items-center justify-center bg-slate-100 rounded-full w-6 h-6 text-[10px] font-semibold uppercase text-slate-500">MS</div>
|
||||
{/* End */}
|
||||
</div>
|
||||
<div className="m-1.5">
|
||||
{/* Start */}
|
||||
<div className="flex items-center justify-center bg-slate-100 rounded-full w-7 h-7 text-[10px] font-semibold uppercase text-slate-500">MS</div>
|
||||
{/* End */}
|
||||
</div>
|
||||
<div className="m-1.5">
|
||||
{/* Start */}
|
||||
<div className="flex items-center justify-center bg-slate-100 rounded-full w-8 h-8 text-xs font-semibold uppercase text-slate-500">MS</div>
|
||||
{/* End */}
|
||||
</div>
|
||||
<div className="m-1.5">
|
||||
{/* Start */}
|
||||
<div className="flex items-center justify-center bg-slate-100 rounded-full w-10 h-10 text-sm font-semibold uppercase text-slate-500">MS</div>
|
||||
{/* End */}
|
||||
</div>
|
||||
<div className="m-1.5">
|
||||
{/* Start */}
|
||||
<div className="flex items-center justify-center bg-slate-100 rounded-full w-16 h-16 text-lg font-semibold uppercase text-slate-500">MS</div>
|
||||
{/* End */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Avatars Groups */}
|
||||
<div>
|
||||
<h2 className="text-2xl text-slate-800 font-bold mb-6">Avatars Groups</h2>
|
||||
<div className="flex flex-wrap items-center -m-1.5">
|
||||
<div className="m-1.5">
|
||||
{/* Start */}
|
||||
<div className="flex -space-x-3 -ml-0.5">
|
||||
<img className="rounded-full border-2 border-white box-content" src={Avatar02} width="24" height="24" alt="Avatar" />
|
||||
<img className="rounded-full border-2 border-white box-content" src={Avatar03} width="24" height="24" alt="Avatar" />
|
||||
<img className="rounded-full border-2 border-white box-content" src={Avatar04} width="24" height="24" alt="Avatar" />
|
||||
<img className="rounded-full border-2 border-white box-content" src={Avatar05} width="24" height="24" alt="Avatar" />
|
||||
<img className="rounded-full border-2 border-white box-content" src={Avatar06} width="24" height="24" alt="Avatar" />
|
||||
</div>
|
||||
{/* End */}
|
||||
</div>
|
||||
<div className="m-1.5">
|
||||
{/* Start */}
|
||||
<div className="flex -space-x-3 -ml-0.5">
|
||||
<img className="rounded-full border-2 border-white box-content" src={Avatar02} width="28" height="28" alt="Avatar" />
|
||||
<img className="rounded-full border-2 border-white box-content" src={Avatar03} width="28" height="28" alt="Avatar" />
|
||||
<img className="rounded-full border-2 border-white box-content" src={Avatar04} width="28" height="28" alt="Avatar" />
|
||||
<img className="rounded-full border-2 border-white box-content" src={Avatar05} width="28" height="28" alt="Avatar" />
|
||||
<img className="rounded-full border-2 border-white box-content" src={Avatar06} width="28" height="28" alt="Avatar" />
|
||||
</div>
|
||||
{/* End */}
|
||||
</div>
|
||||
<div className="m-1.5">
|
||||
{/* Start */}
|
||||
<div className="flex -space-x-3 -ml-0.5">
|
||||
<img className="rounded-full border-2 border-white box-content" src={Avatar02} width="32" height="32" alt="Avatar" />
|
||||
<img className="rounded-full border-2 border-white box-content" src={Avatar03} width="32" height="32" alt="Avatar" />
|
||||
<img className="rounded-full border-2 border-white box-content" src={Avatar04} width="32" height="32" alt="Avatar" />
|
||||
<img className="rounded-full border-2 border-white box-content" src={Avatar05} width="32" height="32" alt="Avatar" />
|
||||
<img className="rounded-full border-2 border-white box-content" src={Avatar06} width="32" height="32" alt="Avatar" />
|
||||
</div>
|
||||
{/* End */}
|
||||
</div>
|
||||
<div className="m-1.5">
|
||||
{/* Start */}
|
||||
<div className="flex -space-x-4 -ml-0.5">
|
||||
<img className="rounded-full border-2 border-white box-content" src={Avatar02} width="40" height="40" alt="Avatar" />
|
||||
<img className="rounded-full border-2 border-white box-content" src={Avatar03} width="40" height="40" alt="Avatar" />
|
||||
<img className="rounded-full border-2 border-white box-content" src={Avatar04} width="40" height="40" alt="Avatar" />
|
||||
<img className="rounded-full border-2 border-white box-content" src={Avatar05} width="40" height="40" alt="Avatar" />
|
||||
<img className="rounded-full border-2 border-white box-content" src={Avatar06} width="40" height="40" alt="Avatar" />
|
||||
</div>
|
||||
{/* End */}
|
||||
</div>
|
||||
<div className="m-1.5">
|
||||
{/* Start */}
|
||||
<div className="flex -space-x-7 -ml-0.5">
|
||||
<img className="rounded-full border-2 border-white box-content" src={Avatar02} width="64" height="64" alt="Avatar" />
|
||||
<img className="rounded-full border-2 border-white box-content" src={Avatar03} width="64" height="64" alt="Avatar" />
|
||||
<img className="rounded-full border-2 border-white box-content" src={Avatar04} width="64" height="64" alt="Avatar" />
|
||||
<img className="rounded-full border-2 border-white box-content" src={Avatar05} width="64" height="64" alt="Avatar" />
|
||||
<img className="rounded-full border-2 border-white box-content" src={Avatar06} width="64" height="64" alt="Avatar" />
|
||||
</div>
|
||||
{/* End */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default AvatarPage;
|
||||
@@ -1,120 +0,0 @@
|
||||
import React, { useState } from 'react';
|
||||
|
||||
import Sidebar from '../../partials/Sidebar';
|
||||
import Header from '../../partials/Header';
|
||||
|
||||
function BreadcrumbPage() {
|
||||
|
||||
const [sidebarOpen, setSidebarOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<div className="flex h-screen overflow-hidden">
|
||||
|
||||
{/* Sidebar */}
|
||||
<Sidebar sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
|
||||
|
||||
{/* Content area */}
|
||||
<div className="relative flex flex-col flex-1 overflow-y-auto overflow-x-hidden bg-white">
|
||||
|
||||
{/* Site header */}
|
||||
<Header sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
|
||||
|
||||
<main>
|
||||
<div className="px-4 sm:px-6 lg:px-8 py-8 w-full max-w-9xl mx-auto">
|
||||
|
||||
{/* Page header */}
|
||||
<div className="mb-8">
|
||||
<h1 className="text-2xl md:text-3xl text-slate-800 font-bold">Breadcrumb ✨</h1>
|
||||
</div>
|
||||
|
||||
<div className="border-t border-slate-200">
|
||||
|
||||
{/* Components */}
|
||||
<div className="space-y-8 mt-8">
|
||||
|
||||
{/* With Slashes */}
|
||||
<div>
|
||||
<h2 className="text-2xl text-slate-800 font-bold mb-6">With Slashes</h2>
|
||||
<div className="px-6 py-8 bg-slate-50 border border-slate-200 rounded-sm">
|
||||
<div className="text-center">
|
||||
{/* Start */}
|
||||
<ul className="inline-flex flex-wrap text-sm font-medium">
|
||||
<li className="after:content-['/'] last:after:hidden after:text-slate-400 after:px-2">
|
||||
<a className="text-slate-500 hover:text-indigo-500" href="#0">Home</a>
|
||||
</li>
|
||||
<li className="after:content-['/'] last:after:hidden after:text-slate-400 after:px-2">
|
||||
<a className="text-slate-500 hover:text-indigo-500" href="#0">Settings</a>
|
||||
</li>
|
||||
<li className="after:content-['/'] last:after:hidden after:text-slate-400 after:px-2">
|
||||
<a className="text-slate-500 hover:text-indigo-500" href="#0">Notifications</a>
|
||||
</li>
|
||||
</ul>
|
||||
{/* End */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* With Dots */}
|
||||
<div>
|
||||
<h2 className="text-2xl text-slate-800 font-bold mb-6">With Dots</h2>
|
||||
<div className="px-6 py-8 bg-slate-50 border border-slate-200 rounded-sm">
|
||||
<div className="text-center">
|
||||
{/* Start */}
|
||||
<ul className="inline-flex flex-wrap text-sm font-medium">
|
||||
<li className="after:content-['·'] last:after:hidden after:text-slate-400 after:px-2">
|
||||
<a className="text-slate-500 hover:text-indigo-500" href="#0">Home</a>
|
||||
</li>
|
||||
<li className="after:content-['·'] last:after:hidden after:text-slate-400 after:px-2">
|
||||
<a className="text-slate-500 hover:text-indigo-500" href="#0">Settings</a>
|
||||
</li>
|
||||
<li className="after:content-['·'] last:after:hidden after:text-slate-400 after:px-2">
|
||||
<a className="text-slate-500 hover:text-indigo-500" href="#0">Notifications</a>
|
||||
</li>
|
||||
</ul>
|
||||
{/* End */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* With Chevrons */}
|
||||
<div>
|
||||
<h2 className="text-2xl text-slate-800 font-bold mb-6">With Chevrons</h2>
|
||||
<div className="px-6 py-8 bg-slate-50 border border-slate-200 rounded-sm">
|
||||
<div className="text-center">
|
||||
{/* Start */}
|
||||
<ul className="inline-flex flex-wrap text-sm font-medium">
|
||||
<li className="flex items-center">
|
||||
<a className="text-slate-500 hover:text-indigo-500" href="#0">Home</a>
|
||||
<svg className="h-4 w-4 fill-current text-slate-400 mx-3" viewBox="0 0 16 16">
|
||||
<path d="M6.6 13.4L5.2 12l4-4-4-4 1.4-1.4L12 8z" />
|
||||
</svg>
|
||||
</li>
|
||||
<li className="flex items-center">
|
||||
<a className="text-slate-500 hover:text-indigo-500" href="#0">Settings</a>
|
||||
<svg className="h-4 w-4 fill-current text-slate-400 mx-3" viewBox="0 0 16 16">
|
||||
<path d="M6.6 13.4L5.2 12l4-4-4-4 1.4-1.4L12 8z" />
|
||||
</svg>
|
||||
</li>
|
||||
<li className="flex items-center">
|
||||
<a className="text-slate-500 hover:text-indigo-500" href="#0">Notifications</a>
|
||||
</li>
|
||||
</ul>
|
||||
{/* End */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default BreadcrumbPage;
|
||||
@@ -1,123 +0,0 @@
|
||||
import React, { useState } from 'react';
|
||||
|
||||
import Sidebar from '../../partials/Sidebar';
|
||||
import Header from '../../partials/Header';
|
||||
import DropdownClassic from '../../components/DropdownClassic';
|
||||
import DropdownFull from '../../components/DropdownFull';
|
||||
import DropdownFilter from '../../components/DropdownFilter';
|
||||
import DropdownProfile from '../../components/DropdownProfile';
|
||||
import DropdownSwitch from '../../components/DropdownSwitch';
|
||||
import DropdownNotifications from '../../components/DropdownNotifications';
|
||||
import DropdownHelp from '../../components/DropdownHelp';
|
||||
import DropdownEditMenu from '../../components/DropdownEditMenu';
|
||||
import Datepicker from '../../components/Datepicker';
|
||||
|
||||
function DropdownPage() {
|
||||
|
||||
const [sidebarOpen, setSidebarOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<div className="flex h-screen overflow-hidden">
|
||||
|
||||
{/* Sidebar */}
|
||||
<Sidebar sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
|
||||
|
||||
{/* Content area */}
|
||||
<div className="relative flex flex-col flex-1 overflow-y-auto overflow-x-hidden bg-white">
|
||||
|
||||
{/* Site header */}
|
||||
<Header sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
|
||||
|
||||
<main>
|
||||
<div className="px-4 sm:px-6 lg:px-8 py-8 w-full max-w-9xl mx-auto">
|
||||
|
||||
{/* Page header */}
|
||||
<div className="mb-8">
|
||||
<h1 className="text-2xl md:text-3xl text-slate-800 font-bold">Dropdown ✨</h1>
|
||||
</div>
|
||||
|
||||
<div className="border-t border-slate-200">
|
||||
|
||||
{/* Components */}
|
||||
<div className="space-y-8 mt-8 mb-80">
|
||||
|
||||
{/* Classic Dropdown */}
|
||||
<div>
|
||||
<h2 className="text-2xl text-slate-800 font-bold mb-6">Classic Dropdown</h2>
|
||||
{/* Start */}
|
||||
<DropdownClassic />
|
||||
{/* End */}
|
||||
</div>
|
||||
|
||||
{/* Full-width Dropdown */}
|
||||
<div className="w-80">
|
||||
<h2 className="text-2xl text-slate-800 font-bold mb-6">Full-width Dropdown</h2>
|
||||
<DropdownFull />
|
||||
</div>
|
||||
|
||||
{/* Filter */}
|
||||
<div>
|
||||
<h2 className="text-2xl text-slate-800 font-bold mb-6">Filter</h2>
|
||||
<DropdownFilter />
|
||||
</div>
|
||||
|
||||
{/* Profile */}
|
||||
<div>
|
||||
<h2 className="text-2xl text-slate-800 font-bold mb-6">Profile</h2>
|
||||
<DropdownProfile />
|
||||
</div>
|
||||
|
||||
{/* Switch Account */}
|
||||
<div>
|
||||
<h2 className="text-2xl text-slate-800 font-bold mb-6">Switch Account</h2>
|
||||
<DropdownSwitch />
|
||||
</div>
|
||||
|
||||
{/* Notification */}
|
||||
<div>
|
||||
<h2 className="text-2xl text-slate-800 font-bold mb-6">Notification</h2>
|
||||
<DropdownNotifications />
|
||||
</div>
|
||||
|
||||
{/* Help Center */}
|
||||
<div>
|
||||
<h2 className="text-2xl text-slate-800 font-bold mb-6">Help Center</h2>
|
||||
<DropdownHelp />
|
||||
</div>
|
||||
|
||||
{/* Quick Selection */}
|
||||
<div>
|
||||
<h2 className="text-2xl text-slate-800 font-bold mb-6">Quick Selection</h2>
|
||||
<DropdownEditMenu className="relative inline-flex">
|
||||
<li>
|
||||
<a className="font-medium text-sm text-slate-600 hover:text-slate-800 flex py-1 px-3" href="#0">Option 1</a>
|
||||
</li>
|
||||
<li>
|
||||
<a className="font-medium text-sm text-slate-600 hover:text-slate-800 flex py-1 px-3" href="#0">Option 2</a>
|
||||
</li>
|
||||
<li>
|
||||
<a className="font-medium text-sm text-rose-500 hover:text-rose-600 flex py-1 px-3" href="#0">Remove</a>
|
||||
</li>
|
||||
</DropdownEditMenu>
|
||||
</div>
|
||||
|
||||
{/* Datepicker (built with flatpickr) */}
|
||||
<div>
|
||||
<h2 className="text-2xl text-slate-800 font-bold mb-6">Datepicker (built with <a className="underline hover:no-underline" href="https://github.com/flatpickr/flatpickr" target="_blank" rel="noreferrer">flatpickr</a>)</h2>
|
||||
<Datepicker />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default DropdownPage;
|
||||
@@ -1,384 +0,0 @@
|
||||
import React, { useState } from 'react';
|
||||
|
||||
import Sidebar from '../../partials/Sidebar';
|
||||
import Header from '../../partials/Header';
|
||||
import Tooltip from '../../components/Tooltip';
|
||||
|
||||
function FormPage() {
|
||||
|
||||
const [sidebarOpen, setSidebarOpen] = useState(false);
|
||||
|
||||
const [toggle1, setToggle1] = useState(true);
|
||||
const [toggle2, setToggle2] = useState(false);
|
||||
const [toggle3, setToggle3] = useState(false);
|
||||
|
||||
return (
|
||||
<div className="flex h-screen overflow-hidden">
|
||||
|
||||
{/* Sidebar */}
|
||||
<Sidebar sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
|
||||
|
||||
{/* Content area */}
|
||||
<div className="relative flex flex-col flex-1 overflow-y-auto overflow-x-hidden bg-white">
|
||||
|
||||
{/* Site header */}
|
||||
<Header sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
|
||||
|
||||
<main>
|
||||
<div className="px-4 sm:px-6 lg:px-8 py-8 w-full max-w-9xl mx-auto">
|
||||
|
||||
{/* Page header */}
|
||||
<div className="mb-8">
|
||||
<h1 className="text-2xl md:text-3xl text-slate-800 font-bold">Form ✨</h1>
|
||||
</div>
|
||||
|
||||
<div className="border-t border-slate-200">
|
||||
|
||||
{/* Components */}
|
||||
<div className="space-y-8 mt-8">
|
||||
|
||||
{/* Input Types */}
|
||||
<div>
|
||||
<h2 className="text-2xl text-slate-800 font-bold mb-6">Input Types</h2>
|
||||
<div className="grid gap-5 md:grid-cols-3">
|
||||
|
||||
<div>
|
||||
{/* Start */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1" htmlFor="default">Default</label>
|
||||
<input id="default" className="form-input w-full" type="text" />
|
||||
</div>
|
||||
{/* End */}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
{/* Start */}
|
||||
<div>
|
||||
<div className="flex items-center justify-between">
|
||||
<label className="block text-sm font-medium mb-1" htmlFor="tooltip">W/ Tooltip</label>
|
||||
<Tooltip className="ml-2" bg="dark" size="md">
|
||||
<div className="text-sm text-slate-200">Excepteur sint occaecat cupidata non proident, sunt.</div>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<input id="tooltip" className="form-input w-full" type="text" />
|
||||
</div>
|
||||
{/* End */}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
{/* Start */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1" htmlFor="mandatory">Mandatory <span className="text-rose-500">*</span></label>
|
||||
<input id="mandatory" className="form-input w-full" type="text" required />
|
||||
</div>
|
||||
{/* End */}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
{/* Start */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1" htmlFor="prefix">W/ Prefix</label>
|
||||
<div className="relative">
|
||||
<input id="prefix" className="form-input w-full pl-12" type="text" />
|
||||
<div className="absolute inset-0 right-auto flex items-center pointer-events-none">
|
||||
<span className="text-sm text-slate-400 font-medium px-3">USD</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* End */}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
{/* Start */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1" htmlFor="suffix">W/ Suffix</label>
|
||||
<div className="relative">
|
||||
<input id="suffix" className="form-input w-full pr-8" type="text" />
|
||||
<div className="absolute inset-0 left-auto flex items-center pointer-events-none">
|
||||
<span className="text-sm text-slate-400 font-medium px-3">%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* End */}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
{/* Start */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1" htmlFor="placeholder">W/ Placeholder</label>
|
||||
<input id="placeholder" className="form-input w-full" type="text" placeholder="Something cool..." />
|
||||
</div>
|
||||
{/* End */}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
{/* Start */}
|
||||
<form>
|
||||
<label className="block text-sm font-medium mb-1" htmlFor="icon">W/ Icon</label>
|
||||
<div className="relative">
|
||||
<input id="icon" className="form-input w-full pl-9" type="text" />
|
||||
<div className="absolute inset-0 right-auto flex items-center pointer-events-none">
|
||||
<svg className="w-4 h-4 fill-current text-slate-400 shrink-0 ml-3 mr-2" viewBox="0 0 16 16">
|
||||
<path d="M11.7.3c-.4-.4-1-.4-1.4 0l-10 10c-.2.2-.3.4-.3.7v4c0 .6.4 1 1 1h4c.3 0 .5-.1.7-.3l10-10c.4-.4.4-1 0-1.4l-4-4zM4.6 14H2v-2.6l6-6L10.6 8l-6 6zM12 6.6L9.4 4 11 2.4 13.6 5 12 6.6z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
{/* End */}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
{/* Start */}
|
||||
<div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1" htmlFor="supporting-text">W/ Supporting Text</label>
|
||||
<input id="supporting-text" className="form-input w-full" type="text" />
|
||||
</div>
|
||||
<div className="text-xs mt-1">Supporting text goes here!</div>
|
||||
</div>
|
||||
{/* End */}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
{/* Start */}
|
||||
<form>
|
||||
<label className="block text-sm font-medium mb-1" htmlFor="form-search">Search</label>
|
||||
<div className="relative">
|
||||
<input id="form-search" className="form-input w-full pl-9" type="search" />
|
||||
<button className="absolute inset-0 right-auto group" type="submit" aria-label="Search">
|
||||
<svg className="w-4 h-4 shrink-0 fill-current text-slate-400 group-hover:text-slate-500 ml-3 mr-2" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M7 14c-3.86 0-7-3.14-7-7s3.14-7 7-7 7 3.14 7 7-3.14 7-7 7zM7 2C4.243 2 2 4.243 2 7s2.243 5 5 5 5-2.243 5-5-2.243-5-5-5z" />
|
||||
<path d="M15.707 14.293L13.314 11.9a8.019 8.019 0 01-1.414 1.414l2.393 2.393a.997.997 0 001.414 0 .999.999 0 000-1.414z" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
{/* End */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Input Sizes */}
|
||||
<div>
|
||||
<h2 className="text-2xl text-slate-800 font-bold mb-6">Input Sizes</h2>
|
||||
<div className="grid gap-5 md:grid-cols-3">
|
||||
|
||||
<div>
|
||||
{/* Start */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1" htmlFor="small">Small</label>
|
||||
<input id="small" className="form-input w-full px-2 py-1" type="text" />
|
||||
</div>
|
||||
{/* End */}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
{/* Start */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1" htmlFor="normal">Default</label>
|
||||
<input id="normal" className="form-input w-full" type="text" />
|
||||
</div>
|
||||
{/* End */}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
{/* Start */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1" htmlFor="large">Large</label>
|
||||
<input id="large" className="form-input w-full px-4 py-3" type="text" />
|
||||
</div>
|
||||
{/* End */}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Input States */}
|
||||
<div>
|
||||
<h2 className="text-2xl text-slate-800 font-bold mb-6">Input States</h2>
|
||||
<div className="grid gap-5 md:grid-cols-3">
|
||||
|
||||
<div>
|
||||
{/* Start */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1" htmlFor="disabled">Disabled</label>
|
||||
<input id="disabled" className="form-input w-full disabled:border-slate-200 disabled:bg-slate-100 disabled:text-slate-400 disabled:cursor-not-allowed" type="text" placeholder="Something cool..." disabled />
|
||||
</div>
|
||||
{/* End */}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
{/* Start */}
|
||||
<div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1" htmlFor="error">Error <span className="text-rose-500">*</span></label>
|
||||
<input id="error" className="form-input w-full border-rose-300" type="text" />
|
||||
</div>
|
||||
<div className="text-xs mt-1 text-rose-500">This field is required!</div>
|
||||
</div>
|
||||
{/* End */}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
{/* Start */}
|
||||
<div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1" htmlFor="success">Success <span className="text-rose-500">*</span></label>
|
||||
<input id="success" className="form-input w-full border-emerald-300" type="text" />
|
||||
</div>
|
||||
<div className="text-xs mt-1 text-emerald-500">Sounds good!</div>
|
||||
</div>
|
||||
{/* End */}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Select */}
|
||||
<div>
|
||||
<h2 className="text-2xl text-slate-800 font-bold mb-6">Select</h2>
|
||||
<label className="block text-sm font-medium mb-1" htmlFor="country">Country</label>
|
||||
<select id="country" className="form-select">
|
||||
<option>Italy</option>
|
||||
<option>USA</option>
|
||||
<option>United Kingdom</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Checkbox */}
|
||||
<div>
|
||||
<h2 className="text-2xl text-slate-800 font-bold mb-6">Checkbox</h2>
|
||||
<div className="flex flex-wrap items-center -m-3">
|
||||
|
||||
<div className="m-3">
|
||||
{/* Start */}
|
||||
<label className="flex items-center">
|
||||
<input type="checkbox" className="form-checkbox" />
|
||||
<span className="text-sm ml-2">Active</span>
|
||||
</label>
|
||||
{/* End */}
|
||||
</div>
|
||||
|
||||
<div className="m-3">
|
||||
{/* Start */}
|
||||
<label className="flex items-center">
|
||||
<input type="checkbox" className="form-checkbox" />
|
||||
<span className="text-sm ml-2">Selected</span>
|
||||
</label>
|
||||
{/* End */}
|
||||
</div>
|
||||
|
||||
<div className="m-3">
|
||||
{/* Start */}
|
||||
<label className="flex items-center">
|
||||
<input type="checkbox" className="form-checkbox disabled:bg-slate-50" disabled />
|
||||
<span className="text-sm ml-2">Disabled</span>
|
||||
</label>
|
||||
{/* End */}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Radio */}
|
||||
<div>
|
||||
<h2 className="text-2xl text-slate-800 font-bold mb-6">Radio</h2>
|
||||
<div className="flex flex-wrap items-center -m-3">
|
||||
|
||||
<div className="m-3">
|
||||
{/* Start */}
|
||||
<label className="flex items-center">
|
||||
<input type="radio" name="radio-buttons" className="form-radio" />
|
||||
<span className="text-sm ml-2">Active</span>
|
||||
</label>
|
||||
{/* End */}
|
||||
</div>
|
||||
|
||||
<div className="m-3">
|
||||
{/* Start */}
|
||||
<label className="flex items-center">
|
||||
<input type="radio" name="radio-buttons" className="form-radio" />
|
||||
<span className="text-sm ml-2">Selected</span>
|
||||
</label>
|
||||
{/* End */}
|
||||
</div>
|
||||
|
||||
<div className="m-3">
|
||||
{/* Start */}
|
||||
<label className="flex items-center">
|
||||
<input type="radio" name="radio-buttons" className="form-radio disabled:bg-slate-50" disabled />
|
||||
<span className="text-sm ml-2">Disabled</span>
|
||||
</label>
|
||||
{/* End */}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Toggle Switch */}
|
||||
<div>
|
||||
<h2 className="text-2xl text-slate-800 font-bold mb-6">Toggle Switch</h2>
|
||||
<div className="flex flex-wrap items-center -m-3">
|
||||
|
||||
<div className="m-3 w-24">
|
||||
{/* Start */}
|
||||
<div className="flex items-center">
|
||||
<div className="form-switch">
|
||||
<input type="checkbox" id="switch-1" className="sr-only" checked={toggle1} onChange={() => setToggle1(!toggle1)} />
|
||||
<label className="bg-slate-400" htmlFor="switch-1">
|
||||
<span className="bg-white shadow-sm" aria-hidden="true"></span>
|
||||
<span className="sr-only">Switch label</span>
|
||||
</label>
|
||||
</div>
|
||||
<div className="text-sm text-slate-400 italic ml-2">{toggle1 ? 'On' : 'Off'}</div>
|
||||
</div>
|
||||
{/* End */}
|
||||
</div>
|
||||
|
||||
<div className="m-3 w-24">
|
||||
{/* Start */}
|
||||
<div className="flex items-center">
|
||||
<div className="form-switch">
|
||||
<input type="checkbox" id="switch-2" className="sr-only" checked={toggle2} onChange={() => setToggle2(!toggle2)} />
|
||||
<label className="bg-slate-400" htmlFor="switch-2">
|
||||
<span className="bg-white shadow-sm" aria-hidden="true"></span>
|
||||
<span className="sr-only">Switch label</span>
|
||||
</label>
|
||||
</div>
|
||||
<div className="text-sm text-slate-400 italic ml-2">{toggle2 ? 'On' : 'Off'}</div>
|
||||
</div>
|
||||
{/* End */}
|
||||
</div>
|
||||
|
||||
<div className="m-3 w-32">
|
||||
{/* Start */}
|
||||
<div className="flex items-center">
|
||||
<div className="form-switch">
|
||||
<input type="checkbox" id="switch-3" className="sr-only" checked={toggle3} onChange={() => setToggle3(!toggle3)} disabled />
|
||||
<label className="bg-slate-400" htmlFor="switch-3">
|
||||
<span className="bg-white shadow-sm" aria-hidden="true"></span>
|
||||
<span className="sr-only">Switch label</span>
|
||||
</label>
|
||||
</div>
|
||||
<div className="text-sm text-slate-400 italic ml-2">Disabled</div>
|
||||
</div>
|
||||
{/* End */}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default FormPage;
|
||||
@@ -1,79 +0,0 @@
|
||||
import React, { useState } from 'react';
|
||||
|
||||
import Sidebar from '../../partials/Sidebar';
|
||||
import Header from '../../partials/Header';
|
||||
|
||||
function IconsPage() {
|
||||
|
||||
const [sidebarOpen, setSidebarOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<div className="flex h-screen overflow-hidden">
|
||||
|
||||
{/* Sidebar */}
|
||||
<Sidebar sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
|
||||
|
||||
{/* Content area */}
|
||||
<div className="relative flex flex-col flex-1 overflow-y-auto overflow-x-hidden bg-white">
|
||||
|
||||
{/* Site header */}
|
||||
<Header sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
|
||||
|
||||
<main>
|
||||
<div className="px-4 sm:px-6 lg:px-8 py-8 w-full max-w-9xl mx-auto">
|
||||
|
||||
{/* Page header */}
|
||||
<div className="mb-8">
|
||||
<h1 className="text-2xl md:text-3xl text-slate-800 font-bold">Icons ✨</h1>
|
||||
</div>
|
||||
|
||||
<div className="border-t border-slate-200">
|
||||
|
||||
{/* Components */}
|
||||
<div className="space-y-8 mt-8">
|
||||
|
||||
<div className="text-sm">If you need more icons than what we currently support in Mosaic, check out these great packs 👇</div>
|
||||
|
||||
{/* Nucleo */}
|
||||
<div>
|
||||
<div className="flex items-start space-x-3 mb-6">
|
||||
<h2 className="text-2xl text-slate-800 font-bold">Nucleo</h2>
|
||||
<div className="text-xs inline-flex font-medium bg-indigo-100 text-indigo-600 rounded-full text-center px-2.5 py-1">Recommended</div>
|
||||
</div>
|
||||
<div className="px-6 py-8 bg-slate-800 rounded-sm text-center xl:text-left xl:flex xl:flex-wrap xl:justify-between xl:items-center">
|
||||
<div className="text-slate-300 mb-4 xl:mb-0 max-w-lg mx-auto xl:mx-0 2xl:max-w-none">99% of the icons used in Mosaic come from Nucleo; a huge library of 3K+ vector icons!</div>
|
||||
<div className="inline-flex space-x-3">
|
||||
<a className="btn bg-indigo-500 hover:bg-indigo-600 text-white" href="https://nucleoapp.com/pricing" target="_blank" rel="noreferrer">Buy Nucleo</a>
|
||||
<a className="btn bg-slate-700 hover:bg-slate-600 text-white" href="https://nucleoapp.com/free-icons" target="_blank" rel="noreferrer">Download Free Pack</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tabler Icons */}
|
||||
<div>
|
||||
<div className="flex items-start space-x-3 mb-6">
|
||||
<h2 className="text-2xl text-slate-800 font-bold">Tabler Icons</h2>
|
||||
<div className="text-xs inline-flex font-medium bg-emerald-100 text-emerald-600 rounded-full text-center px-2.5 py-1">Free Alternative</div>
|
||||
</div>
|
||||
<div className="px-6 py-8 bg-slate-800 rounded-sm text-center xl:text-left xl:flex xl:flex-wrap xl:justify-between xl:items-center">
|
||||
<div className="text-slate-300 mb-4 xl:mb-0 max-w-lg mx-auto xl:mx-0 2xl:max-w-none">A set of 1250+ icons that are visually consistent with the style used in Mosaic!</div>
|
||||
<div className="inline-flex space-x-3">
|
||||
<a className="btn bg-indigo-500 hover:bg-indigo-600 text-white" href="https://tablericons.com/" target="_blank" rel="noreferrer">Download Tabler Icons</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default IconsPage;
|
||||
@@ -1,575 +0,0 @@
|
||||
import React, { useState } from 'react';
|
||||
|
||||
import Sidebar from '../../partials/Sidebar';
|
||||
import Header from '../../partials/Header';
|
||||
import ModalBasic from '../../components/ModalBasic';
|
||||
import ModalCookies from '../../components/ModalCookies';
|
||||
import ModalBlank from '../../components/ModalBlank';
|
||||
import ModalAction from '../../components/ModalAction';
|
||||
import ModalSearch from '../../components/ModalSearch';
|
||||
|
||||
import AnnouncementIcon from '../../images/announcement-icon.svg';
|
||||
import ModalImage from '../../images/modal-image.jpg';
|
||||
|
||||
function ModalPage() {
|
||||
|
||||
const [sidebarOpen, setSidebarOpen] = useState(false);
|
||||
|
||||
const [basicModalOpen, setBasicModalOpen] = useState(false);
|
||||
const [scrollbarModalOpen, setScrollbarModalOpen] = useState(false)
|
||||
const [cookiesModalOpen, setCookiesModalOpen] = useState(false)
|
||||
const [successModalOpen, setSuccessModalOpen] = useState(false)
|
||||
const [dangerModalOpen, setDangerModalOpen] = useState(false)
|
||||
const [infoModalOpen, setInfoModalOpen] = useState(false)
|
||||
const [feedbackModalOpen, setFeedbackModalOpen] = useState(false)
|
||||
const [newsletterModalOpen, setNewsletterModalOpen] = useState(false)
|
||||
const [announcementModalOpen, setAnnouncementModalOpen] = useState(false)
|
||||
const [integrationModalOpen, setIntegrationModalOpen] = useState(false)
|
||||
const [newsModalOpen, setNewsModalOpen] = useState(false)
|
||||
const [planModalOpen, setPlanModalOpen] = useState(false)
|
||||
const [searchModalOpen, setSearchModalOpen] = useState(false)
|
||||
|
||||
return (
|
||||
<div className="flex h-screen overflow-hidden">
|
||||
|
||||
{/* Sidebar */}
|
||||
<Sidebar sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
|
||||
|
||||
{/* Content area */}
|
||||
<div className="relative flex flex-col flex-1 overflow-y-auto overflow-x-hidden bg-white">
|
||||
|
||||
{/* Site header */}
|
||||
<Header sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
|
||||
|
||||
<main>
|
||||
<div className="px-4 sm:px-6 lg:px-8 py-8 w-full max-w-9xl mx-auto">
|
||||
|
||||
{/* Page header */}
|
||||
<div className="mb-8">
|
||||
<h1 className="text-2xl md:text-3xl text-slate-800 font-bold">Modal ✨</h1>
|
||||
</div>
|
||||
|
||||
<div className="border-t border-slate-200">
|
||||
|
||||
{/* Components */}
|
||||
<div className="space-y-8 mt-8">
|
||||
|
||||
{/* Basic */}
|
||||
<div>
|
||||
<h2 className="text-2xl text-slate-800 font-bold mb-6">Basic</h2>
|
||||
<div className="flex flex-wrap items-center -m-1.5">
|
||||
|
||||
{/* Basic Modal */}
|
||||
<div className="m-1.5">
|
||||
{/* Start */}
|
||||
<button className="btn bg-indigo-500 hover:bg-indigo-600 text-white" aria-controls="basic-modal" onClick={(e) => { e.stopPropagation(); setBasicModalOpen(true); }}>Basic Modal</button>
|
||||
<ModalBasic id="basic-modal" modalOpen={basicModalOpen} setModalOpen={setBasicModalOpen} title="Basic Modal">
|
||||
{/* Modal content */}
|
||||
<div className="px-5 pt-4 pb-1">
|
||||
<div className="text-sm">
|
||||
<div className="font-medium text-slate-800 mb-2">Let’s Talk Paragraph</div>
|
||||
<div className="space-y-2">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
||||
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Modal footer */}
|
||||
<div className="px-5 py-4">
|
||||
<div className="flex flex-wrap justify-end space-x-2">
|
||||
<button className="btn-sm border-slate-200 hover:border-slate-300 text-slate-600" onClick={(e) => { e.stopPropagation(); setBasicModalOpen(false); }}>Close</button>
|
||||
<button className="btn-sm bg-indigo-500 hover:bg-indigo-600 text-white">I Understand</button>
|
||||
</div>
|
||||
</div>
|
||||
</ModalBasic>
|
||||
{/* End */}
|
||||
</div>
|
||||
|
||||
|
||||
{/* Modal w/ Scroll Bar */}
|
||||
<div className="m-1.5">
|
||||
{/* Start */}
|
||||
<button className="btn bg-indigo-500 hover:bg-indigo-600 text-white" aria-controls="scrollbar-modal" onClick={(e) => { e.stopPropagation(); setScrollbarModalOpen(true); }}>Modal w/ Scroll Bar</button>
|
||||
<ModalBasic id="scrollbar-modal" modalOpen={scrollbarModalOpen} setModalOpen={setScrollbarModalOpen} title="Modal w/ Scroll Bar">
|
||||
{/* Modal content */}
|
||||
<div className="px-5 py-4">
|
||||
<div className="text-sm">
|
||||
<div className="font-medium text-slate-800 mb-2">Let’s Talk Paragraph</div>
|
||||
<div className="space-y-2">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
||||
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Ullamcorper malesuada proin libero nunc consequat interdum varius sit. Nec sagittis aliquam malesuada bibendum arcu vitae elementum curabitur vitae. Mattis enim ut tellus elementum el fringilla est ullamcorper eget nulla. Enim eu turpis egestas pretium aenean pharetra magna. Aliquam id diam maecenas ultricies mi eget us mauris vitae ultricies leo integer t malesuada fames ac turpis egestas maecenas pharetra volutpat lacus laoreet non.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
||||
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Ullamcorper malesuada proin libero nunc consequat interdum varius sit. Nec sagittis aliquam malesuada bibendum arcu vitae elementum curabitur vitae. Mattis enim ut tellus elementum el fringilla est ullamcorper eget nulla. Enim eu turpis egestas pretium aenean pharetra magna. Aliquam id diam maecenas ultricies mi eget us mauris vitae ultricies leo integer t malesuada fames ac turpis egestas maecenas pharetra volutpat lacus laoreet non.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Modal footer */}
|
||||
<div className="sticky bottom-0 px-5 py-4 bg-white border-t border-slate-200">
|
||||
<div className="flex flex-wrap justify-end space-x-2">
|
||||
<button className="btn-sm border-slate-200 hover:border-slate-300 text-slate-600" onClick={(e) => { e.stopPropagation(); setScrollbarModalOpen(false); }}>Close</button>
|
||||
<button className="btn-sm bg-indigo-500 hover:bg-indigo-600 text-white">I Understand</button>
|
||||
</div>
|
||||
</div>
|
||||
</ModalBasic>
|
||||
{/* End */}
|
||||
</div>
|
||||
|
||||
{/* Cookies */}
|
||||
<div className="m-1.5">
|
||||
{/* Start */}
|
||||
<button className="btn bg-indigo-500 hover:bg-indigo-600 text-white" aria-controls="cookies-modal" onClick={(e) => { e.stopPropagation(); setCookiesModalOpen(true); }}>Cookies</button>
|
||||
<ModalCookies id="cookies-modal" modalOpen={cookiesModalOpen} setModalOpen={setCookiesModalOpen} title="We use cookies 🍪">
|
||||
{/* Modal content */}
|
||||
<div className="text-sm mb-5">
|
||||
<div className="space-y-2">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
||||
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* Modal footer */}
|
||||
<div className="flex flex-wrap justify-end space-x-2">
|
||||
<button className="btn-sm border-slate-200 hover:border-slate-300 text-slate-600" onClick={(e) => { e.stopPropagation(); setCookiesModalOpen(false); }}>Decline</button>
|
||||
<button className="btn-sm bg-indigo-500 hover:bg-indigo-600 text-white" onClick={(e) => { e.stopPropagation(); setCookiesModalOpen(false); }}>I Accept</button>
|
||||
</div>
|
||||
</ModalCookies>
|
||||
{/* End */}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Feedback */}
|
||||
<div>
|
||||
<h2 className="text-2xl text-slate-800 font-bold mb-6">Feedback</h2>
|
||||
<div className="flex flex-wrap items-center -m-1.5">
|
||||
|
||||
{/* Success Modal */}
|
||||
<div className="m-1.5">
|
||||
{/* Start */}
|
||||
<button className="btn bg-indigo-500 hover:bg-indigo-600 text-white" aria-controls="success-modal" onClick={(e) => { e.stopPropagation(); setSuccessModalOpen(true); }}>Success Modal</button>
|
||||
<ModalBlank id="success-modal" modalOpen={successModalOpen} setModalOpen={setSuccessModalOpen}>
|
||||
<div className="p-5 flex space-x-4">
|
||||
{/* Icon */}
|
||||
<div className="w-10 h-10 rounded-full flex items-center justify-center shrink-0 bg-emerald-100">
|
||||
<svg className="w-4 h-4 shrink-0 fill-current text-emerald-500" viewBox="0 0 16 16">
|
||||
<path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zM7 11.4L3.6 8 5 6.6l2 2 4-4L12.4 6 7 11.4z" />
|
||||
</svg>
|
||||
</div>
|
||||
{/* Content */}
|
||||
<div>
|
||||
{/* Modal header */}
|
||||
<div className="mb-2">
|
||||
<div className="text-lg font-semibold text-slate-800">Upgrade your Subscription?</div>
|
||||
</div>
|
||||
{/* Modal content */}
|
||||
<div className="text-sm mb-10">
|
||||
<div className="space-y-2">
|
||||
<p>Semper eget duis at tellus at urna condimentum mattis pellentesque lacus suspendisse faucibus interdum.</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* Modal footer */}
|
||||
<div className="flex flex-wrap justify-end space-x-2">
|
||||
<button className="btn-sm border-slate-200 hover:border-slate-300 text-slate-600" onClick={(e) => { e.stopPropagation(); setSuccessModalOpen(false); }}>Cancel</button>
|
||||
<button className="btn-sm bg-indigo-500 hover:bg-indigo-600 text-white">Yes, Upgrade it</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ModalBlank>
|
||||
{/* End */}
|
||||
</div>
|
||||
|
||||
{/* Danger Modal */}
|
||||
<div className="m-1.5">
|
||||
{/* Start */}
|
||||
<button className="btn bg-indigo-500 hover:bg-indigo-600 text-white" aria-controls="danger-modal" onClick={(e) => { e.stopPropagation(); setDangerModalOpen(true); }}>Danger Modal</button>
|
||||
<ModalBlank id="danger-modal" modalOpen={dangerModalOpen} setModalOpen={setDangerModalOpen}>
|
||||
<div className="p-5 flex space-x-4">
|
||||
{/* Icon */}
|
||||
<div className="w-10 h-10 rounded-full flex items-center justify-center shrink-0 bg-rose-100">
|
||||
<svg className="w-4 h-4 shrink-0 fill-current text-rose-500" viewBox="0 0 16 16">
|
||||
<path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm0 12c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1zm1-3H7V4h2v5z" />
|
||||
</svg>
|
||||
</div>
|
||||
{/* Content */}
|
||||
<div>
|
||||
{/* Modal header */}
|
||||
<div className="mb-2">
|
||||
<div className="text-lg font-semibold text-slate-800">Delete 1 customer?</div>
|
||||
</div>
|
||||
{/* Modal content */}
|
||||
<div className="text-sm mb-10">
|
||||
<div className="space-y-2">
|
||||
<p>Semper eget duis at tellus at urna condimentum mattis pellentesque lacus suspendisse faucibus interdum.</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* Modal footer */}
|
||||
<div className="flex flex-wrap justify-end space-x-2">
|
||||
<button className="btn-sm border-slate-200 hover:border-slate-300 text-slate-600" onClick={(e) => { e.stopPropagation(); setDangerModalOpen(false); }}>Cancel</button>
|
||||
<button className="btn-sm bg-rose-500 hover:bg-rose-600 text-white">Yes, Delete it</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ModalBlank>
|
||||
{/* End */}
|
||||
</div>
|
||||
|
||||
{/* Info Modal */}
|
||||
<div className="m-1.5">
|
||||
{/* Start */}
|
||||
<button className="btn bg-indigo-500 hover:bg-indigo-600 text-white" aria-controls="info-modal" onClick={(e) => { e.stopPropagation(); setInfoModalOpen(true); }}>Info Modal</button>
|
||||
<ModalBlank id="info-modal" modalOpen={infoModalOpen} setModalOpen={setInfoModalOpen}>
|
||||
<div className="p-5 flex space-x-4">
|
||||
{/* Icon */}
|
||||
<div className="w-10 h-10 rounded-full flex items-center justify-center shrink-0 bg-indigo-100">
|
||||
<svg className="w-4 h-4 shrink-0 fill-current text-indigo-500" viewBox="0 0 16 16">
|
||||
<path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm1 12H7V7h2v5zM8 6c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1z" />
|
||||
</svg>
|
||||
</div>
|
||||
{/* Content */}
|
||||
<div>
|
||||
{/* Modal header */}
|
||||
<div className="mb-2">
|
||||
<div className="text-lg font-semibold text-slate-800">Create new Event?</div>
|
||||
</div>
|
||||
{/* Modal content */}
|
||||
<div className="text-sm mb-10">
|
||||
<div className="space-y-2">
|
||||
<p>Semper eget duis at tellus at urna condimentum mattis pellentesque lacus suspendisse faucibus interdum.</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* Modal footer */}
|
||||
<div className="flex flex-wrap justify-end space-x-2">
|
||||
<button className="btn-sm border-slate-200 hover:border-slate-300 text-slate-600" onClick={(e) => { e.stopPropagation(); setInfoModalOpen(false); }}>Cancel</button>
|
||||
<button className="btn-sm bg-indigo-500 hover:bg-indigo-600 text-white">Yes, Create it</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ModalBlank>
|
||||
{/* End */}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Product */}
|
||||
<div>
|
||||
<h2 className="text-2xl text-slate-800 font-bold mb-6">Product</h2>
|
||||
<div className="flex flex-wrap items-center -m-1.5">
|
||||
|
||||
{/* Send Feedback */}
|
||||
<div className="m-1.5">
|
||||
{/* Start */}
|
||||
<button className="btn bg-indigo-500 hover:bg-indigo-600 text-white" aria-controls="feedback-modal" onClick={(e) => { e.stopPropagation(); setFeedbackModalOpen(true); }}>Send Feedback</button>
|
||||
<ModalBasic id="feedback-modal" modalOpen={feedbackModalOpen} setModalOpen={setFeedbackModalOpen} title="Send Feedback">
|
||||
{/* Modal content */}
|
||||
<div className="px-5 py-4">
|
||||
<div className="text-sm">
|
||||
<div className="font-medium text-slate-800 mb-3">Let us know what you think 🙌</div>
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1" htmlFor="name">Name <span className="text-rose-500">*</span></label>
|
||||
<input id="name" className="form-input w-full px-2 py-1" type="text" required />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1" htmlFor="email">Email <span className="text-rose-500">*</span></label>
|
||||
<input id="email" className="form-input w-full px-2 py-1" type="email" required />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-1" htmlFor="feedback">Message <span className="text-rose-500">*</span></label>
|
||||
<textarea id="feedback" className="form-textarea w-full px-2 py-1" rows="4" required></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Modal footer */}
|
||||
<div className="px-5 py-4 border-t border-slate-200">
|
||||
<div className="flex flex-wrap justify-end space-x-2">
|
||||
<button className="btn-sm border-slate-200 hover:border-slate-300 text-slate-600" onClick={(e) => { e.stopPropagation(); setFeedbackModalOpen(false); }}>Cancel</button>
|
||||
<button className="btn-sm bg-indigo-500 hover:bg-indigo-600 text-white">Send</button>
|
||||
</div>
|
||||
</div>
|
||||
</ModalBasic>
|
||||
{/* End */}
|
||||
</div>
|
||||
|
||||
{/* Newsletter */}
|
||||
<div className="m-1.5">
|
||||
{/* Start */}
|
||||
<button className="btn bg-indigo-500 hover:bg-indigo-600 text-white" aria-controls="newsletter-modal" onClick={(e) => { e.stopPropagation(); setNewsletterModalOpen(true); }}>Newsletter</button>
|
||||
<ModalAction id="newsletter-modal" modalOpen={newsletterModalOpen} setModalOpen={setNewsletterModalOpen}>
|
||||
{/* Modal header */}
|
||||
<div className="mb-2 text-center">
|
||||
{/* Icon */}
|
||||
<div className="mb-3">
|
||||
<svg className="inline-flex w-12 h-12 rounded-full shrink-0 fill-current" viewBox="0 0 48 48">
|
||||
<rect className="text-indigo-100" width="48" height="48" rx="24" />
|
||||
<path className="text-indigo-300" d="M19 16h7a8 8 0 110 16h-7V16z" />
|
||||
<path className="text-indigo-500" d="M26 24l-7-6v5h-8v2h8v5z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="text-lg font-semibold text-slate-800">Subscribe to the Newsletter!</div>
|
||||
</div>
|
||||
{/* Modal content */}
|
||||
<div className="text-center">
|
||||
<div className="text-sm mb-6">
|
||||
Semper eget duis at tellus at urna condimentum mattis pellentesque lacus suspendisse faucibus interdum.
|
||||
</div>
|
||||
{/* Submit form */}
|
||||
<form className="flex max-w-sm m-auto">
|
||||
<div className="grow mr-2">
|
||||
<label htmlFor="subscribe-form" className="sr-only">Leave your Email</label>
|
||||
<input id="subscribe-form" className="form-input w-full px-2 py-1" type="email" />
|
||||
</div>
|
||||
<button type="submit" className="btn-sm bg-indigo-500 hover:bg-indigo-600 text-white whitespace-nowrap">Subscribe</button>
|
||||
</form>
|
||||
<div className="text-xs text-slate-500 italic mt-3">
|
||||
I respect your privacy. No spam. Unsubscribe at any time!
|
||||
</div>
|
||||
</div>
|
||||
</ModalAction>
|
||||
{/* End */}
|
||||
</div>
|
||||
|
||||
{/* Announcement */}
|
||||
<div className="m-1.5">
|
||||
{/* Start */}
|
||||
<button className="btn bg-indigo-500 hover:bg-indigo-600 text-white" aria-controls="announcement-modal" onClick={(e) => { e.stopPropagation(); setAnnouncementModalOpen(true); }}>Announcement</button>
|
||||
<ModalAction id="announcement-modal" modalOpen={announcementModalOpen} setModalOpen={setAnnouncementModalOpen}>
|
||||
{/* Modal header */}
|
||||
<div className="mb-2 text-center">
|
||||
{/* Icon */}
|
||||
<div className="inline-flex mb-2">
|
||||
<img src={AnnouncementIcon} width="80" height="80" alt="Announcement" />
|
||||
</div>
|
||||
<div className="text-lg font-semibold text-slate-800">You Unlocked Level 2!</div>
|
||||
</div>
|
||||
{/* Modal content */}
|
||||
<div className="text-center">
|
||||
<div className="text-sm mb-5">
|
||||
Semper eget duis at tellus at urna condimentum mattis pellentesque lacus suspendisse faucibus interdum.
|
||||
</div>
|
||||
{/* CTAs */}
|
||||
<div className="space-y-3">
|
||||
<button className="btn-sm bg-indigo-500 hover:bg-indigo-600 text-white">Claim your Reward -></button>
|
||||
<div>
|
||||
<a className="font-medium text-sm text-indigo-500 hover:text-indigo-600" href="#0" onClick={(e) => { e.preventDefault(); setAnnouncementModalOpen(true); }}>Not Now!</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ModalAction>
|
||||
{/* End */}
|
||||
</div>
|
||||
|
||||
{/* Integration */}
|
||||
<div className="m-1.5">
|
||||
{/* Start */}
|
||||
<button className="btn bg-indigo-500 hover:bg-indigo-600 text-white" aria-controls="integration-modal" onClick={(e) => { e.stopPropagation(); setIntegrationModalOpen(true); }}>Integration</button>
|
||||
<ModalAction id="integration-modal" modalOpen={integrationModalOpen} setModalOpen={setIntegrationModalOpen}>
|
||||
{/* Modal header */}
|
||||
<div className="mb-5 text-center">
|
||||
{/* Icons */}
|
||||
<div className="inline-flex items-center justify-center space-x-3 mb-4">
|
||||
{/* Mosaic logo */}
|
||||
<svg width="48" height="48" viewBox="0 0 32 32">
|
||||
<defs>
|
||||
<linearGradient x1="28.538%" y1="20.229%" x2="100%" y2="108.156%" id="nl-a">
|
||||
<stop stopColor="#A5B4FC" stopOpacity="0" offset="0%" />
|
||||
<stop stopColor="#A5B4FC" offset="100%" />
|
||||
</linearGradient>
|
||||
<linearGradient x1="88.638%" y1="29.267%" x2="22.42%" y2="100%" id="nl-b">
|
||||
<stop stopColor="#38BDF8" stopOpacity="0" offset="0%" />
|
||||
<stop stopColor="#38BDF8" offset="100%" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect fill="#6366F1" width="32" height="32" rx="16" />
|
||||
<path d="M18.277.16C26.035 1.267 32 7.938 32 16c0 8.837-7.163 16-16 16a15.937 15.937 0 01-10.426-3.863L18.277.161z" fill="#4F46E5" />
|
||||
<path d="M7.404 2.503l18.339 26.19A15.93 15.93 0 0116 32C7.163 32 0 24.837 0 16 0 10.327 2.952 5.344 7.404 2.503z" fill="url(#nl-a)" />
|
||||
<path d="M2.223 24.14L29.777 7.86A15.926 15.926 0 0132 16c0 8.837-7.163 16-16 16-5.864 0-10.991-3.154-13.777-7.86z" fill="url(#nl-b)" />
|
||||
</svg>
|
||||
{/* Arrows */}
|
||||
<svg className="h-4 w-4 fill-current text-slate-400" viewBox="0 0 16 16">
|
||||
<path d="M5 3V0L0 4l5 4V5h8a1 1 0 000-2H5zM11 11H3a1 1 0 000 2h8v3l5-4-5-4v3z" />
|
||||
</svg>
|
||||
{/* Cruip logo */}
|
||||
<svg width="48" height="48" viewBox="0 0 48 48">
|
||||
<rect fill="#E0E7FF" width="48" height="48" rx="24" />
|
||||
<path d="M34 24c0-1.38-1.126-2.5-2.515-2.5A2.507 2.507 0 0028.97 24c0 1.38 1.126 2.5 2.515 2.5A2.507 2.507 0 0034 24" fill="#34D399" />
|
||||
<path d="M31.112 31.07a10.024 10.024 0 01-4.582 2.615c-.8.205-1.64.315-2.506.315a10.007 10.007 0 01-7.553-3.426A9.943 9.943 0 0114 24c0-2.517.932-4.816 2.471-6.574A10.007 10.007 0 0124.024 14a10.024 10.024 0 017.088 2.93l-3.544 3.535A5.003 5.003 0 0024.024 19a5.006 5.006 0 00-5.012 5l.001.13A5.007 5.007 0 0024.024 29c1.384 0 2.637-.56 3.544-1.465l3.544 3.536z" fill="#6366F1" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="text-lg font-semibold text-slate-800">Connect Mosaic with your Cruip account</div>
|
||||
</div>
|
||||
{/* Modal content */}
|
||||
<div className="text-sm mb-5">
|
||||
<div className="font-medium text-slate-800 mb-3">Mosaic would like to:</div>
|
||||
<ul className="space-y-2 mb-5">
|
||||
<li className="flex items-center">
|
||||
<svg className="w-3 h-3 shrink-0 fill-current text-emerald-500 mr-2" viewBox="0 0 12 12">
|
||||
<path d="M10.28 1.28L3.989 7.575 1.695 5.28A1 1 0 00.28 6.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 1.28z" />
|
||||
</svg>
|
||||
<div>Lorem ipsum dolor sit amet</div>
|
||||
</li>
|
||||
<li className="flex items-center">
|
||||
<svg className="w-3 h-3 shrink-0 fill-current text-emerald-500 mr-2" viewBox="0 0 12 12">
|
||||
<path d="M10.28 1.28L3.989 7.575 1.695 5.28A1 1 0 00.28 6.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 1.28z" />
|
||||
</svg>
|
||||
<div>Semper eget duis at tellus at urna</div>
|
||||
</li>
|
||||
<li className="flex items-center">
|
||||
<svg className="w-3 h-3 shrink-0 fill-current text-emerald-500 mr-2" viewBox="0 0 12 12">
|
||||
<path d="M10.28 1.28L3.989 7.575 1.695 5.28A1 1 0 00.28 6.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 1.28z" />
|
||||
</svg>
|
||||
<div>Lorem ipsum dolor sit amet</div>
|
||||
</li>
|
||||
<li className="flex items-center">
|
||||
<svg className="w-3 h-3 shrink-0 fill-current text-emerald-500 mr-2" viewBox="0 0 12 12">
|
||||
<path d="M10.28 1.28L3.989 7.575 1.695 5.28A1 1 0 00.28 6.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 1.28z" />
|
||||
</svg>
|
||||
<div>Suspendisse faucibus interdum</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div className="text-xs text-slate-500">By clicking on Allow access, you authorize Mosaic to use your information in accordance with its <a className="text-indigo-500 hover:text-indigo-600" href="#0">Privacy Policy</a>. You can stop it at any time on the integrations page of your Mosaic account.</div>
|
||||
</div>
|
||||
{/* Modal footer */}
|
||||
<div className="flex flex-wrap justify-end space-x-2">
|
||||
<button className="btn-sm border-slate-200 hover:border-slate-300 text-slate-600" onClick={(e) => { e.stopPropagation(); setIntegrationModalOpen(false); }}>Cancel</button>
|
||||
<button className="btn-sm bg-indigo-500 hover:bg-indigo-600 text-white">Allow Access</button>
|
||||
</div>
|
||||
</ModalAction>
|
||||
{/* End */}
|
||||
</div>
|
||||
|
||||
{/* What's New */}
|
||||
<div className="m-1.5">
|
||||
{/* Start */}
|
||||
<button className="btn bg-indigo-500 hover:bg-indigo-600 text-white" aria-controls="news-modal" onClick={(e) => { e.stopPropagation(); setNewsModalOpen(true); }}>What's New</button>
|
||||
<ModalBlank id="news-modal" modalOpen={newsModalOpen} setModalOpen={setNewsModalOpen}>
|
||||
<div className="relative">
|
||||
<img className="w-full" src={ModalImage} width="460" height="200" alt="New on Mosaic" />
|
||||
{/* Close button */}
|
||||
<button className="absolute top-0 right-0 mt-5 mr-5 text-slate-50 hover:text-white" onClick={(e) => { e.stopPropagation(); setNewsModalOpen(false); }}>
|
||||
<div className="sr-only">Close</div>
|
||||
<svg className="w-4 h-4 fill-current">
|
||||
<path d="M7.95 6.536l4.242-4.243a1 1 0 111.415 1.414L9.364 7.95l4.243 4.242a1 1 0 11-1.415 1.415L7.95 9.364l-4.243 4.243a1 1 0 01-1.414-1.415L6.536 7.95 2.293 3.707a1 1 0 011.414-1.414L7.95 6.536z" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div className="p-5">
|
||||
{/* Modal header */}
|
||||
<div className="mb-2">
|
||||
<div className="mb-3">
|
||||
<div className="text-xs inline-flex font-medium bg-indigo-100 text-indigo-600 rounded-full text-center px-2.5 py-1">New on Mosaic</div>
|
||||
</div>
|
||||
<div className="text-lg font-semibold text-slate-800">Help your team work faster with X 🏃♂️</div>
|
||||
</div>
|
||||
{/* Modal content */}
|
||||
<div className="text-sm mb-5">
|
||||
<div className="space-y-2">
|
||||
<p>You might not be aware of this fact, but every frame, digital video, canvas, responsive design, and image often has a rectangular shape that is exceptionally precise in proportion (or ratio).</p>
|
||||
<p>The ratio has to be well-defined to make shapes fit into different and distinct mediums, such as computer, movies, television and camera screens.</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* Modal footer */}
|
||||
<div className="flex flex-wrap justify-end space-x-2">
|
||||
<button className="btn-sm bg-indigo-500 hover:bg-indigo-600 text-white" onClick={(e) => { e.stopPropagation(); setNewsModalOpen(false); }}>Cool, I Got it</button>
|
||||
</div>
|
||||
</div>
|
||||
</ModalBlank>
|
||||
{/* End */}
|
||||
</div>
|
||||
|
||||
{/* Change your Plan */}
|
||||
<div className="m-1.5">
|
||||
{/* Start */}
|
||||
<button className="btn bg-indigo-500 hover:bg-indigo-600 text-white" aria-controls="feedback-modal" onClick={(e) => { e.stopPropagation(); setPlanModalOpen(true); }}>Change your Plan</button>
|
||||
<ModalBasic id="feedback-modal" modalOpen={planModalOpen} setModalOpen={setPlanModalOpen} title="Change your Plan">
|
||||
{/* Modal content */}
|
||||
<div className="px-5 pt-4 pb-1">
|
||||
<div className="text-sm">
|
||||
<div className="mb-4">Upgrade or downgrade your plan:</div>
|
||||
{/* Options */}
|
||||
<ul className="space-y-2 mb-4">
|
||||
<li>
|
||||
<button className="w-full h-full text-left py-3 px-4 rounded bg-white border-2 border-indigo-400 shadow-sm duration-150 ease-in-out">
|
||||
<div className="flex items-center">
|
||||
<div className="w-4 h-4 border-4 border-indigo-500 rounded-full mr-3"></div>
|
||||
<div className="grow">
|
||||
<div className="flex flex-wrap items-center justify-between mb-0.5">
|
||||
<span className="font-medium text-slate-800">Mosaic Light <span className="text-xs italic text-slate-500 align-top">Current Plan</span></span>
|
||||
<span><span className="font-medium text-emerald-600">$39.00</span>/mo</span>
|
||||
</div>
|
||||
<div className="text-sm">2 MB · 1 member · 500 block limits</div>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button className="w-full h-full text-left py-3 px-4 rounded bg-white border border-slate-200 hover:border-slate-300 shadow-sm duration-150 ease-in-out">
|
||||
<div className="flex items-center">
|
||||
<div className="w-4 h-4 border-2 border-slate-300 rounded-full mr-3"></div>
|
||||
<div className="grow">
|
||||
<div className="flex flex-wrap items-center justify-between mb-0.5">
|
||||
<span className="font-semibold text-slate-800">Mosaic Basic <span className="text-xs italic text-indigo-500 align-top">Best Value ✨</span></span>
|
||||
<span><span className="font-medium text-emerald-600">$59.00</span>/mo</span>
|
||||
</div>
|
||||
<div className="text-sm">5 MB · 2 members · 1000 block limits</div>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button className="w-full h-full text-left py-3 px-4 rounded bg-white border border-slate-200 hover:border-slate-300 shadow-sm duration-150 ease-in-out">
|
||||
<div className="flex items-center">
|
||||
<div className="w-4 h-4 border-2 border-slate-300 rounded-full mr-3"></div>
|
||||
<div className="grow">
|
||||
<div className="flex flex-wrap items-center justify-between mb-0.5">
|
||||
<span className="font-semibold text-slate-800">Mosaic Plus</span>
|
||||
<span><span className="font-medium text-emerald-600">$79.00</span>/mo</span>
|
||||
</div>
|
||||
<div className="text-sm">10 MB · 5 members · Unlimited block limits</div>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
<div className="text-xs text-slate-500">Your workspace’s Mosaic Light Plan is set to $39 per month and will renew on August 9, 2021.</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Modal footer */}
|
||||
<div className="px-5 py-4">
|
||||
<div className="flex flex-wrap justify-end space-x-2">
|
||||
<button className="btn-sm border-slate-200 hover:border-slate-300 text-slate-600" onClick={(e) => { e.stopPropagation(); setPlanModalOpen(false); }}>Cancel</button>
|
||||
<button className="btn-sm bg-indigo-500 hover:bg-indigo-600 text-white">Change Plan</button>
|
||||
</div>
|
||||
</div>
|
||||
</ModalBasic>
|
||||
{/* End */}
|
||||
</div>
|
||||
|
||||
{/* Quick Find */}
|
||||
<div className="m-1.5">
|
||||
{/* Start */}
|
||||
<button className="btn bg-indigo-500 hover:bg-indigo-600 text-white" aria-controls="quick-find-modal" onClick={(e) => { e.stopPropagation(); setSearchModalOpen(true); }}>Quick Find</button>
|
||||
<ModalSearch id="quick-find-modal" searchId="quick-find" modalOpen={searchModalOpen} setModalOpen={setSearchModalOpen} />
|
||||
{/* End */}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default ModalPage;
|
||||
@@ -1,75 +0,0 @@
|
||||
import React, { useState } from 'react';
|
||||
|
||||
import Sidebar from '../../partials/Sidebar';
|
||||
import Header from '../../partials/Header';
|
||||
import PaginationNumeric from '../../components/PaginationNumeric';
|
||||
import PaginationClassic from '../../components/PaginationClassic';
|
||||
import PaginationNumeric2 from '../../components/PaginationNumeric2';
|
||||
|
||||
function PaginationPage() {
|
||||
|
||||
const [sidebarOpen, setSidebarOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<div className="flex h-screen overflow-hidden">
|
||||
|
||||
{/* Sidebar */}
|
||||
<Sidebar sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
|
||||
|
||||
{/* Content area */}
|
||||
<div className="relative flex flex-col flex-1 overflow-y-auto overflow-x-hidden bg-white">
|
||||
|
||||
{/* Site header */}
|
||||
<Header sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
|
||||
|
||||
<main>
|
||||
<div className="px-4 sm:px-6 lg:px-8 py-8 w-full max-w-9xl mx-auto">
|
||||
|
||||
{/* Page header */}
|
||||
<div className="mb-8">
|
||||
<h1 className="text-2xl md:text-3xl text-slate-800 font-bold">Pagination ✨</h1>
|
||||
</div>
|
||||
|
||||
<div className="border-t border-slate-200">
|
||||
|
||||
{/* Components */}
|
||||
<div className="space-y-8 mt-8">
|
||||
|
||||
{/* Option 1 */}
|
||||
<div>
|
||||
<h2 className="text-2xl text-slate-800 font-bold mb-6">Option 1</h2>
|
||||
<div className="px-6 py-8 bg-slate-50 border border-slate-200 rounded-sm">
|
||||
<PaginationNumeric />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Option 2 */}
|
||||
<div>
|
||||
<h2 className="text-2xl text-slate-800 font-bold mb-6">Option 2</h2>
|
||||
<div className="px-6 py-8 bg-slate-50 border border-slate-200 rounded-sm">
|
||||
<PaginationClassic />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Option 3 */}
|
||||
<div>
|
||||
<h2 className="text-2xl text-slate-800 font-bold mb-6">Option 3</h2>
|
||||
<div className="px-6 py-8 bg-slate-50 border border-slate-200 rounded-sm">
|
||||
<PaginationNumeric2 />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default PaginationPage;
|
||||
@@ -1,176 +0,0 @@
|
||||
import React, { useState } from 'react';
|
||||
|
||||
import Sidebar from '../../partials/Sidebar';
|
||||
import Header from '../../partials/Header';
|
||||
|
||||
function TabsPage() {
|
||||
|
||||
const [sidebarOpen, setSidebarOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<div className="flex h-screen overflow-hidden">
|
||||
|
||||
{/* Sidebar */}
|
||||
<Sidebar sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
|
||||
|
||||
{/* Content area */}
|
||||
<div className="relative flex flex-col flex-1 overflow-y-auto overflow-x-hidden bg-white">
|
||||
|
||||
{/* Site header */}
|
||||
<Header sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
|
||||
|
||||
<main>
|
||||
<div className="px-4 sm:px-6 lg:px-8 py-8 w-full max-w-9xl mx-auto">
|
||||
|
||||
{/* Page header */}
|
||||
<div className="mb-8">
|
||||
<h1 className="text-2xl md:text-3xl text-slate-800 font-bold">Tabs ✨</h1>
|
||||
</div>
|
||||
|
||||
<div className="border-t border-slate-200">
|
||||
|
||||
{/* Components */}
|
||||
<div className="space-y-8 mt-8">
|
||||
|
||||
{/* Simple */}
|
||||
<div>
|
||||
<h2 className="text-2xl text-slate-800 font-bold mb-6">Simple</h2>
|
||||
{/* Start */}
|
||||
<div className="mb-8 border-b border-slate-200">
|
||||
<ul className="text-sm font-medium flex flex-nowrap -mx-4 sm:-mx-6 lg:-mx-8 overflow-x-scroll no-scrollbar">
|
||||
<li className="pb-3 mr-6 last:mr-0 first:pl-4 sm:first:pl-6 lg:first:pl-8 last:pr-4 sm:last:pr-6 lg:last:pr-8">
|
||||
<a className="text-indigo-500 whitespace-nowrap" href="#0">Account</a>
|
||||
</li>
|
||||
<li className="pb-3 mr-6 last:mr-0 first:pl-4 sm:first:pl-6 lg:first:pl-8 last:pr-4 sm:last:pr-6 lg:last:pr-8">
|
||||
<a className="text-slate-500 hover:text-slate-600 whitespace-nowrap" href="#0">Notifications</a>
|
||||
</li>
|
||||
<li className="pb-3 mr-6 last:mr-0 first:pl-4 sm:first:pl-6 lg:first:pl-8 last:pr-4 sm:last:pr-6 lg:last:pr-8">
|
||||
<a className="text-slate-500 hover:text-slate-600 whitespace-nowrap" href="#0">Integrations</a>
|
||||
</li>
|
||||
<li className="pb-3 mr-6 last:mr-0 first:pl-4 sm:first:pl-6 lg:first:pl-8 last:pr-4 sm:last:pr-6 lg:last:pr-8">
|
||||
<a className="text-slate-500 hover:text-slate-600 whitespace-nowrap" href="#0">Plans</a>
|
||||
</li>
|
||||
<li className="pb-3 mr-6 last:mr-0 first:pl-4 sm:first:pl-6 lg:first:pl-8 last:pr-4 sm:last:pr-6 lg:last:pr-8">
|
||||
<a className="text-slate-500 hover:text-slate-600 whitespace-nowrap" href="#0">Billing</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
{/* End */}
|
||||
</div>
|
||||
|
||||
{/* With Underline */}
|
||||
<div>
|
||||
<h2 className="text-2xl text-slate-800 font-bold mb-6">With Underline</h2>
|
||||
{/* Start */}
|
||||
<div className="relative mb-8">
|
||||
<div className="absolute bottom-0 w-full h-px bg-slate-200" aria-hidden="true"></div>
|
||||
<ul className="relative text-sm font-medium flex flex-nowrap -mx-4 sm:-mx-6 lg:-mx-8 overflow-x-scroll no-scrollbar">
|
||||
<li className="mr-6 last:mr-0 first:pl-4 sm:first:pl-6 lg:first:pl-8 last:pr-4 sm:last:pr-6 lg:last:pr-8">
|
||||
<a className="block pb-3 text-indigo-500 whitespace-nowrap border-b-2 border-indigo-500" href="#0">Account</a>
|
||||
</li>
|
||||
<li className="mr-6 last:mr-0 first:pl-4 sm:first:pl-6 lg:first:pl-8 last:pr-4 sm:last:pr-6 lg:last:pr-8">
|
||||
<a className="block pb-3 text-slate-500 hover:text-slate-600 whitespace-nowrap" href="#0">Notifications</a>
|
||||
</li>
|
||||
<li className="mr-6 last:mr-0 first:pl-4 sm:first:pl-6 lg:first:pl-8 last:pr-4 sm:last:pr-6 lg:last:pr-8">
|
||||
<a className="block pb-3 text-slate-500 hover:text-slate-600 whitespace-nowrap" href="#0">Integrations</a>
|
||||
</li>
|
||||
<li className="mr-6 last:mr-0 first:pl-4 sm:first:pl-6 lg:first:pl-8 last:pr-4 sm:last:pr-6 lg:last:pr-8">
|
||||
<a className="block pb-3 text-slate-500 hover:text-slate-600 whitespace-nowrap" href="#0">Plans</a>
|
||||
</li>
|
||||
<li className="mr-6 last:mr-0 first:pl-4 sm:first:pl-6 lg:first:pl-8 last:pr-4 sm:last:pr-6 lg:last:pr-8">
|
||||
<a className="block pb-3 text-slate-500 hover:text-slate-600 whitespace-nowrap" href="#0">Billing</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
{/* End */}
|
||||
</div>
|
||||
|
||||
{/* With Icons */}
|
||||
<div>
|
||||
<h2 className="text-2xl text-slate-800 font-bold mb-6">With Icons</h2>
|
||||
{/* Start */}
|
||||
<div className="mb-8 border-b border-slate-200">
|
||||
<ul className="text-sm font-medium flex flex-nowrap -mx-4 sm:-mx-6 lg:-mx-8 overflow-x-scroll no-scrollbar">
|
||||
<li className="pb-3 mr-6 last:mr-0 first:pl-4 sm:first:pl-6 lg:first:pl-8 last:pr-4 sm:last:pr-6 lg:last:pr-8">
|
||||
<a className="text-indigo-500 whitespace-nowrap flex items-center" href="#0">
|
||||
<svg className="w-4 h-4 shrink-0 fill-current mr-2" viewBox=" 0 0 16 16">
|
||||
<path d="M12.311 9.527c-1.161-.393-1.85-.825-2.143-1.175A3.991 3.991 0 0012 5V4c0-2.206-1.794-4-4-4S4 1.794 4 4v1c0 1.406.732 2.639 1.832 3.352-.292.35-.981.782-2.142 1.175A3.942 3.942 0 001 13.26V16h14v-2.74c0-1.69-1.081-3.19-2.689-3.733zM6 4c0-1.103.897-2 2-2s2 .897 2 2v1c0 1.103-.897 2-2 2s-2-.897-2-2V4zm7 10H3v-.74c0-.831.534-1.569 1.33-1.838 1.845-.624 3-1.436 3.452-2.422h.436c.452.986 1.607 1.798 3.453 2.422A1.943 1.943 0 0113 13.26V14z" />
|
||||
</svg>
|
||||
<span>Account</span>
|
||||
</a>
|
||||
</li>
|
||||
<li className="pb-3 mr-6 last:mr-0 first:pl-4 sm:first:pl-6 lg:first:pl-8 last:pr-4 sm:last:pr-6 lg:last:pr-8">
|
||||
<a className="text-slate-500 hover:text-slate-600 whitespace-nowrap flex items-center" href="#0">
|
||||
<svg className="w-4 h-4 shrink-0 fill-current text-slate-400 mr-2" viewBox=" 0 0 16 16">
|
||||
<path d="M14.3.3c.4-.4 1-.4 1.4 0 .4.4.4 1 0 1.4l-8 8c-.2.2-.4.3-.7.3-.3 0-.5-.1-.7-.3-.4-.4-.4-1 0-1.4l8-8zM15 7c.6 0 1 .4 1 1 0 4.4-3.6 8-8 8s-8-3.6-8-8 3.6-8 8-8c.6 0 1 .4 1 1s-.4 1-1 1C4.7 2 2 4.7 2 8s2.7 6 6 6 6-2.7 6-6c0-.6.4-1 1-1z" />
|
||||
</svg>
|
||||
<span>Notifications</span>
|
||||
</a>
|
||||
</li>
|
||||
<li className="pb-3 mr-6 last:mr-0 first:pl-4 sm:first:pl-6 lg:first:pl-8 last:pr-4 sm:last:pr-6 lg:last:pr-8">
|
||||
<a className="text-slate-500 hover:text-slate-600 whitespace-nowrap flex items-center" href="#0">
|
||||
<svg className="w-4 h-4 shrink-0 fill-current text-slate-400 mr-2" viewBox=" 0 0 16 16">
|
||||
<path d="M3.414 2L9 7.586V16H7V8.414l-5-5V6H0V1a1 1 0 011-1h5v2H3.414zM15 0a1 1 0 011 1v5h-2V3.414l-3.172 3.172-1.414-1.414L12.586 2H10V0h5z" />
|
||||
</svg>
|
||||
<span>Integrations</span>
|
||||
</a>
|
||||
</li>
|
||||
<li className="pb-3 mr-6 last:mr-0 first:pl-4 sm:first:pl-6 lg:first:pl-8 last:pr-4 sm:last:pr-6 lg:last:pr-8">
|
||||
<a className="text-slate-500 hover:text-slate-600 whitespace-nowrap flex items-center" href="#0">
|
||||
<svg className="w-4 h-4 shrink-0 fill-current text-slate-400 mr-2" viewBox=" 0 0 16 16">
|
||||
<path d="M5 9h11v2H5V9zM0 9h3v2H0V9zm5 4h6v2H5v-2zm-5 0h3v2H0v-2zm5-8h7v2H5V5zM0 5h3v2H0V5zm5-4h11v2H5V1zM0 1h3v2H0V1z" />
|
||||
</svg>
|
||||
<span>Plans</span>
|
||||
</a>
|
||||
</li>
|
||||
<li className="pb-3 mr-6 last:mr-0 first:pl-4 sm:first:pl-6 lg:first:pl-8 last:pr-4 sm:last:pr-6 lg:last:pr-8">
|
||||
<a className="text-slate-500 hover:text-slate-600 whitespace-nowrap flex items-center" href="#0">
|
||||
<svg className="w-4 h-4 shrink-0 fill-current text-slate-400 mr-2" viewBox=" 0 0 16 16">
|
||||
<path d="M15 4c.6 0 1 .4 1 1v10c0 .6-.4 1-1 1H3c-1.7 0-3-1.3-3-3V3c0-1.7 1.3-3 3-3h7c.6 0 1 .4 1 1v3h4zM2 3v1h7V2H3c-.6 0-1 .4-1 1zm12 11V6H2v7c0 .6.4 1 1 1h11zm-3-5h2v2h-2V9z" />
|
||||
</svg>
|
||||
<span>Billing</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
{/* End */}
|
||||
</div>
|
||||
|
||||
{/* With Container */}
|
||||
<div>
|
||||
<h2 className="text-2xl text-slate-800 font-bold mb-6">With Container</h2>
|
||||
{/* Start */}
|
||||
<ul className="flex flex-wrap -m-1">
|
||||
<li className="m-1">
|
||||
<button className="inline-flex items-center justify-center text-sm font-medium leading-5 rounded-full px-3 py-1 border border-transparent shadow-sm bg-indigo-500 text-white duration-150 ease-in-out">Account</button>
|
||||
</li>
|
||||
<li className="m-1">
|
||||
<button className="inline-flex items-center justify-center text-sm font-medium leading-5 rounded-full px-3 py-1 border border-slate-200 hover:border-slate-300 shadow-sm bg-white text-slate-500 duration-150 ease-in-out">Notifications</button>
|
||||
</li>
|
||||
<li className="m-1">
|
||||
<button className="inline-flex items-center justify-center text-sm font-medium leading-5 rounded-full px-3 py-1 border border-slate-200 hover:border-slate-300 shadow-sm bg-white text-slate-500 duration-150 ease-in-out">Integrations</button>
|
||||
</li>
|
||||
<li className="m-1">
|
||||
<button className="inline-flex items-center justify-center text-sm font-medium leading-5 rounded-full px-3 py-1 border border-slate-200 hover:border-slate-300 shadow-sm bg-white text-slate-500 duration-150 ease-in-out">Plans</button>
|
||||
</li>
|
||||
<li className="m-1">
|
||||
<button className="inline-flex items-center justify-center text-sm font-medium leading-5 rounded-full px-3 py-1 border border-slate-200 hover:border-slate-300 shadow-sm bg-white text-slate-500 duration-150 ease-in-out">Billing</button>
|
||||
</li>
|
||||
</ul>
|
||||
{/* End */}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default TabsPage;
|
||||
@@ -1,203 +0,0 @@
|
||||
import React, { useState } from 'react';
|
||||
|
||||
import Sidebar from '../../partials/Sidebar';
|
||||
import Header from '../../partials/Header';
|
||||
import Tooltip from '../../components/Tooltip';
|
||||
|
||||
function TooltipPage() {
|
||||
|
||||
const [sidebarOpen, setSidebarOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<div className="flex h-screen overflow-hidden">
|
||||
|
||||
{/* Sidebar */}
|
||||
<Sidebar sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
|
||||
|
||||
{/* Content area */}
|
||||
<div className="relative flex flex-col flex-1 overflow-y-auto overflow-x-hidden bg-white">
|
||||
|
||||
{/* Site header */}
|
||||
<Header sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
|
||||
|
||||
<main>
|
||||
<div className="px-4 sm:px-6 lg:px-8 py-8 w-full max-w-9xl mx-auto">
|
||||
|
||||
{/* Page header */}
|
||||
<div className="mb-8">
|
||||
<h1 className="text-2xl md:text-3xl text-slate-800 font-bold">Tooltip ✨</h1>
|
||||
</div>
|
||||
|
||||
<div className="border-t border-slate-200">
|
||||
|
||||
{/* Components */}
|
||||
<div className="space-y-8 mt-8">
|
||||
|
||||
{/* Tooltip Types */}
|
||||
<div>
|
||||
<h2 className="text-2xl text-slate-800 font-bold mb-6">Tooltip Types</h2>
|
||||
<div className="flex flex-wrap items-center -m-4">
|
||||
|
||||
<div className="m-4">
|
||||
<div className="flex items-center space-x-2">
|
||||
{/* Start */}
|
||||
<Tooltip>
|
||||
<div className="text-xs whitespace-nowrap">Just a tip</div>
|
||||
</Tooltip>
|
||||
{/* End */}
|
||||
<div className="text-sm font-medium text-slate-500">Label White</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="m-4">
|
||||
<div className="flex items-center space-x-2">
|
||||
{/* Start */}
|
||||
<Tooltip bg="dark">
|
||||
<div className="text-xs text-slate-200 whitespace-nowrap">Just a tip</div>
|
||||
</Tooltip>
|
||||
{/* End */}
|
||||
<div className="text-sm font-medium text-slate-500">Label Dark</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="m-4">
|
||||
<div className="flex items-center space-x-2">
|
||||
{/* Start */}
|
||||
<Tooltip size="md">
|
||||
<div className="text-xs">Excepteur sint occaecat cupidata non proident, sunt in.</div>
|
||||
</Tooltip>
|
||||
{/* End */}
|
||||
<div className="text-sm font-medium text-slate-500">Basic White</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="m-4">
|
||||
<div className="flex items-center space-x-2">
|
||||
{/* Start */}
|
||||
<Tooltip size="md" bg="dark">
|
||||
<div className="text-xs text-slate-200">Excepteur sint occaecat cupidata non proident, sunt in.</div>
|
||||
</Tooltip>
|
||||
{/* End */}
|
||||
<div className="text-sm font-medium text-slate-500">Basic Dark</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="m-4">
|
||||
<div className="flex items-center space-x-2">
|
||||
{/* Start */}
|
||||
<Tooltip size="lg">
|
||||
<div className="text-sm font-medium text-slate-500">Excepteur sint occaecat cupidata non proident, sunt in.</div>
|
||||
</Tooltip>
|
||||
{/* End */}
|
||||
<div className="text-sm font-medium text-slate-500">Large White</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="m-4">
|
||||
<div className="flex items-center space-x-2">
|
||||
{/* Start */}
|
||||
<Tooltip size="lg" bg="dark">
|
||||
<div className="text-sm font-medium text-slate-200">Excepteur sint occaecat cupidata non proident, sunt in.</div>
|
||||
</Tooltip>
|
||||
{/* End */}
|
||||
<div className="text-sm font-medium text-slate-500">Large Dark</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="m-4">
|
||||
<div className="flex items-center space-x-2">
|
||||
{/* Start */}
|
||||
<Tooltip size="lg">
|
||||
<div className="text-xs">
|
||||
<div className="font-medium text-slate-800 mb-0.5">Let’s Talk Paragraph</div>
|
||||
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
||||
</div>
|
||||
</Tooltip>
|
||||
{/* End */}
|
||||
<div className="text-sm font-medium text-slate-500">Rich White</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="m-4">
|
||||
<div className="flex items-center space-x-2">
|
||||
{/* Start */}
|
||||
<Tooltip size="lg" bg="dark">
|
||||
<div className="text-xs">
|
||||
<div className="font-medium text-slate-200 mb-0.5">Let’s Talk Paragraph</div>
|
||||
<div className="text-slate-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
|
||||
</div>
|
||||
</Tooltip>
|
||||
{/* End */}
|
||||
<div className="text-sm font-medium text-slate-500">Rich Dark</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tooltip Position */}
|
||||
<div>
|
||||
<h2 className="text-2xl text-slate-800 font-bold mb-6">Tooltip Position</h2>
|
||||
<div className="flex flex-wrap items-center -m-4">
|
||||
|
||||
<div className="m-4">
|
||||
<div className="flex items-center space-x-2">
|
||||
{/* Start */}
|
||||
<Tooltip>
|
||||
<div className="text-xs whitespace-nowrap">Just a tip</div>
|
||||
</Tooltip>
|
||||
{/* End */}
|
||||
<div className="text-sm font-medium text-slate-500">Top</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="m-4">
|
||||
<div className="flex items-center space-x-2">
|
||||
{/* Start */}
|
||||
<Tooltip position="bottom">
|
||||
<div className="text-xs whitespace-nowrap">Just a tip</div>
|
||||
</Tooltip>
|
||||
{/* End */}
|
||||
<div className="text-sm font-medium text-slate-500">Bottom</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="m-4">
|
||||
<div className="flex items-center space-x-2">
|
||||
{/* Start */}
|
||||
<Tooltip position="left">
|
||||
<div className="text-xs whitespace-nowrap">Just a tip</div>
|
||||
</Tooltip>
|
||||
{/* End */}
|
||||
<div className="text-sm font-medium text-slate-500">Left</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="m-4">
|
||||
<div className="flex items-center space-x-2">
|
||||
{/* Start */}
|
||||
<Tooltip position="right">
|
||||
<div className="text-xs whitespace-nowrap">Just a tip</div>
|
||||
</Tooltip>
|
||||
{/* End */}
|
||||
<div className="text-sm font-medium text-slate-500">Right</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default TooltipPage;
|
||||
Reference in New Issue
Block a user