mirror of
https://github.com/dyzulk/trustlab.git
synced 2026-01-26 21:41:52 +07:00
First commit
This commit is contained in:
dyzulk
53
src/components/example/ModalExample/DefaultModal.tsx
Normal file
53
src/components/example/ModalExample/DefaultModal.tsx
Normal file
@@ -0,0 +1,53 @@
|
||||
"use client";
|
||||
import React from "react";
|
||||
import ComponentCard from "../../common/ComponentCard";
|
||||
|
||||
import { Modal } from "../../ui/modal";
|
||||
import Button from "../../ui/button/Button";
|
||||
import { useModal } from "@/hooks/useModal";
|
||||
|
||||
export default function DefaultModal() {
|
||||
const { isOpen, openModal, closeModal } = useModal();
|
||||
const handleSave = () => {
|
||||
// Handle save logic here
|
||||
console.log("Saving changes...");
|
||||
closeModal();
|
||||
};
|
||||
return (
|
||||
<div>
|
||||
<ComponentCard title="Default Modal">
|
||||
<Button size="sm" onClick={openModal}>
|
||||
Open Modal
|
||||
</Button>
|
||||
<Modal
|
||||
isOpen={isOpen}
|
||||
onClose={closeModal}
|
||||
className="max-w-[600px] p-5 lg:p-10"
|
||||
>
|
||||
<h4 className="font-semibold text-gray-800 mb-7 text-title-sm dark:text-white/90">
|
||||
Modal Heading
|
||||
</h4>
|
||||
<p className="text-sm leading-6 text-gray-500 dark:text-gray-400">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
Pellentesque euismod est quis mauris lacinia pharetra. Sed a ligula
|
||||
ac odio condimentum aliquet a nec nulla. Aliquam bibendum ex sit
|
||||
amet ipsum rutrum feugiat ultrices enim quam.
|
||||
</p>
|
||||
<p className="mt-5 text-sm leading-6 text-gray-500 dark:text-gray-400">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
Pellentesque euismod est quis mauris lacinia pharetra. Sed a ligula
|
||||
ac odio.
|
||||
</p>
|
||||
<div className="flex items-center justify-end w-full gap-3 mt-8">
|
||||
<Button size="sm" variant="outline" onClick={closeModal}>
|
||||
Close
|
||||
</Button>
|
||||
<Button size="sm" onClick={handleSave}>
|
||||
Save Changes
|
||||
</Button>
|
||||
</div>
|
||||
</Modal>
|
||||
</ComponentCard>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
71
src/components/example/ModalExample/FormInModal.tsx
Normal file
71
src/components/example/ModalExample/FormInModal.tsx
Normal file
@@ -0,0 +1,71 @@
|
||||
"use client";
|
||||
import React from "react";
|
||||
import ComponentCard from "../../common/ComponentCard";
|
||||
import Button from "../../ui/button/Button";
|
||||
import { Modal } from "../../ui/modal";
|
||||
import Label from "../../form/Label";
|
||||
import Input from "../../form/input/InputField";
|
||||
import { useModal } from "@/hooks/useModal";
|
||||
|
||||
export default function FormInModal() {
|
||||
const { isOpen, openModal, closeModal } = useModal();
|
||||
const handleSave = () => {
|
||||
// Handle save logic here
|
||||
console.log("Saving changes...");
|
||||
closeModal();
|
||||
};
|
||||
return (
|
||||
<ComponentCard title="Form In Modal">
|
||||
<Button size="sm" onClick={openModal}>
|
||||
Open Modal
|
||||
</Button>
|
||||
<Modal
|
||||
isOpen={isOpen}
|
||||
onClose={closeModal}
|
||||
className="max-w-[584px] p-5 lg:p-10"
|
||||
>
|
||||
<form className="">
|
||||
<h4 className="mb-6 text-lg font-medium text-gray-800 dark:text-white/90">
|
||||
Personal Information
|
||||
</h4>
|
||||
|
||||
<div className="grid grid-cols-1 gap-x-6 gap-y-5 sm:grid-cols-2">
|
||||
<div className="col-span-1">
|
||||
<Label>First Name</Label>
|
||||
<Input type="text" placeholder="Emirhan" />
|
||||
</div>
|
||||
|
||||
<div className="col-span-1">
|
||||
<Label>Last Name</Label>
|
||||
<Input type="text" placeholder="Boruch" />
|
||||
</div>
|
||||
|
||||
<div className="col-span-1">
|
||||
<Label>Last Name</Label>
|
||||
<Input type="email" placeholder="emirhanboruch55@gmail.com" />
|
||||
</div>
|
||||
|
||||
<div className="col-span-1">
|
||||
<Label>Phone</Label>
|
||||
<Input type="text" placeholder="+09 363 398 46" />
|
||||
</div>
|
||||
|
||||
<div className="col-span-1 sm:col-span-2">
|
||||
<Label>Bio</Label>
|
||||
<Input type="text" placeholder="Team Manager" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-end w-full gap-3 mt-6">
|
||||
<Button size="sm" variant="outline" onClick={closeModal}>
|
||||
Close
|
||||
</Button>
|
||||
<Button size="sm" onClick={handleSave}>
|
||||
Save Changes
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</Modal>
|
||||
</ComponentCard>
|
||||
);
|
||||
}
|
||||
66
src/components/example/ModalExample/FullScreenModal.tsx
Normal file
66
src/components/example/ModalExample/FullScreenModal.tsx
Normal file
@@ -0,0 +1,66 @@
|
||||
"use client";
|
||||
import { useModal } from "@/hooks/useModal";
|
||||
import ComponentCard from "../../common/ComponentCard";
|
||||
|
||||
import Button from "../../ui/button/Button";
|
||||
import { Modal } from "../../ui/modal";
|
||||
|
||||
export default function FullScreenModal() {
|
||||
const {
|
||||
isOpen: isFullscreenModalOpen,
|
||||
openModal: openFullscreenModal,
|
||||
closeModal: closeFullscreenModal,
|
||||
} = useModal();
|
||||
const handleSave = () => {
|
||||
// Handle save logic here
|
||||
console.log("Saving changes...");
|
||||
closeFullscreenModal();
|
||||
};
|
||||
return (
|
||||
<ComponentCard title="Full Screen Modal">
|
||||
<Button size="sm" onClick={openFullscreenModal}>
|
||||
Open Modal
|
||||
</Button>
|
||||
<Modal
|
||||
isOpen={isFullscreenModalOpen}
|
||||
onClose={closeFullscreenModal}
|
||||
isFullscreen={true}
|
||||
showCloseButton={true}
|
||||
>
|
||||
<div className="fixed top-0 left-0 flex flex-col justify-between w-full h-screen p-6 overflow-x-hidden overflow-y-auto bg-white dark:bg-gray-900 lg:p-10">
|
||||
<div>
|
||||
<h4 className="font-semibold text-gray-800 mb-7 text-title-sm dark:text-white/90">
|
||||
Modal Heading
|
||||
</h4>
|
||||
<p className="text-sm leading-6 text-gray-500 dark:text-gray-400">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
Pellentesque euismod est quis mauris lacinia pharetra. Sed a
|
||||
ligula ac odio condimentum aliquet a nec nulla. Aliquam bibendum
|
||||
ex sit amet ipsum rutrum feugiat ultrices enim quam.
|
||||
</p>
|
||||
<p className="mt-5 text-sm leading-6 text-gray-500 dark:text-gray-400">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
Pellentesque euismod est quis mauris lacinia pharetra. Sed a
|
||||
ligula ac odio condimentum aliquet a nec nulla. Aliquam bibendum
|
||||
ex sit amet ipsum rutrum feugiat ultrices enim quam odio
|
||||
condimentum aliquet a nec nulla pellentesque euismod est quis
|
||||
mauris lacinia pharetra.
|
||||
</p>
|
||||
<p className="mt-5 text-sm leading-6 text-gray-500 dark:text-gray-400">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
Pellentesque euismod est quis mauris lacinia pharetra.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center justify-end w-full gap-3 mt-8">
|
||||
<Button size="sm" variant="outline" onClick={closeFullscreenModal}>
|
||||
Close
|
||||
</Button>
|
||||
<Button size="sm" onClick={handleSave}>
|
||||
Save Changes
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
</ComponentCard>
|
||||
);
|
||||
}
|
||||
282
src/components/example/ModalExample/ModalBasedAlerts.tsx
Normal file
282
src/components/example/ModalExample/ModalBasedAlerts.tsx
Normal file
@@ -0,0 +1,282 @@
|
||||
"use client";
|
||||
import React from "react";
|
||||
import ComponentCard from "../../common/ComponentCard";
|
||||
|
||||
import { Modal } from "../../ui/modal";
|
||||
import { useModal } from "@/hooks/useModal";
|
||||
|
||||
export default function ModalBasedAlerts() {
|
||||
const successModal = useModal();
|
||||
const infoModal = useModal();
|
||||
const warningModal = useModal();
|
||||
const errorModal = useModal();
|
||||
return (
|
||||
<ComponentCard title="Modal Based Alerts">
|
||||
<div className="flex flex-wrap items-center gap-3">
|
||||
<button
|
||||
onClick={successModal.openModal}
|
||||
className="px-4 py-3 text-sm font-medium text-white rounded-lg bg-success-500 shadow-theme-xs hover:bg-success-600"
|
||||
>
|
||||
Success Alert
|
||||
</button>
|
||||
<button
|
||||
onClick={infoModal.openModal}
|
||||
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"
|
||||
>
|
||||
Info Alert
|
||||
</button>
|
||||
<button
|
||||
onClick={warningModal.openModal}
|
||||
className="px-4 py-3 text-sm font-medium text-white rounded-lg bg-warning-500 shadow-theme-xs hover:bg-warning-600"
|
||||
>
|
||||
Warning Alert
|
||||
</button>
|
||||
<button
|
||||
onClick={errorModal.openModal}
|
||||
className="px-4 py-3 text-sm font-medium text-white rounded-lg bg-error-500 shadow-theme-xs hover:bg-error-600"
|
||||
>
|
||||
Danger Alert
|
||||
</button>
|
||||
</div>
|
||||
{/* Success Modal */}
|
||||
<Modal
|
||||
isOpen={successModal.isOpen}
|
||||
onClose={successModal.closeModal}
|
||||
className="max-w-[600px] p-5 lg:p-10"
|
||||
>
|
||||
<div className="text-center">
|
||||
<div className="relative flex items-center justify-center z-1 mb-7">
|
||||
<svg
|
||||
className="fill-success-50 dark:fill-success-500/15"
|
||||
width="90"
|
||||
height="90"
|
||||
viewBox="0 0 90 90"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M34.364 6.85053C38.6205 -2.28351 51.3795 -2.28351 55.636 6.85053C58.0129 11.951 63.5594 14.6722 68.9556 13.3853C78.6192 11.0807 86.5743 21.2433 82.2185 30.3287C79.7862 35.402 81.1561 41.5165 85.5082 45.0122C93.3019 51.2725 90.4628 63.9451 80.7747 66.1403C75.3648 67.3661 71.5265 72.2695 71.5572 77.9156C71.6123 88.0265 60.1169 93.6664 52.3918 87.3184C48.0781 83.7737 41.9219 83.7737 37.6082 87.3184C29.8831 93.6664 18.3877 88.0266 18.4428 77.9156C18.4735 72.2695 14.6352 67.3661 9.22531 66.1403C-0.462787 63.9451 -3.30193 51.2725 4.49185 45.0122C8.84391 41.5165 10.2138 35.402 7.78151 30.3287C3.42572 21.2433 11.3808 11.0807 21.0444 13.3853C26.4406 14.6722 31.9871 11.951 34.364 6.85053Z"
|
||||
fill=""
|
||||
fillOpacity=""
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<span className="absolute -translate-x-1/2 -translate-y-1/2 left-1/2 top-1/2">
|
||||
<svg
|
||||
className="fill-success-600 dark:fill-success-500"
|
||||
width="38"
|
||||
height="38"
|
||||
viewBox="0 0 38 38"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M5.9375 19.0004C5.9375 11.7854 11.7864 5.93652 19.0014 5.93652C26.2164 5.93652 32.0653 11.7854 32.0653 19.0004C32.0653 26.2154 26.2164 32.0643 19.0014 32.0643C11.7864 32.0643 5.9375 26.2154 5.9375 19.0004ZM19.0014 2.93652C10.1296 2.93652 2.9375 10.1286 2.9375 19.0004C2.9375 27.8723 10.1296 35.0643 19.0014 35.0643C27.8733 35.0643 35.0653 27.8723 35.0653 19.0004C35.0653 10.1286 27.8733 2.93652 19.0014 2.93652ZM24.7855 17.0575C25.3713 16.4717 25.3713 15.522 24.7855 14.9362C24.1997 14.3504 23.25 14.3504 22.6642 14.9362L17.7177 19.8827L15.3387 17.5037C14.7529 16.9179 13.8031 16.9179 13.2173 17.5037C12.6316 18.0894 12.6316 19.0392 13.2173 19.625L16.657 23.0647C16.9383 23.346 17.3199 23.504 17.7177 23.504C18.1155 23.504 18.4971 23.346 18.7784 23.0647L24.7855 17.0575Z"
|
||||
fill=""
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<h4 className="mb-2 text-2xl font-semibold text-gray-800 dark:text-white/90 sm:text-title-sm">
|
||||
Well Done!
|
||||
</h4>
|
||||
<p className="text-sm leading-6 text-gray-500 dark:text-gray-400">
|
||||
Lorem ipsum dolor sit amet consectetur. Feugiat ipsum libero tempor
|
||||
felis risus nisi non. Quisque eu ut tempor curabitur.
|
||||
</p>
|
||||
|
||||
<div className="flex items-center justify-center w-full gap-3 mt-7">
|
||||
<button
|
||||
type="button"
|
||||
className="flex justify-center w-full px-4 py-3 text-sm font-medium text-white rounded-lg bg-success-500 shadow-theme-xs hover:bg-success-600 sm:w-auto"
|
||||
>
|
||||
Okay, Got It
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
{/* Info Modal */}
|
||||
<Modal
|
||||
isOpen={infoModal.isOpen}
|
||||
onClose={infoModal.closeModal}
|
||||
className="max-w-[600px] p-5 lg:p-10"
|
||||
>
|
||||
<div className="text-center">
|
||||
<div className="relative flex items-center justify-center z-1 mb-7">
|
||||
<svg
|
||||
className="fill-blue-light-50 dark:fill-blue-light-500/15"
|
||||
width="90"
|
||||
height="90"
|
||||
viewBox="0 0 90 90"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M34.364 6.85053C38.6205 -2.28351 51.3795 -2.28351 55.636 6.85053C58.0129 11.951 63.5594 14.6722 68.9556 13.3853C78.6192 11.0807 86.5743 21.2433 82.2185 30.3287C79.7862 35.402 81.1561 41.5165 85.5082 45.0122C93.3019 51.2725 90.4628 63.9451 80.7747 66.1403C75.3648 67.3661 71.5265 72.2695 71.5572 77.9156C71.6123 88.0265 60.1169 93.6664 52.3918 87.3184C48.0781 83.7737 41.9219 83.7737 37.6082 87.3184C29.8831 93.6664 18.3877 88.0266 18.4428 77.9156C18.4735 72.2695 14.6352 67.3661 9.22531 66.1403C-0.462787 63.9451 -3.30193 51.2725 4.49185 45.0122C8.84391 41.5165 10.2138 35.402 7.78151 30.3287C3.42572 21.2433 11.3808 11.0807 21.0444 13.3853C26.4406 14.6722 31.9871 11.951 34.364 6.85053Z"
|
||||
fill=""
|
||||
fillOpacity=""
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<span className="absolute -translate-x-1/2 -translate-y-1/2 left-1/2 top-1/2">
|
||||
<svg
|
||||
className="fill-blue-light-500 dark:fill-blue-light-500"
|
||||
width="38"
|
||||
height="38"
|
||||
viewBox="0 0 38 38"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M5.85547 18.9998C5.85547 11.7396 11.7411 5.854 19.0013 5.854C26.2615 5.854 32.1471 11.7396 32.1471 18.9998C32.1471 26.2601 26.2615 32.1457 19.0013 32.1457C11.7411 32.1457 5.85547 26.2601 5.85547 18.9998ZM19.0013 2.854C10.0842 2.854 2.85547 10.0827 2.85547 18.9998C2.85547 27.9169 10.0842 35.1457 19.0013 35.1457C27.9184 35.1457 35.1471 27.9169 35.1471 18.9998C35.1471 10.0827 27.9184 2.854 19.0013 2.854ZM16.9999 11.9145C16.9999 13.0191 17.8953 13.9145 18.9999 13.9145H19.0015C20.106 13.9145 21.0015 13.0191 21.0015 11.9145C21.0015 10.81 20.106 9.91454 19.0015 9.91454H18.9999C17.8953 9.91454 16.9999 10.81 16.9999 11.9145ZM19.0014 27.8171C18.173 27.8171 17.5014 27.1455 17.5014 26.3171V17.3293C17.5014 16.5008 18.173 15.8293 19.0014 15.8293C19.8299 15.8293 20.5014 16.5008 20.5014 17.3293L20.5014 26.3171C20.5014 27.1455 19.8299 27.8171 19.0014 27.8171Z"
|
||||
fill=""
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<h4 className="mb-2 text-2xl font-semibold text-gray-800 dark:text-white/90 sm:text-title-sm">
|
||||
Information Alert!
|
||||
</h4>
|
||||
<p className="text-sm leading-6 text-gray-500 dark:text-gray-400">
|
||||
Lorem ipsum dolor sit amet consectetur. Feugiat ipsum libero tempor
|
||||
felis risus nisi non. Quisque eu ut tempor curabitur.
|
||||
</p>
|
||||
|
||||
<div className="flex items-center justify-center w-full gap-3 mt-7">
|
||||
<button
|
||||
type="button"
|
||||
className="flex justify-center w-full px-4 py-3 text-sm font-medium text-white rounded-lg bg-blue-light-500 shadow-theme-xs hover:bg-blue-light-600 sm:w-auto"
|
||||
>
|
||||
Okay, Got It
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
{/* Warning Modal */}
|
||||
<Modal
|
||||
isOpen={warningModal.isOpen}
|
||||
onClose={warningModal.closeModal}
|
||||
className="max-w-[600px] p-5 lg:p-10"
|
||||
>
|
||||
<div className="text-center">
|
||||
<div className="relative flex items-center justify-center z-1 mb-7">
|
||||
<svg
|
||||
className="fill-warning-50 dark:fill-warning-500/15"
|
||||
width="90"
|
||||
height="90"
|
||||
viewBox="0 0 90 90"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M34.364 6.85053C38.6205 -2.28351 51.3795 -2.28351 55.636 6.85053C58.0129 11.951 63.5594 14.6722 68.9556 13.3853C78.6192 11.0807 86.5743 21.2433 82.2185 30.3287C79.7862 35.402 81.1561 41.5165 85.5082 45.0122C93.3019 51.2725 90.4628 63.9451 80.7747 66.1403C75.3648 67.3661 71.5265 72.2695 71.5572 77.9156C71.6123 88.0265 60.1169 93.6664 52.3918 87.3184C48.0781 83.7737 41.9219 83.7737 37.6082 87.3184C29.8831 93.6664 18.3877 88.0266 18.4428 77.9156C18.4735 72.2695 14.6352 67.3661 9.22531 66.1403C-0.462787 63.9451 -3.30193 51.2725 4.49185 45.0122C8.84391 41.5165 10.2138 35.402 7.78151 30.3287C3.42572 21.2433 11.3808 11.0807 21.0444 13.3853C26.4406 14.6722 31.9871 11.951 34.364 6.85053Z"
|
||||
fill=""
|
||||
fillOpacity=""
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<span className="absolute -translate-x-1/2 -translate-y-1/2 left-1/2 top-1/2">
|
||||
<svg
|
||||
className="fill-warning-600 dark:fill-orange-400"
|
||||
width="38"
|
||||
height="38"
|
||||
viewBox="0 0 38 38"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M32.1445 19.0002C32.1445 26.2604 26.2589 32.146 18.9987 32.146C11.7385 32.146 5.85287 26.2604 5.85287 19.0002C5.85287 11.7399 11.7385 5.85433 18.9987 5.85433C26.2589 5.85433 32.1445 11.7399 32.1445 19.0002ZM18.9987 35.146C27.9158 35.146 35.1445 27.9173 35.1445 19.0002C35.1445 10.0831 27.9158 2.85433 18.9987 2.85433C10.0816 2.85433 2.85287 10.0831 2.85287 19.0002C2.85287 27.9173 10.0816 35.146 18.9987 35.146ZM21.0001 26.0855C21.0001 24.9809 20.1047 24.0855 19.0001 24.0855L18.9985 24.0855C17.894 24.0855 16.9985 24.9809 16.9985 26.0855C16.9985 27.19 17.894 28.0855 18.9985 28.0855L19.0001 28.0855C20.1047 28.0855 21.0001 27.19 21.0001 26.0855ZM18.9986 10.1829C19.827 10.1829 20.4986 10.8545 20.4986 11.6829L20.4986 20.6707C20.4986 21.4992 19.827 22.1707 18.9986 22.1707C18.1701 22.1707 17.4986 21.4992 17.4986 20.6707L17.4986 11.6829C17.4986 10.8545 18.1701 10.1829 18.9986 10.1829Z"
|
||||
fill=""
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<h4 className="mb-2 text-2xl font-semibold text-gray-800 dark:text-white/90 sm:text-title-sm">
|
||||
Warning Alert!
|
||||
</h4>
|
||||
<p className="text-sm leading-6 text-gray-500 dark:text-gray-400">
|
||||
Lorem ipsum dolor sit amet consectetur. Feugiat ipsum libero tempor
|
||||
felis risus nisi non. Quisque eu ut tempor curabitur.
|
||||
</p>
|
||||
|
||||
<div className="flex items-center justify-center w-full gap-3 mt-7">
|
||||
<button
|
||||
type="button"
|
||||
className="flex justify-center w-full px-4 py-3 text-sm font-medium text-white rounded-lg bg-warning-500 shadow-theme-xs hover:bg-warning-600 sm:w-auto"
|
||||
>
|
||||
Okay, Got It
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
{/* Error Modal */}
|
||||
<Modal
|
||||
isOpen={errorModal.isOpen}
|
||||
onClose={errorModal.closeModal}
|
||||
className="max-w-[600px] p-5 lg:p-10"
|
||||
>
|
||||
<div className="text-center">
|
||||
<div className="relative flex items-center justify-center z-1 mb-7">
|
||||
<svg
|
||||
className="fill-error-50 dark:fill-error-500/15"
|
||||
width="90"
|
||||
height="90"
|
||||
viewBox="0 0 90 90"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M34.364 6.85053C38.6205 -2.28351 51.3795 -2.28351 55.636 6.85053C58.0129 11.951 63.5594 14.6722 68.9556 13.3853C78.6192 11.0807 86.5743 21.2433 82.2185 30.3287C79.7862 35.402 81.1561 41.5165 85.5082 45.0122C93.3019 51.2725 90.4628 63.9451 80.7747 66.1403C75.3648 67.3661 71.5265 72.2695 71.5572 77.9156C71.6123 88.0265 60.1169 93.6664 52.3918 87.3184C48.0781 83.7737 41.9219 83.7737 37.6082 87.3184C29.8831 93.6664 18.3877 88.0266 18.4428 77.9156C18.4735 72.2695 14.6352 67.3661 9.22531 66.1403C-0.462787 63.9451 -3.30193 51.2725 4.49185 45.0122C8.84391 41.5165 10.2138 35.402 7.78151 30.3287C3.42572 21.2433 11.3808 11.0807 21.0444 13.3853C26.4406 14.6722 31.9871 11.951 34.364 6.85053Z"
|
||||
fill=""
|
||||
fillOpacity=""
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<span className="absolute -translate-x-1/2 -translate-y-1/2 left-1/2 top-1/2">
|
||||
<svg
|
||||
className="fill-error-600 dark:fill-error-500"
|
||||
width="38"
|
||||
height="38"
|
||||
viewBox="0 0 38 38"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M9.62684 11.7496C9.04105 11.1638 9.04105 10.2141 9.62684 9.6283C10.2126 9.04252 11.1624 9.04252 11.7482 9.6283L18.9985 16.8786L26.2485 9.62851C26.8343 9.04273 27.7841 9.04273 28.3699 9.62851C28.9556 10.2143 28.9556 11.164 28.3699 11.7498L21.1198 18.9999L28.3699 26.25C28.9556 26.8358 28.9556 27.7855 28.3699 28.3713C27.7841 28.9571 26.8343 28.9571 26.2485 28.3713L18.9985 21.1212L11.7482 28.3715C11.1624 28.9573 10.2126 28.9573 9.62684 28.3715C9.04105 27.7857 9.04105 26.836 9.62684 26.2502L16.8771 18.9999L9.62684 11.7496Z"
|
||||
fill=""
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<h4 className="mb-2 text-2xl font-semibold text-gray-800 dark:text-white/90 sm:text-title-sm">
|
||||
Danger Alert!
|
||||
</h4>
|
||||
<p className="text-sm leading-6 text-gray-500 dark:text-gray-400">
|
||||
Lorem ipsum dolor sit amet consectetur. Feugiat ipsum libero tempor
|
||||
felis risus nisi non. Quisque eu ut tempor curabitur.
|
||||
</p>
|
||||
|
||||
<div className="flex items-center justify-center w-full gap-3 mt-7">
|
||||
<button
|
||||
type="button"
|
||||
className="flex justify-center w-full px-4 py-3 text-sm font-medium text-white rounded-lg bg-error-500 shadow-theme-xs hover:bg-error-600 sm:w-auto"
|
||||
>
|
||||
Okay, Got It
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
</ComponentCard>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,47 @@
|
||||
"use client";
|
||||
import React from "react";
|
||||
import ComponentCard from "../../common/ComponentCard";
|
||||
import Button from "../../ui/button/Button";
|
||||
import { Modal } from "../../ui/modal";
|
||||
import { useModal } from "@/hooks/useModal";
|
||||
|
||||
export default function VerticallyCenteredModal() {
|
||||
const { isOpen, openModal, closeModal } = useModal();
|
||||
const handleSave = () => {
|
||||
// Handle save logic here
|
||||
console.log("Saving changes...");
|
||||
closeModal();
|
||||
};
|
||||
return (
|
||||
<ComponentCard title="Vertically Centered Modal">
|
||||
<Button size="sm" onClick={openModal}>
|
||||
Open Modal
|
||||
</Button>
|
||||
<Modal
|
||||
isOpen={isOpen}
|
||||
onClose={closeModal}
|
||||
showCloseButton={false}
|
||||
className="max-w-[507px] p-6 lg:p-10"
|
||||
>
|
||||
<div className="text-center">
|
||||
<h4 className="mb-2 text-2xl font-semibold text-gray-800 dark:text-white/90 sm:text-title-sm">
|
||||
All Done! Success Confirmed
|
||||
</h4>
|
||||
<p className="text-sm leading-6 text-gray-500 dark:text-gray-400">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
Pellentesque euismod est quis mauris lacinia pharetra.
|
||||
</p>
|
||||
|
||||
<div className="flex items-center justify-center w-full gap-3 mt-8">
|
||||
<Button size="sm" variant="outline" onClick={closeModal}>
|
||||
Close
|
||||
</Button>
|
||||
<Button size="sm" onClick={handleSave}>
|
||||
Save Changes
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
</ComponentCard>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user