684 lines
31 KiB
TypeScript
684 lines
31 KiB
TypeScript
import React, { useState } from 'react';
|
|
import AlertModal, { AlertModalVariant } from '../components/ui/alert/AlertModal';
|
|
import { Modal } from '../components/ui/modal';
|
|
import Button from '../components/ui/button/Button';
|
|
import { Dropdown } from '../components/ui/dropdown/Dropdown';
|
|
import { DropdownItem } from '../components/ui/dropdown/DropdownItem';
|
|
import { Pagination } from '../components/ui/pagination/Pagination';
|
|
import { Card, CardImage, CardTitle, CardDescription, CardAction, CardIcon } from '../components/ui/card/Card';
|
|
import ChartTab from '../components/common/ChartTab';
|
|
import PageMeta from '../components/common/PageMeta';
|
|
|
|
export default function Components() {
|
|
// Alert modals state
|
|
const [alertModal, setAlertModal] = useState<{
|
|
isOpen: boolean;
|
|
variant: AlertModalVariant;
|
|
}>({
|
|
isOpen: false,
|
|
variant: 'info',
|
|
});
|
|
|
|
// Regular modals state
|
|
const [defaultModal, setDefaultModal] = useState(false);
|
|
const [centeredModal, setCenteredModal] = useState(false);
|
|
const [formModal, setFormModal] = useState(false);
|
|
const [fullScreenModal, setFullScreenModal] = useState(false);
|
|
|
|
const openAlertModal = (variant: AlertModalVariant) => {
|
|
setAlertModal({ isOpen: true, variant });
|
|
};
|
|
|
|
const alertMessages = {
|
|
success: {
|
|
title: 'Well Done!',
|
|
message: 'Lorem ipsum dolor sit amet consectetur. Feugiat ipsum libero tempor felis risus nisi non. Quisque eu ut tempor curabitur.',
|
|
},
|
|
info: {
|
|
title: 'Information Alert!',
|
|
message: 'Lorem ipsum dolor sit amet consectetur. Feugiat ipsum libero tempor felis risus nisi non. Quisque eu ut tempor curabitur.',
|
|
},
|
|
warning: {
|
|
title: 'Warning Alert!',
|
|
message: 'Lorem ipsum dolor sit amet consectetur. Feugiat ipsum libero tempor felis risus nisi non. Quisque eu ut tempor curabitur.',
|
|
},
|
|
danger: {
|
|
title: 'Danger Alert!',
|
|
message: 'Lorem ipsum dolor sit amet consectetur. Feugiat ipsum libero tempor felis risus nisi non. Quisque eu ut tempor curabitur.',
|
|
},
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<PageMeta
|
|
title="React.js Components Dashboard | TailAdmin - React.js Admin Dashboard Template"
|
|
description="This is React.js Components Dashboard page for TailAdmin - React.js Tailwind CSS Admin Dashboard Template"
|
|
/>
|
|
<div className="space-y-5 sm:space-y-6">
|
|
<div className="grid grid-cols-1 gap-5 xl:grid-cols-2 xl:gap-6">
|
|
{/* Default Modal Card */}
|
|
<div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
|
|
<div className="px-6 py-5">
|
|
<h3 className="text-base font-medium text-gray-800 dark:text-white/90">
|
|
Default Modal
|
|
</h3>
|
|
</div>
|
|
<div className="p-4 border-t border-gray-100 dark:border-gray-800 sm:p-6">
|
|
<div className="space-y-6">
|
|
<Button
|
|
variant="primary"
|
|
onClick={() => setDefaultModal(true)}
|
|
>
|
|
Open Modal
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Vertically Centered Modal Card */}
|
|
<div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
|
|
<div className="px-6 py-5">
|
|
<h3 className="text-base font-medium text-gray-800 dark:text-white/90">
|
|
Vertically Centered Modal
|
|
</h3>
|
|
</div>
|
|
<div className="p-4 border-t border-gray-100 dark:border-gray-800 sm:p-6">
|
|
<div className="space-y-6">
|
|
<Button
|
|
variant="primary"
|
|
onClick={() => setCenteredModal(true)}
|
|
>
|
|
Open Modal
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Form In Modal Card */}
|
|
<div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
|
|
<div className="px-6 py-5">
|
|
<h3 className="text-base font-medium text-gray-800 dark:text-white/90">
|
|
Form In Modal
|
|
</h3>
|
|
</div>
|
|
<div className="p-4 border-t border-gray-100 dark:border-gray-800 sm:p-6">
|
|
<div className="space-y-6">
|
|
<Button
|
|
variant="primary"
|
|
onClick={() => setFormModal(true)}
|
|
>
|
|
Open Modal
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Full Screen Modal Card */}
|
|
<div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
|
|
<div className="px-6 py-5">
|
|
<h3 className="text-base font-medium text-gray-800 dark:text-white/90">
|
|
Full Screen Modal
|
|
</h3>
|
|
</div>
|
|
<div className="p-4 border-t border-gray-100 dark:border-gray-800 sm:p-6">
|
|
<div className="space-y-6">
|
|
<Button
|
|
variant="primary"
|
|
onClick={() => setFullScreenModal(true)}
|
|
>
|
|
Open Modal
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Modal Based Alerts Card */}
|
|
<div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03] xl:col-span-2">
|
|
<div className="px-6 py-5">
|
|
<h3 className="text-base font-medium text-gray-800 dark:text-white/90">
|
|
Modal Based Alerts
|
|
</h3>
|
|
</div>
|
|
<div className="p-4 border-t border-gray-100 dark:border-gray-800 sm:p-6">
|
|
<div className="space-y-6">
|
|
<div className="flex flex-wrap items-center gap-3">
|
|
<button
|
|
onClick={() => openAlertModal('success')}
|
|
className="px-4 py-3 text-sm font-medium text-white rounded-lg bg-success-500 shadow-theme-xs hover:bg-success-600 transition-colors"
|
|
>
|
|
Success Alert
|
|
</button>
|
|
<button
|
|
onClick={() => openAlertModal('info')}
|
|
className="px-4 py-3 text-sm font-medium text-white rounded-lg bg-blue-light-500 shadow-theme-xs hover:bg-blue-light-600 transition-colors"
|
|
>
|
|
Info Alert
|
|
</button>
|
|
<button
|
|
onClick={() => openAlertModal('warning')}
|
|
className="px-4 py-3 text-sm font-medium text-white rounded-lg bg-warning-500 shadow-theme-xs hover:bg-warning-600 transition-colors"
|
|
>
|
|
Warning Alert
|
|
</button>
|
|
<button
|
|
onClick={() => openAlertModal('danger')}
|
|
className="px-4 py-3 text-sm font-medium text-white rounded-lg bg-error-500 shadow-theme-xs hover:bg-error-600 transition-colors"
|
|
>
|
|
Danger Alert
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Dropdowns, Buttons Group, Ribbons, Spinners, Tabs, Tooltips, Pagination, Cards */}
|
|
<DropdownsShowcase />
|
|
<ButtonGroupsShowcase />
|
|
<RibbonsShowcase />
|
|
<SpinnersShowcase />
|
|
<TabsShowcase />
|
|
<TooltipsShowcase />
|
|
<PaginationShowcase />
|
|
<CardsShowcase />
|
|
|
|
{/* Alert Modals */}
|
|
<AlertModal
|
|
isOpen={alertModal.isOpen}
|
|
onClose={() => setAlertModal({ ...alertModal, isOpen: false })}
|
|
title={alertMessages[alertModal.variant].title}
|
|
message={alertMessages[alertModal.variant].message}
|
|
variant={alertModal.variant}
|
|
/>
|
|
|
|
{/* Default Modal */}
|
|
<Modal
|
|
isOpen={defaultModal}
|
|
onClose={() => setDefaultModal(false)}
|
|
className="max-w-md"
|
|
>
|
|
<div className="p-6">
|
|
<h2 className="text-xl font-bold mb-4 text-gray-800 dark:text-white">
|
|
Modal Heading
|
|
</h2>
|
|
<p className="text-gray-600 dark:text-gray-400 mb-6">
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque
|
|
euismod est quis mauris lacinia pharetra.
|
|
</p>
|
|
<div className="flex justify-end gap-4">
|
|
<Button variant="outline" onClick={() => setDefaultModal(false)}>
|
|
Close
|
|
</Button>
|
|
<Button variant="primary" onClick={() => setDefaultModal(false)}>
|
|
Save Changes
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</Modal>
|
|
|
|
{/* Vertically Centered Modal */}
|
|
<Modal
|
|
isOpen={centeredModal}
|
|
onClose={() => setCenteredModal(false)}
|
|
className="max-w-md"
|
|
>
|
|
<div className="p-6">
|
|
<h2 className="text-xl font-bold mb-4 text-gray-800 dark:text-white">
|
|
Vertically Centered Modal
|
|
</h2>
|
|
<p className="text-gray-600 dark:text-gray-400 mb-6">
|
|
This modal is centered vertically on the screen. Lorem ipsum dolor sit
|
|
amet, consectetur adipiscing elit.
|
|
</p>
|
|
<div className="flex justify-end gap-4">
|
|
<Button variant="outline" onClick={() => setCenteredModal(false)}>
|
|
Close
|
|
</Button>
|
|
<Button variant="primary" onClick={() => setCenteredModal(false)}>
|
|
Save Changes
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</Modal>
|
|
|
|
{/* Form In Modal */}
|
|
<Modal
|
|
isOpen={formModal}
|
|
onClose={() => setFormModal(false)}
|
|
className="max-w-2xl"
|
|
>
|
|
<div className="p-6">
|
|
<h2 className="text-xl font-bold mb-6 text-gray-800 dark:text-white">
|
|
Personal Information
|
|
</h2>
|
|
<form className="space-y-4">
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
First Name
|
|
</label>
|
|
<input
|
|
type="text"
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-lg dark:bg-gray-800 dark:border-gray-700 dark:text-white"
|
|
defaultValue="Emirhan"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
Last Name
|
|
</label>
|
|
<input
|
|
type="text"
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-lg dark:bg-gray-800 dark:border-gray-700 dark:text-white"
|
|
defaultValue="Boruch"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
Email
|
|
</label>
|
|
<input
|
|
type="email"
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-lg dark:bg-gray-800 dark:border-gray-700 dark:text-white"
|
|
defaultValue="emirhanboruch55@gmail.com"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
Phone
|
|
</label>
|
|
<input
|
|
type="tel"
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-lg dark:bg-gray-800 dark:border-gray-700 dark:text-white"
|
|
defaultValue="+09 363 398 46"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
Bio
|
|
</label>
|
|
<textarea
|
|
rows={4}
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-lg dark:bg-gray-800 dark:border-gray-700 dark:text-white"
|
|
defaultValue="Team Manager"
|
|
/>
|
|
</div>
|
|
<div className="flex justify-end gap-4 pt-4">
|
|
<Button variant="outline" onClick={() => setFormModal(false)}>
|
|
Close
|
|
</Button>
|
|
<Button variant="primary" onClick={() => setFormModal(false)}>
|
|
Save Changes
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</Modal>
|
|
|
|
{/* Full Screen Modal */}
|
|
<Modal
|
|
isOpen={fullScreenModal}
|
|
onClose={() => setFullScreenModal(false)}
|
|
className="max-w-4xl"
|
|
isFullscreen={false}
|
|
>
|
|
<div className="p-8">
|
|
<h2 className="text-2xl font-bold mb-4 text-gray-800 dark:text-white">
|
|
Full Screen Modal
|
|
</h2>
|
|
<p className="text-gray-600 dark:text-gray-400 mb-6">
|
|
This is a larger modal that takes up more screen space. Lorem ipsum
|
|
dolor sit amet, consectetur adipiscing elit. Pellentesque euismod est
|
|
quis mauris lacinia pharetra.
|
|
</p>
|
|
<div className="flex justify-end gap-4">
|
|
<Button variant="outline" onClick={() => setFullScreenModal(false)}>
|
|
Close
|
|
</Button>
|
|
<Button variant="primary" onClick={() => setFullScreenModal(false)}>
|
|
Save Changes
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</Modal>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
// Dropdowns Showcase Component
|
|
function DropdownsShowcase() {
|
|
const [dropdown1, setDropdown1] = useState(false);
|
|
const [dropdown2, setDropdown2] = useState(false);
|
|
const [dropdown3, setDropdown3] = useState(false);
|
|
|
|
return (
|
|
<div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
|
|
<div className="px-6 py-5">
|
|
<h3 className="text-base font-medium text-gray-800 dark:text-white/90">Dropdowns</h3>
|
|
</div>
|
|
<div className="p-4 border-t border-gray-100 dark:border-gray-800 sm:p-6">
|
|
<div className="space-y-6">
|
|
{/* Default Dropdown */}
|
|
<div className="relative inline-block">
|
|
<button
|
|
onClick={() => setDropdown1(!dropdown1)}
|
|
className="dropdown-toggle inline-flex px-4 py-3 text-sm font-medium text-white rounded-lg bg-brand-500 shadow-theme-xs hover:bg-brand-600"
|
|
>
|
|
Dropdown Default
|
|
</button>
|
|
<Dropdown isOpen={dropdown1} onClose={() => setDropdown1(false)} className="w-48 p-2 mt-2">
|
|
<DropdownItem onItemClick={() => setDropdown1(false)} className="flex items-center gap-3 px-3 py-2 font-medium text-gray-700 rounded-lg text-theme-sm hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300">
|
|
Edit
|
|
</DropdownItem>
|
|
<DropdownItem onItemClick={() => setDropdown1(false)} className="flex items-center gap-3 px-3 py-2 font-medium text-gray-700 rounded-lg text-theme-sm hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300">
|
|
Delete
|
|
</DropdownItem>
|
|
</Dropdown>
|
|
</div>
|
|
|
|
{/* Dropdown with Divider */}
|
|
<div className="relative inline-block">
|
|
<button
|
|
onClick={() => setDropdown2(!dropdown2)}
|
|
className="dropdown-toggle inline-flex px-4 py-3 text-sm font-medium text-white rounded-lg bg-brand-500 shadow-theme-xs hover:bg-brand-600"
|
|
>
|
|
Dropdown with Divider
|
|
</button>
|
|
<Dropdown isOpen={dropdown2} onClose={() => setDropdown2(false)} className="w-48 p-2 mt-2">
|
|
<DropdownItem onItemClick={() => setDropdown2(false)} className="flex items-center gap-3 px-3 py-2 font-medium text-gray-700 rounded-lg text-theme-sm hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300">
|
|
Edit
|
|
</DropdownItem>
|
|
<DropdownItem onItemClick={() => setDropdown2(false)} className="flex items-center gap-3 px-3 py-2 font-medium text-gray-700 rounded-lg text-theme-sm hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300">
|
|
View
|
|
</DropdownItem>
|
|
<div className="my-2 border-t border-gray-200 dark:border-gray-800"></div>
|
|
<DropdownItem onItemClick={() => setDropdown2(false)} className="flex items-center gap-3 px-3 py-2 font-medium text-gray-700 rounded-lg text-theme-sm hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300">
|
|
Delete
|
|
</DropdownItem>
|
|
</Dropdown>
|
|
</div>
|
|
|
|
{/* Dropdown with Icon */}
|
|
<div className="relative inline-block">
|
|
<button
|
|
onClick={() => setDropdown3(!dropdown3)}
|
|
className="dropdown-toggle inline-flex px-4 py-3 text-sm font-medium text-white rounded-lg bg-brand-500 shadow-theme-xs hover:bg-brand-600"
|
|
>
|
|
Dropdown with Icon
|
|
</button>
|
|
<Dropdown isOpen={dropdown3} onClose={() => setDropdown3(false)} className="w-48 p-2 mt-2">
|
|
<DropdownItem onItemClick={() => setDropdown3(false)} className="flex items-center gap-3 px-3 py-2 font-medium text-gray-700 rounded-lg text-theme-sm hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300">
|
|
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
|
<path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z" />
|
|
</svg>
|
|
Edit
|
|
</DropdownItem>
|
|
<DropdownItem onItemClick={() => setDropdown3(false)} className="flex items-center gap-3 px-3 py-2 font-medium text-gray-700 rounded-lg text-theme-sm hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300">
|
|
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
|
|
</svg>
|
|
View
|
|
</DropdownItem>
|
|
<div className="my-2 border-t border-gray-200 dark:border-gray-800"></div>
|
|
<DropdownItem onItemClick={() => setDropdown3(false)} className="flex items-center gap-3 px-3 py-2 font-medium text-red-600 rounded-lg text-theme-sm hover:bg-red-50 hover:text-red-700 dark:text-red-400 dark:hover:bg-red-900/20 dark:hover:text-red-300">
|
|
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fillRule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clipRule="evenodd" />
|
|
</svg>
|
|
Delete
|
|
</DropdownItem>
|
|
</Dropdown>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Button Groups Showcase Component
|
|
function ButtonGroupsShowcase() {
|
|
return (
|
|
<div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
|
|
<div className="px-6 py-5">
|
|
<h3 className="text-base font-medium text-gray-800 dark:text-white/90">Button Groups</h3>
|
|
</div>
|
|
<div className="p-4 border-t border-gray-100 dark:border-gray-800 sm:p-6">
|
|
<div className="space-y-6">
|
|
{/* Default Button Group */}
|
|
<div className="inline-flex rounded-lg border border-gray-300 bg-white shadow-theme-xs dark:border-gray-700 dark:bg-gray-800">
|
|
<button className="px-4 py-2 text-sm font-medium text-gray-700 rounded-l-lg hover:bg-gray-50 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-white">
|
|
Left
|
|
</button>
|
|
<button className="px-4 py-2 text-sm font-medium text-gray-700 border-l border-r border-gray-300 hover:bg-gray-50 hover:text-gray-900 dark:text-gray-400 dark:border-gray-700 dark:hover:bg-white/5 dark:hover:text-white">
|
|
Center
|
|
</button>
|
|
<button className="px-4 py-2 text-sm font-medium text-gray-700 rounded-r-lg hover:bg-gray-50 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-white">
|
|
Right
|
|
</button>
|
|
</div>
|
|
|
|
{/* Icon Button Group */}
|
|
<div className="inline-flex rounded-lg border border-gray-300 bg-white shadow-theme-xs dark:border-gray-700 dark:bg-gray-800">
|
|
<button className="p-2 text-gray-700 rounded-l-lg hover:bg-gray-50 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-white">
|
|
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fillRule="evenodd" d="M3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clipRule="evenodd" />
|
|
</svg>
|
|
</button>
|
|
<button className="p-2 text-gray-700 border-l border-r border-gray-300 hover:bg-gray-50 hover:text-gray-900 dark:text-gray-400 dark:border-gray-700 dark:hover:bg-white/5 dark:hover:text-white">
|
|
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fillRule="evenodd" d="M10 3a1 1 0 011 1v12a1 1 0 11-2 0V4a1 1 0 011-1z" clipRule="evenodd" />
|
|
</svg>
|
|
</button>
|
|
<button className="p-2 text-gray-700 rounded-r-lg hover:bg-gray-50 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-white">
|
|
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fillRule="evenodd" d="M3 10a1 1 0 011 1h12a1 1 0 110-2H4a1 1 0 01-1-1z" clipRule="evenodd" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Ribbons Showcase Component
|
|
function RibbonsShowcase() {
|
|
return (
|
|
<div className="grid grid-cols-1 gap-5 lg:grid-cols-2">
|
|
{/* Rounded Ribbon */}
|
|
<div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
|
|
<div className="px-6 py-5">
|
|
<h3 className="text-base font-medium text-gray-800 dark:text-white/90">Rounded Ribbon</h3>
|
|
</div>
|
|
<div className="p-4 border-t border-gray-100 dark:border-gray-800 sm:p-6">
|
|
<div className="relative overflow-hidden rounded-xl border border-gray-200 dark:border-gray-800 dark:bg-white/[0.03]">
|
|
<span className="absolute -left-px mt-3 inline-block rounded-r-full bg-brand-500 px-4 py-1.5 text-sm font-medium text-white">Popular</span>
|
|
<div className="p-5 pt-16">
|
|
<p className="text-sm text-gray-500 dark:text-gray-400">Lorem ipsum dolor sit amet consectetur. Eget nulla suscipit arcu rutrum amet vel nec fringilla vulputate.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Filled Ribbon */}
|
|
<div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
|
|
<div className="px-6 py-5">
|
|
<h3 className="text-base font-medium text-gray-800 dark:text-white/90">Filled Ribbon</h3>
|
|
</div>
|
|
<div className="p-4 border-t border-gray-100 dark:border-gray-800 sm:p-6">
|
|
<div className="relative overflow-hidden rounded-xl border border-gray-200 dark:border-gray-800 dark:bg-white/[0.03]">
|
|
<span className="absolute -left-9 -top-7 mt-3 flex h-14 w-24 -rotate-45 items-end justify-center bg-brand-500 px-4 py-1.5 text-sm font-medium text-white shadow-theme-xs">New</span>
|
|
<div className="p-5 pt-16">
|
|
<p className="text-sm text-gray-500 dark:text-gray-400">Lorem ipsum dolor sit amet consectetur. Eget nulla suscipit arcu rutrum amet vel nec fringilla vulputate.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Spinners Showcase Component
|
|
function SpinnersShowcase() {
|
|
return (
|
|
<div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
|
|
<div className="px-6 py-5">
|
|
<h3 className="text-base font-medium text-gray-800 dark:text-white/90">Spinners</h3>
|
|
</div>
|
|
<div className="p-4 border-t border-gray-100 dark:border-gray-800 sm:p-6">
|
|
<div className="flex flex-wrap items-center gap-6">
|
|
{/* Default Spinner */}
|
|
<div className="inline-flex h-10 w-10 animate-spin items-center justify-center rounded-full border-4 border-gray-200 border-t-brand-500"></div>
|
|
|
|
{/* Small Spinner */}
|
|
<div className="inline-flex h-6 w-6 animate-spin items-center justify-center rounded-full border-2 border-gray-200 border-t-brand-500"></div>
|
|
|
|
{/* Large Spinner */}
|
|
<div className="inline-flex h-16 w-16 animate-spin items-center justify-center rounded-full border-4 border-gray-200 border-t-brand-500"></div>
|
|
|
|
{/* Colored Spinners */}
|
|
<div className="inline-flex h-10 w-10 animate-spin items-center justify-center rounded-full border-4 border-success-200 border-t-success-500"></div>
|
|
<div className="inline-flex h-10 w-10 animate-spin items-center justify-center rounded-full border-4 border-error-200 border-t-error-500"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Tabs Showcase Component
|
|
function TabsShowcase() {
|
|
return (
|
|
<div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
|
|
<div className="px-6 py-5">
|
|
<h3 className="text-base font-medium text-gray-800 dark:text-white/90">Tabs</h3>
|
|
</div>
|
|
<div className="p-4 border-t border-gray-100 dark:border-gray-800 sm:p-6">
|
|
<div className="space-y-6">
|
|
<ChartTab />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Tooltips Showcase Component
|
|
function TooltipsShowcase() {
|
|
return (
|
|
<div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
|
|
<div className="px-6 py-5">
|
|
<h3 className="text-base font-medium text-gray-800 dark:text-white/90">Tooltips</h3>
|
|
</div>
|
|
<div className="p-4 border-t border-gray-100 dark:border-gray-800 sm:p-6">
|
|
<div className="flex flex-wrap items-center gap-6">
|
|
<button
|
|
className="relative group inline-flex px-4 py-3 text-sm font-medium text-white rounded-lg bg-brand-500 shadow-theme-xs"
|
|
title="Tooltip Top"
|
|
>
|
|
Tooltip Top
|
|
<span className="absolute bottom-full left-1/2 mb-2 -translate-x-1/2 px-3 py-1.5 text-xs font-medium text-white bg-gray-900 rounded-lg opacity-0 pointer-events-none group-hover:opacity-100 transition-opacity whitespace-nowrap">
|
|
Tooltip Top
|
|
<span className="absolute top-full left-1/2 -translate-x-1/2 -mt-1 border-4 border-transparent border-t-gray-900"></span>
|
|
</span>
|
|
</button>
|
|
|
|
<button
|
|
className="relative group inline-flex px-4 py-3 text-sm font-medium text-white rounded-lg bg-brand-500 shadow-theme-xs"
|
|
title="Tooltip Right"
|
|
>
|
|
Tooltip Right
|
|
<span className="absolute left-full top-1/2 ml-2 -translate-y-1/2 px-3 py-1.5 text-xs font-medium text-white bg-gray-900 rounded-lg opacity-0 pointer-events-none group-hover:opacity-100 transition-opacity whitespace-nowrap">
|
|
Tooltip Right
|
|
<span className="absolute right-full top-1/2 -translate-y-1/2 -mr-1 border-4 border-transparent border-r-gray-900"></span>
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Pagination Showcase Component
|
|
function PaginationShowcase() {
|
|
const [page1, setPage1] = useState(1);
|
|
const [page2, setPage2] = useState(1);
|
|
const [page3, setPage3] = useState(1);
|
|
|
|
return (
|
|
<div className="space-y-5 sm:space-y-6">
|
|
{/* Pagination with Text */}
|
|
<div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
|
|
<div className="px-6 py-5">
|
|
<h3 className="text-base font-medium text-gray-800 dark:text-white/90">Pagination with Text</h3>
|
|
</div>
|
|
<div className="p-4 border-t border-gray-100 dark:border-gray-800 sm:p-6">
|
|
<Pagination currentPage={page1} totalPages={10} onPageChange={setPage1} variant="text" />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Pagination with Text and Icon */}
|
|
<div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
|
|
<div className="px-6 py-5">
|
|
<h3 className="text-base font-medium text-gray-800 dark:text-white/90">Pagination with Text and Icon</h3>
|
|
</div>
|
|
<div className="p-4 border-t border-gray-100 dark:border-gray-800 sm:p-6">
|
|
<Pagination currentPage={page2} totalPages={10} onPageChange={setPage2} variant="text-icon" />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Pagination with Icon */}
|
|
<div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
|
|
<div className="px-6 py-5">
|
|
<h3 className="text-base font-medium text-gray-800 dark:text-white/90">Pagination with Icon</h3>
|
|
</div>
|
|
<div className="p-4 border-t border-gray-100 dark:border-gray-800 sm:p-6">
|
|
<Pagination currentPage={page3} totalPages={10} onPageChange={setPage3} variant="icon" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Cards Showcase Component
|
|
function CardsShowcase() {
|
|
return (
|
|
<div className="grid grid-cols-1 gap-5 lg:grid-cols-2">
|
|
{/* Basic Card */}
|
|
<div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
|
|
<div className="px-6 py-5">
|
|
<h3 className="text-base font-medium text-gray-800 dark:text-white/90">Basic Card</h3>
|
|
</div>
|
|
<div className="p-4 border-t border-gray-100 dark:border-gray-800 sm:p-6">
|
|
<Card>
|
|
<CardTitle>Card Title</CardTitle>
|
|
<CardDescription>This is a basic card with title and description.</CardDescription>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Card with Icon */}
|
|
<div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
|
|
<div className="px-6 py-5">
|
|
<h3 className="text-base font-medium text-gray-800 dark:text-white/90">Card with Icon</h3>
|
|
</div>
|
|
<div className="p-4 border-t border-gray-100 dark:border-gray-800 sm:p-6">
|
|
<Card>
|
|
<CardIcon>
|
|
<svg className="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
|
|
<path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z" />
|
|
<path fillRule="evenodd" d="M4 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v11a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm3 4a1 1 0 000 2h.01a1 1 0 100-2H7zm3 0a1 1 0 000 2h3a1 1 0 100-2h-3zm-3 4a1 1 0 100 2h.01a1 1 0 100-2H7zm3 0a1 1 0 100 2h3a1 1 0 100-2h-3z" clipRule="evenodd" />
|
|
</svg>
|
|
</CardIcon>
|
|
<CardTitle>Card with Icon</CardTitle>
|
|
<CardDescription>This card includes an icon at the top.</CardDescription>
|
|
<CardAction>Learn More</CardAction>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|