Atul/PatientProTokenRepository
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

removed unwanted files, improved dashboard darkmode

Browse Source
This commit is contained in:
ATUL GUNJAL 2025-04-24 17:01:20 +05:30
parent 00b51f3b48
commit 6101f34bdc
20 changed files with 4 additions and 1294 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

92
src/app/components/partials/alert/alert-error.js
View File

@ -1,92 +0,0 @@
'use client';
export default function SuccessMessage() {
return (
<>
{/* First Message with Link */}
<div
className="rounded-xl border p-4"
style={{
borderColor: '#f04438',
backgroundColor: '#fef3f2',
}}
>
<div className="flex items-start gap-3">
<div className="-mt-0.5" style={{ color: '#3b82f6' }}>
<svg
className="fill-current"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M3.6501 11.9996C3.6501 7.38803 7.38852 3.64961 12.0001 3.64961C16.6117 3.64961 20.3501 7.38803 20.3501 11.9996C20.3501 16.6112 16.6117 20.3496 12.0001 20.3496C7.38852 20.3496 3.6501 16.6112 3.6501 11.9996ZM12.0001 1.84961C6.39441 1.84961 1.8501 6.39392 1.8501 11.9996C1.8501 17.6053 6.39441 22.1496 12.0001 22.1496C17.6058 22.1496 22.1501 17.6053 22.1501 11.9996C22.1501 6.39392 17.6058 1.84961 12.0001 1.84961ZM10.9992 7.52468C10.9992 8.07697 11.4469 8.52468 11.9992 8.52468H12.0002C12.5525 8.52468 13.0002 8.07697 13.0002 7.52468C13.0002 6.9724 12.5525 6.52468 12.0002 6.52468H11.9992C11.4469 6.52468 10.9992 6.9724 10.9992 7.52468ZM12.0002 17.371C11.586 17.371 11.2502 17.0352 11.2502 16.621V10.9445C11.2502 10.5303 11.586 10.1945 12.0002 10.1945C12.4144 10.1945 12.7502 10.5303 12.7502 10.9445V16.621C12.7502 17.0352 12.4144 17.371 12.0002 17.371Z"
fill="currentColor"
/>
</svg>
</div>
<div>
<h4 className="mb-1 text-sm font-semibold text-gray-800 dark:text-white/90">
Success Message
</h4>
<p className="text-sm text-gray-500 dark:text-gray-400">
You can insert a description for the message here. The text relates
to the action that has been performed.
</p>
<a
href="#"
className="mt-3 inline-block text-sm font-medium underline"
style={{ color: '#f87171' }} // optional: changed to a more visible red
>
Learn more
</a>
</div>
</div>
</div>
{/* Second Message without Link */}
<div
className="rounded-xl border p-4 mt-4"
style={{
borderColor: '#f04438',
backgroundColor: '#fef3f2',
}}
>
<div className="flex items-start gap-3">
<div className="-mt-0.5" style={{ color: '#3b82f6' }}>
<svg
className="fill-current"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M3.6501 11.9996C3.6501 7.38803 7.38852 3.64961 12.0001 3.64961C16.6117 3.64961 20.3501 7.38803 20.3501 11.9996C20.3501 16.6112 16.6117 20.3496 12.0001 20.3496C7.38852 20.3496 3.6501 16.6112 3.6501 11.9996ZM12.0001 1.84961C6.39441 1.84961 1.8501 6.39392 1.8501 11.9996C1.8501 17.6053 6.39441 22.1496 12.0001 22.1496C17.6058 22.1496 22.1501 17.6053 22.1501 11.9996C22.1501 6.39392 17.6058 1.84961 12.0001 1.84961ZM10.9992 7.52468C10.9992 8.07697 11.4469 8.52468 11.9992 8.52468H12.0002C12.5525 8.52468 13.0002 8.07697 13.0002 7.52468C13.0002 6.9724 12.5525 6.52468 12.0002 6.52468H11.9992C11.4469 6.52468 10.9992 6.9724 10.9992 7.52468ZM12.0002 17.371C11.586 17.371 11.2502 17.0352 11.2502 16.621V10.9445C11.2502 10.5303 11.586 10.1945 12.0002 10.1945C12.4144 10.1945 12.7502 10.5303 12.7502 10.9445V16.621C12.7502 17.0352 12.4144 17.371 12.0002 17.371Z"
fill="currentColor"
/>
</svg>
</div>
<div>
<h4 className="mb-1 text-sm font-semibold text-gray-800 dark:text-white/90">
Success Message
</h4>
<p className="text-sm text-gray-500 dark:text-gray-400">
You can insert a description for the message here. The text relates
to the action that has been performed.
</p>
</div>
</div>
</div>
</>
);
}

84
src/app/components/partials/alert/alert-info.js
View File

@ -1,84 +0,0 @@
import React from 'react';
const AlertInfo = () => {
return (
<div className="space-y-4 p-4">
{/* First Alert with Learn More link */}
<div className="rounded-xl border border-[#36bffa] bg-[#f0f9ff] p-4 dark:border-[#36bffa]/30 dark:bg-[#36bffa]/15">
<div className="flex items-start gap-3">
<div className="-mt-0.5 text-[#36bffa]">
<svg
className="fill-current"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M3.6501 11.9996C3.6501 7.38803 7.38852 3.64961 12.0001 3.64961C16.6117 3.64961 20.3501 7.38803 20.3501 11.9996C20.3501 16.6112 16.6117 20.3496 12.0001 20.3496C7.38852 20.3496 3.6501 16.6112 3.6501 11.9996ZM12.0001 1.84961C6.39441 1.84961 1.8501 6.39392 1.8501 11.9996C1.8501 17.6053 6.39441 22.1496 12.0001 22.1496C17.6058 22.1496 22.1501 17.6053 22.1501 11.9996C22.1501 6.39392 17.6058 1.84961 12.0001 1.84961ZM10.9992 7.52468C10.9992 8.07697 11.4469 8.52468 11.9992 8.52468H12.0002C12.5525 8.52468 13.0002 8.07697 13.0002 7.52468C13.0002 6.9724 12.5525 6.52468 12.0002 6.52468H11.9992C11.4469 6.52468 10.9992 6.9724 10.9992 7.52468ZM12.0002 17.371C11.586 17.371 11.2502 17.0352 11.2502 16.621V10.9445C11.2502 10.5303 11.586 10.1945 12.0002 10.1945C12.4144 10.1945 12.7502 10.5303 12.7502 10.9445V16.621C12.7502 17.0352 12.4144 17.371 12.0002 17.371Z"
fill="currentColor"
/>
</svg>
</div>
<div>
<h4 className="mb-1 text-sm font-semibold text-[#1d2939] dark:text-white/90">
Success Message
</h4>
<p className="text-sm text-[#667085] dark:text-[#98a2b3]">
You can insert a description for the message here.The text relates to
the action that has been performed.
</p>
<a
href="#"
className="mt-3 inline-block text-sm font-medium text-[#667085] underline dark:text-[#98a2b3]"
>
Learn more
</a>
</div>
</div>
</div>
{/* Second Alert without Learn More link */}
<div className="rounded-xl border border-[#36bffa] bg-[#f0f9ff] p-4 dark:border-[#36bffa]/30 dark:bg-[#36bffa]/15">
<div className="flex items-start gap-3">
<div className="-mt-0.5 text-[#36bffa]">
<svg
className="fill-current"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M3.6501 11.9996C3.6501 7.38803 7.38852 3.64961 12.0001 3.64961C16.6117 3.64961 20.3501 7.38803 20.3501 11.9996C20.3501 16.6112 16.6117 20.3496 12.0001 20.3496C7.38852 20.3496 3.6501 16.6112 3.6501 11.9996ZM12.0001 1.84961C6.39441 1.84961 1.8501 6.39392 1.8501 11.9996C1.8501 17.6053 6.39441 22.1496 12.0001 22.1496C17.6058 22.1496 22.1501 17.6053 22.1501 11.9996C22.1501 6.39392 17.6058 1.84961 12.0001 1.84961ZM10.9992 7.52468C10.9992 8.07697 11.4469 8.52468 11.9992 8.52468H12.0002C12.5525 8.52468 13.0002 8.07697 13.0002 7.52468C13.0002 6.9724 12.5525 6.52468 12.0002 6.52468H11.9992C11.4469 6.52468 10.9992 6.9724 10.9992 7.52468ZM12.0002 17.371C11.586 17.371 11.2502 17.0352 11.2502 16.621V10.9445C11.2502 10.5303 11.586 10.1945 12.0002 10.1945C12.4144 10.1945 12.7502 10.5303 12.7502 10.9445V16.621C12.7502 17.0352 12.4144 17.371 12.0002 17.371Z"
fill="currentColor"
/>
</svg>
</div>
<div>
<h4 className="mb-1 text-sm font-semibold text-[#1d2939] dark:text-white/90">
Success Message
</h4>
<p className="text-sm text-[#667085] dark:text-[#98a2b3]">
You can insert a description for the message here.The text relates to
the action that has been performed.
</p>
</div>
</div>
</div>
</div>
);
};
export default AlertInfo;

78
src/app/components/partials/alert/alert-success.js
View File

@ -1,78 +0,0 @@
// app/alert-success/page.js
export default function AlertSuccessPage() {
return (
<div className="space-y-6 p-6">
{/* Alert 1 */}
<div className="rounded-xl border border-[#12B76A] bg-[#ECFDF3] p-4 dark:border-[#12B76A]/30 dark:bg-[#12B76A]/15">
<div className="flex items-start gap-3">
<div className="-mt-0.5 text-[#12B76A]">
<svg
className="fill-current"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M3.70186 12.0001C3.70186 7.41711 7.41711 3.70186 12.0001 3.70186C16.5831 3.70186 20.2984 7.41711 20.2984 12.0001C20.2984 16.5831 16.5831 20.2984 12.0001 20.2984C7.41711 20.2984 3.70186 16.5831 3.70186 12.0001ZM12.0001 1.90186C6.423 1.90186 1.90186 6.423 1.90186 12.0001C1.90186 17.5772 6.423 22.0984 12.0001 22.0984C17.5772 22.0984 22.0984 17.5772 22.0984 12.0001C22.0984 6.423 17.5772 1.90186 12.0001 1.90186ZM15.6197 10.7395C15.9712 10.388 15.9712 9.81819 15.6197 9.46672C15.2683 9.11525 14.6984 9.11525 14.347 9.46672L11.1894 12.6243L9.6533 11.0883C9.30183 10.7368 8.73198 10.7368 8.38051 11.0883C8.02904 11.4397 8.02904 12.0096 8.38051 12.3611L10.553 14.5335C10.7217 14.7023 10.9507 14.7971 11.1894 14.7971C11.428 14.7971 11.657 14.7023 11.8257 14.5335L15.6197 10.7395Z"
fill="#12B76A"
/>
</svg>
</div>
<div>
<h4 className="mb-1 text-sm font-semibold text-[#1D2939] dark:text-[#FFFFFF]/90">
Success Message
</h4>
<p className="text-sm text-[#667085] dark:text-[#98A2B3]">
You can insert a description for the message here. The text relates to
the action that has been performed.
</p>
<a
href="#"
className="mt-3 inline-block text-sm font-medium text-[#667085] underline dark:text-[#98A2B3]"
>
Learn more
</a>
</div>
</div>
</div>
{/* Alert 2 (without link) */}
<div className="rounded-xl border border-[#12B76A] bg-[#ECFDF3] p-4 dark:border-[#12B76A]/30 dark:bg-[#12B76A]/15">
<div className="flex items-start gap-3">
<div className="-mt-0.5 text-[#12B76A]">
<svg
className="fill-current"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M3.70186 12.0001C3.70186 7.41711 7.41711 3.70186 12.0001 3.70186C16.5831 3.70186 20.2984 7.41711 20.2984 12.0001C20.2984 16.5831 16.5831 20.2984 12.0001 20.2984C7.41711 20.2984 3.70186 16.5831 3.70186 12.0001ZM12.0001 1.90186C6.423 1.90186 1.90186 6.423 1.90186 12.0001C1.90186 17.5772 6.423 22.0984 12.0001 22.0984C17.5772 22.0984 22.0984 17.5772 22.0984 12.0001C22.0984 6.423 17.5772 1.90186 12.0001 1.90186ZM15.6197 10.7395C15.9712 10.388 15.9712 9.81819 15.6197 9.46672C15.2683 9.11525 14.6984 9.11525 14.347 9.46672L11.1894 12.6243L9.6533 11.0883C9.30183 10.7368 8.73198 10.7368 8.38051 11.0883C8.02904 11.4397 8.02904 12.0096 8.38051 12.3611L10.553 14.5335C10.7217 14.7023 10.9507 14.7971 11.1894 14.7971C11.428 14.7971 11.657 14.7023 11.8257 14.5335L15.6197 10.7395Z"
fill="#12B76A"
/>
</svg>
</div>
<div>
<h4 className="mb-1 text-sm font-semibold text-[#1D2939] dark:text-[#FFFFFF]/90">
Success Message
</h4>
<p className="text-sm text-[#667085] dark:text-[#98A2B3]">
You can insert a description for the message here. The text relates to
the action that has been performed.
</p>
</div>
</div>
</div>
</div>
);
}

79
src/app/components/partials/alert/alert-warning.js
View File

@ -1,79 +0,0 @@
"use client";
export default function AlertWarning() {
return (
<div className="space-y-4 p-6">
{/* Alert 1 */}
<div className="rounded-xl border border-[#F79009] bg-[#FFFAEB] p-4 dark:border-[#F79009]/30 dark:bg-[#F79009]/15">
<div className="flex items-start gap-3">
<div className="-mt-0.5 text-[#F79009] dark:text-[#FDB022]">
<svg
className="fill-current"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M3.6501 12.0001C3.6501 7.38852 7.38852 3.6501 12.0001 3.6501C16.6117 3.6501 20.3501 7.38852 20.3501 12.0001C20.3501 16.6117 16.6117 20.3501 12.0001 20.3501C7.38852 20.3501 3.6501 16.6117 3.6501 12.0001ZM12.0001 1.8501C6.39441 1.8501 1.8501 6.39441 1.8501 12.0001C1.8501 17.6058 6.39441 22.1501 12.0001 22.1501C17.6058 22.1501 22.1501 17.6058 22.1501 12.0001C22.1501 6.39441 17.6058 1.8501 12.0001 1.8501ZM10.9992 7.52517C10.9992 8.07746 11.4469 8.52517 11.9992 8.52517H12.0002C12.5525 8.52517 13.0002 8.07746 13.0002 7.52517C13.0002 6.97289 12.5525 6.52517 12.0002 6.52517H11.9992C11.4469 6.52517 10.9992 6.97289 10.9992 7.52517ZM12.0002 17.3715C11.586 17.3715 11.2502 17.0357 11.2502 16.6215V10.945C11.2502 10.5308 11.586 10.195 12.0002 10.195C12.4144 10.195 12.7502 10.5308 12.7502 10.945V16.6215C12.7502 17.0357 12.4144 17.3715 12.0002 17.3715Z"
fill="#F79009"
/>
</svg>
</div>
<div>
<h4 className="mb-1 text-sm font-semibold text-[#1D2939] dark:text-[#FFFFFF]/90">
Warning Message
</h4>
<p className="text-sm text-[#667085] dark:text-[#98A2B3]">
You can insert a description for the message here. The text
relates to the action that has been performed.
</p>
<a
href="#"
className="mt-3 inline-block text-sm font-medium text-[#667085] underline dark:text-[#98A2B3]"
>
Learn more
</a>
</div>
</div>
</div>
{/* Alert 2 */}
<div className="rounded-xl border border-[#F79009] bg-[#FFFAEB] p-4 dark:border-[#F79009]/30 dark:bg-[#F79009]/15">
<div className="flex items-start gap-3">
<div className="-mt-0.5 text-[#F79009] dark:text-[#FDB022]">
<svg
className="fill-current"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M3.6501 12.0001C3.6501 7.38852 7.38852 3.6501 12.0001 3.6501C16.6117 3.6501 20.3501 7.38852 20.3501 12.0001C20.3501 16.6117 16.6117 20.3501 12.0001 20.3501C7.38852 20.3501 3.6501 16.6117 3.6501 12.0001ZM12.0001 1.8501C6.39441 1.8501 1.8501 6.39441 1.8501 12.0001C1.8501 17.6058 6.39441 22.1501 12.0001 22.1501C17.6058 22.1501 22.1501 17.6058 22.1501 12.0001C22.1501 6.39441 17.6058 1.8501 12.0001 1.8501ZM10.9992 7.52517C10.9992 8.07746 11.4469 8.52517 11.9992 8.52517H12.0002C12.5525 8.52517 13.0002 8.07746 13.0002 7.52517C13.0002 6.97289 12.5525 6.52517 12.0002 6.52517H11.9992C11.4469 6.52517 10.9992 6.97289 10.9992 7.52517ZM12.0002 17.3715C11.586 17.3715 11.2502 17.0357 11.2502 16.6215V10.945C11.2502 10.5308 11.586 10.195 12.0002 10.195C12.4144 10.195 12.7502 10.5308 12.7502 10.945V16.6215C12.7502 17.0357 12.4144 17.3715 12.0002 17.3715Z"
fill="#F79009"
/>
</svg>
</div>
<div>
<h4 className="mb-1 text-sm font-semibold text-[#1D2939] dark:text-[#FFFFFF]/90">
Warning Message
</h4>
<p className="text-sm text-[#667085] dark:text-[#98A2B3]">
You can insert a description for the message here. The text
relates to the action that has been performed.
</p>
</div>
</div>
</div>
</div>
);
}

32
src/app/components/partials/avatar/avatar01.js
View File

@ -1,32 +0,0 @@
// components/partials/avatar/Avatar01.tsx
import React from 'react';
import Image from 'next/image';
const Avatar01 = () => {
const sizes = [
{ container: 'h-6 w-6', max: 'max-w-6' },
{ container: 'h-8 w-8', max: 'max-w-8' },
{ container: 'h-10 w-10', max: 'max-w-10' },
{ container: 'h-12 w-12', max: 'max-w-12' },
{ container: 'h-14 w-14', max: 'max-w-14' },
{ container: 'h-16 w-16', max: 'max-w-16' },
];
return (
<div className="flex flex-col items-center justify-center gap-5 sm:flex-row">
{sizes.map((size, index) => (
<div key={index} className={`relative ${size.container} ${size.max} rounded-full`}>
<Image
src="/images/user/user-01.jpg"
alt="user"
width={parseInt(size.container.split('-')[1]) * 4} // Convert to pixels
height={parseInt(size.container.split('-')[1]) * 4}
className="overflow-hidden rounded-full"
/>
</div>
))}
</div>
);
};
export default Avatar01;

35
src/app/components/partials/avatar/avatar02.js
View File

@ -1,35 +0,0 @@
// components/partials/avatar/Avatar02.tsx
import React from 'react';
import Image from 'next/image';
const Avatar02 = () => {
const sizes = [
{ container: 'h-6 w-6', indicator: 'h-1.5 w-1.5' },
{ container: 'h-8 w-8', indicator: 'h-2 w-2' },
{ container: 'h-10 w-10', indicator: 'h-2.5 w-2.5' },
{ container: 'h-12 w-12', indicator: 'h-3 w-3' },
{ container: 'h-14 w-14', indicator: 'h-3.5 w-3.5' },
{ container: 'h-16 w-16', indicator: 'h-4 w-4' },
];
return (
<div className="flex flex-col items-center justify-center gap-5 sm:flex-row">
{sizes.map((size, index) => (
<div key={index} className={`relative ${size.container} rounded-full`}>
<Image
src="/images/user/user-01.jpg"
alt="user"
width={parseInt(size.container.split('-')[1]) * 4} // Convert tailwind size to pixels
height={parseInt(size.container.split('-')[1]) * 4}
className="overflow-hidden rounded-full"
/>
<span
className={`absolute bottom-0 right-0 ${size.indicator} rounded-full border-[1.5px] border-white bg-[#12b76a] dark:border-gray-900`}
></span>
</div>
))}
</div>
);
};
export default Avatar02;

35
src/app/components/partials/avatar/avatar03.js
View File

@ -1,35 +0,0 @@
// components/partials/avatar/Avatar03.tsx
import React from 'react';
import Image from 'next/image';
const Avatar03 = () => {
const sizes = [
{ container: 'h-6 w-6', indicator: 'h-1.5 w-1.5' },
{ container: 'h-8 w-8', indicator: 'h-2 w-2' },
{ container: 'h-10 w-10', indicator: 'h-2.5 w-2.5' },
{ container: 'h-12 w-12', indicator: 'h-3 w-3' },
{ container: 'h-14 w-14', indicator: 'h-3.5 w-3.5' },
{ container: 'h-16 w-16', indicator: 'h-4 w-4' },
];
return (
<div className="flex flex-col items-center justify-center gap-5 sm:flex-row">
{sizes.map((size, index) => (
<div key={index} className={`relative ${size.container} rounded-full`}>
<Image
src="/images/user/user-01.jpg"
alt="user"
width={parseInt(size.container.split('-')[1]) * 4}
height={parseInt(size.container.split('-')[1]) * 4}
className="overflow-hidden rounded-full"
/>
<span
className={`absolute bottom-0 right-0 ${size.indicator} rounded-full border-[1.5px] border-white bg-[#f04438] dark:border-gray-900`}
></span>
</div>
))}
</div>
);
};
export default Avatar03;

35
src/app/components/partials/avatar/avatar04.js
View File

@ -1,35 +0,0 @@
// components/partials/avatar/Avatar04.tsx
import React from 'react';
import Image from 'next/image';
const Avatar04 = () => {
const sizes = [
{ container: 'h-6 w-6', indicator: 'h-1.5 w-1.5' },
{ container: 'h-8 w-8', indicator: 'h-2 w-2' },
{ container: 'h-10 w-10', indicator: 'h-2.5 w-2.5' },
{ container: 'h-12 w-12', indicator: 'h-3 w-3' },
{ container: 'h-14 w-14', indicator: 'h-3.5 w-3.5' },
{ container: 'h-16 w-16', indicator: 'h-4 w-4' },
];
return (
<div className="flex flex-col items-center justify-center gap-5 sm:flex-row">
{sizes.map((size, index) => (
<div key={index} className={`relative ${size.container} rounded-full`}>
<Image
src="/images/user/user-01.jpg"
alt="user"
width={parseInt(size.container.split('-')[1]) * 4}
height={parseInt(size.container.split('-')[1]) * 4}
className="overflow-hidden rounded-full"
/>
<span
className={`absolute bottom-0 right-0 ${size.indicator} rounded-full border-[1.5px] border-white bg-[#f79009] dark:border-gray-900`}
></span>
</div>
))}
</div>
);
};
export default Avatar04;

45
src/app/components/partials/badge/Badge01.js
View File

@ -1,45 +0,0 @@
// components/partials/badge/Badge01.tsx
import React from 'react';
const Badge01 = () => {
return (
<div className="flex flex-wrap gap-4 sm:items-center sm:justify-center">
{/* Primary Badge */}
<span className="inline-flex items-center justify-center gap-1 rounded-full bg-[#ecf3ff] px-2.5 py-0.5 text-sm font-medium text-[#465fff] dark:bg-[#465fff]/15 dark:text-[#3641f5]">
Primary
</span>
{/* Success Badge */}
<span className="inline-flex items-center justify-center gap-1 rounded-full bg-[#ecfdf3] px-2.5 py-0.5 text-sm font-medium text-[#12b76a] dark:bg-[#12b76a]/15 dark:text-[#039855]">
Success
</span>
{/* Error Badge */}
<span className="inline-flex items-center justify-center gap-1 rounded-full bg-[#fef3f2] px-2.5 py-0.5 text-sm font-medium text-[#f04438] dark:bg-[#f04438]/15 dark:text-[#d92d20]">
Error
</span>
{/* Warning Badge */}
<span className="inline-flex items-center justify-center gap-1 rounded-full bg-[#fffaeb] px-2.5 py-0.5 text-sm font-medium text-[#f79009] dark:bg-[#f79009]/15 dark:text-[#fd853a]">
Warning
</span>
{/* Info Badge */}
<span className="inline-flex items-center justify-center gap-1 rounded-full bg-[#f0f9ff] px-2.5 py-0.5 text-sm font-medium text-[#0ba5ec] dark:bg-[#0ba5ec]/15 dark:text-[#0086c9]">
Info
</span>
{/* Light Badge */}
<span className="inline-flex items-center justify-center gap-1 rounded-full bg-[#f2f4f7] px-2.5 py-0.5 text-sm font-medium text-[#475467] dark:bg-white/5 dark:text-white/80">
Light
</span>
{/* Dark Badge */}
<span className="inline-flex items-center justify-center gap-1 rounded-full bg-[#667085] px-2.5 py-0.5 text-sm font-medium text-white dark:bg-white/5 dark:text-white">
Dark
</span>
</div>
);
};
export default Badge01;

45
src/app/components/partials/badge/Badge02.js
View File

@ -1,45 +0,0 @@
// components/partials/badge/Badge02.tsx
import React from 'react';
const Badge02 = () => {
return (
<div className="flex flex-wrap gap-4 sm:items-center sm:justify-center">
{/* Primary Badge */}
<span className="inline-flex items-center justify-center gap-1 rounded-full bg-[#465fff] px-2.5 py-0.5 text-sm font-medium text-white">
Primary
</span>
{/* Success Badge */}
<span className="inline-flex items-center justify-center gap-1 rounded-full bg-[#12b76a] px-2.5 py-0.5 text-sm font-medium text-white">
Success
</span>
{/* Error Badge */}
<span className="inline-flex items-center justify-center gap-1 rounded-full bg-[#f04438] px-2.5 py-0.5 text-sm font-medium text-white">
Error
</span>
{/* Warning Badge */}
<span className="inline-flex items-center justify-center gap-1 rounded-full bg-[#f79009] px-2.5 py-0.5 text-sm font-medium text-white">
Warning
</span>
{/* Info Badge */}
<span className="inline-flex items-center justify-center gap-1 rounded-full bg-[#0ba5ec] px-2.5 py-0.5 text-sm font-medium text-white">
Info
</span>
{/* Light Badge */}
<span className="inline-flex items-center justify-center gap-1 rounded-full bg-[#98a2b3] px-2.5 py-0.5 text-sm font-medium text-white dark:bg-white/5 dark:text-white/80">
Light
</span>
{/* Dark Badge */}
<span className="inline-flex items-center justify-center gap-1 rounded-full bg-[#1d2939] px-2.5 py-0.5 text-sm font-medium text-white dark:bg-white/15 dark:text-white">
Dark
</span>
</div>
);
};
export default Badge02;

69
src/app/components/partials/badge/Badge03.js
View File

@ -1,69 +0,0 @@
// components/partials/badge/Badge03.tsx
import React from 'react';
const PlusIcon = () => (
<svg
className="fill-current"
width="12"
height="12"
viewBox="0 0 12 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M5.25012 3C5.25012 2.58579 5.58591 2.25 6.00012 2.25C6.41433 2.25 6.75012 2.58579 6.75012 3V5.25012L9.00034 5.25012C9.41455 5.25012 9.75034 5.58591 9.75034 6.00012C9.75034 6.41433 9.41455 6.75012 9.00034 6.75012H6.75012V9.00034C6.75012 9.41455 6.41433 9.75034 6.00012 9.75034C5.58591 9.75034 5.25012 9.41455 5.25012 9.00034L5.25012 6.75012H3C2.58579 6.75012 2.25 6.41433 2.25 6.00012C2.25 5.58591 2.58579 5.25012 3 5.25012H5.25012V3Z"
/>
</svg>
);
const Badge03 = () => {
return (
<div className="flex flex-wrap gap-4 sm:items-center sm:justify-center">
{/* Primary Badge */}
<span className="inline-flex items-center justify-center gap-1 rounded-full bg-[#ecf3ff] py-0.5 pl-2 pr-2.5 text-sm font-medium text-[#465fff] dark:bg-[#465fff]/15 dark:text-[#3641f5]">
<PlusIcon />
Primary
</span>
{/* Success Badge */}
<span className="inline-flex items-center justify-center gap-1 rounded-full bg-[#ecfdf3] py-0.5 pl-2 pr-2.5 text-sm font-medium text-[#12b76a] dark:bg-[#12b76a]/15 dark:text-[#039855]">
<PlusIcon />
Success
</span>
{/* Error Badge */}
<span className="inline-flex items-center justify-center gap-1 rounded-full bg-[#fef3f2] py-0.5 pl-2 pr-2.5 text-sm font-medium text-[#f04438] dark:bg-[#f04438]/15 dark:text-[#d92d20]">
<PlusIcon />
Error
</span>
{/* Warning Badge */}
<span className="inline-flex items-center justify-center gap-1 rounded-full bg-[#fffaeb] py-0.5 pl-2 pr-2.5 text-sm font-medium text-[#f79009] dark:bg-[#f79009]/15 dark:text-[#fd853a]">
<PlusIcon />
Warning
</span>
{/* Info Badge */}
<span className="inline-flex items-center justify-center gap-1 rounded-full bg-[#f0f9ff] py-0.5 pl-2 pr-2.5 text-sm font-medium text-[#0ba5ec] dark:bg-[#0ba5ec]/15 dark:text-[#0086c9]">
<PlusIcon />
Info
</span>
{/* Light Badge */}
<span className="inline-flex items-center justify-center gap-1 rounded-full bg-[#f2f4f7] py-0.5 pl-2 pr-2.5 text-sm font-medium text-[#475467] dark:bg-white/5 dark:text-white/80">
<PlusIcon />
Light
</span>
{/* Dark Badge */}
<span className="inline-flex items-center justify-center gap-1 rounded-full bg-[#667085] py-0.5 pl-2 pr-2.5 text-sm font-medium text-white dark:bg-white/5 dark:text-white">
<PlusIcon />
Dark
</span>
</div>
);
};
export default Badge03;

69
src/app/components/partials/badge/Badge04.js
View File

@ -1,69 +0,0 @@
// components/partials/badge/Badge04.tsx
import React from 'react';
const PlusIcon = () => (
<svg
className="fill-current"
width="12"
height="12"
viewBox="0 0 12 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M5.25012 3C5.25012 2.58579 5.58591 2.25 6.00012 2.25C6.41433 2.25 6.75012 2.58579 6.75012 3V5.25012L9.00034 5.25012C9.41455 5.25012 9.75034 5.58591 9.75034 6.00012C9.75034 6.41433 9.41455 6.75012 9.00034 6.75012H6.75012V9.00034C6.75012 9.41455 6.41433 9.75034 6.00012 9.75034C5.58591 9.75034 5.25012 9.41455 5.25012 9.00034L5.25012 6.75012H3C2.58579 6.75012 2.25 6.41433 2.25 6.00012C2.25 5.58591 2.58579 5.25012 3 5.25012H5.25012V3Z"
/>
</svg>
);
const Badge04 = () => {
return (
<div className="flex flex-wrap gap-4 sm:items-center sm:justify-center">
{/* Primary Badge */}
<span className="inline-flex items-center justify-center gap-1 rounded-full bg-[#465fff] py-0.5 pl-2 pr-2.5 text-sm font-medium text-white">
<PlusIcon />
Primary
</span>
{/* Success Badge */}
<span className="inline-flex items-center justify-center gap-1 rounded-full bg-[#12b76a] py-0.5 pl-2 pr-2.5 text-sm font-medium text-white">
<PlusIcon />
Success
</span>
{/* Error Badge */}
<span className="inline-flex items-center justify-center gap-1 rounded-full bg-[#f04438] py-0.5 pl-2 pr-2.5 text-sm font-medium text-white">
<PlusIcon />
Error
</span>
{/* Warning Badge */}
<span className="inline-flex items-center justify-center gap-1 rounded-full bg-[#f79009] py-0.5 pl-2 pr-2.5 text-sm font-medium text-white">
<PlusIcon />
Warning
</span>
{/* Info Badge */}
<span className="inline-flex items-center justify-center gap-1 rounded-full bg-[#0ba5ec] py-0.5 pl-2 pr-2.5 text-sm font-medium text-white">
<PlusIcon />
Info
</span>
{/* Light Badge */}
<span className="inline-flex items-center justify-center gap-1 rounded-full bg-[#98a2b3] py-0.5 pl-2 pr-2.5 text-sm font-medium text-white dark:bg-white/5 dark:text-white/80">
<PlusIcon />
Light
</span>
{/* Dark Badge */}
<span className="inline-flex items-center justify-center gap-1 rounded-full bg-[#1d2939] py-0.5 pl-2 pr-2.5 text-sm font-medium text-white dark:bg-white/15 dark:text-white">
<PlusIcon />
Dark
</span>
</div>
);
};
export default Badge04;

90
src/app/components/partials/badge/Badge05.js
View File

@ -1,90 +0,0 @@
// components/partials/badge/Badge05.tsx
import React from 'react';
const PlusIcon = () => (
<svg
className="fill-current"
width="12"
height="12"
viewBox="0 0 12 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M5.25012 3C5.25012 2.58579 5.58591 2.25 6.00012 2.25C6.41433 2.25 6.75012 2.58579 6.75012 3V5.25012L9.00034 5.25012C9.41455 5.25012 9.75034 5.58591 9.75034 6.00012C9.75034 6.41433 9.41455 6.75012 9.00034 6.75012H6.75012V9.00034C6.75012 9.41455 6.41433 9.75034 6.00012 9.75034C5.58591 9.75034 5.25012 9.41455 5.25012 9.00034L5.25012 6.75012H3C2.58579 6.75012 2.25 6.41433 2.25 6.00012C2.25 5.58591 2.58579 5.25012 3 5.25012H5.25012V3Z"
/>
</svg>
);
const Badge05 = () => {
return (
<div className="flex flex-wrap gap-4 sm:items-center sm:justify-center">
{/* Primary Badge */}
<span
className="inline-flex items-center justify-center gap-1 rounded-full py-0.5 pl-2.5 pr-2 text-sm font-medium"
style={{ backgroundColor: '#ecf3ff', color: '#465fff' }}
>
Primary
<PlusIcon />
</span>
{/* Success Badge */}
<span
className="inline-flex items-center justify-center gap-1 rounded-full py-0.5 pl-2.5 pr-2 text-sm font-medium"
style={{ backgroundColor: '#ecfdf3', color: '#039855' }}
>
Success
<PlusIcon />
</span>
{/* Error Badge */}
<span
className="inline-flex items-center justify-center gap-1 rounded-full py-0.5 pl-2.5 pr-2 text-sm font-medium"
style={{ backgroundColor: '#fef3f2', color: '#d92d20' }}
>
Error
<PlusIcon />
</span>
{/* Warning Badge */}
<span
className="inline-flex items-center justify-center gap-1 rounded-full py-0.5 pl-2.5 pr-2 text-sm font-medium"
style={{ backgroundColor: '#fffaeb', color: '#fd853a' }}
>
Warning
<PlusIcon />
</span>
{/* Info Badge */}
<span
className="inline-flex items-center justify-center gap-1 rounded-full py-0.5 pl-2.5 pr-2 text-sm font-medium"
style={{ backgroundColor: '#f0f9ff', color: '#0ba5ec' }}
>
Info
<PlusIcon />
</span>
{/* Light Badge */}
<span
className="inline-flex items-center justify-center gap-1 rounded-full py-0.5 pl-2.5 pr-2 text-sm font-medium"
style={{ backgroundColor: '#f2f4f7', color: '#344054' }}
>
Light
<PlusIcon />
</span>
{/* Dark Badge */}
<span
className="inline-flex items-center justify-center gap-1 rounded-full py-0.5 pl-2.5 pr-2 text-sm font-medium"
style={{ backgroundColor: '#667085', color: '#ffffff' }}
>
Dark
<PlusIcon />
</span>
</div>
);
};
export default Badge05;

95
src/app/components/partials/badge/Badge06.js
View File

@ -1,95 +0,0 @@
import React from 'react';
const PlusIcon = () => (
<svg
className="fill-current"
width="12"
height="12"
viewBox="0 0 12 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M5.25012 3C5.25012 2.58579 5.58591 2.25 6.00012 2.25C6.41433 2.25 6.75012 2.58579 6.75012 3V5.25012L9.00034 5.25012C9.41455 5.25012 9.75034 5.58591 9.75034 6.00012C9.75034 6.41433 9.41455 6.75012 9.00034 6.75012H6.75012V9.00034C6.75012 9.41455 6.41433 9.75034 6.00012 9.75034C5.58591 9.75034 5.25012 9.41455 5.25012 9.00034L5.25012 6.75012H3C2.58579 6.75012 2.25 6.41433 2.25 6.00012C2.25 5.58591 2.58579 5.25012 3 5.25012H5.25012V3Z"
/>
</svg>
);
const Badge06 = () => {
return (
<div className="flex flex-wrap gap-4 sm:items-center sm:justify-center">
{/* Primary Badge */}
<span
className="inline-flex items-center justify-center gap-1 rounded-full py-0.5 pl-2.5 pr-2 text-sm font-medium text-white"
style={{ backgroundColor: '#3B82F6' }} // Tailwind's brand-500 equivalent
>
Primary
<PlusIcon />
</span>
{/* Success Badge */}
<span
className="inline-flex items-center justify-center gap-1 rounded-full py-0.5 pl-2.5 pr-2 text-sm font-medium text-white"
style={{ backgroundColor: '#22C55E' }} // Tailwind's success-500 equivalent
>
Success
<PlusIcon />
</span>
{/* Error Badge */}
<span
className="inline-flex items-center justify-center gap-1 rounded-full py-0.5 pl-2.5 pr-2 text-sm font-medium text-white"
style={{ backgroundColor: '#EF4444' }} // Tailwind's error-500 equivalent
>
Error
<PlusIcon />
</span>
{/* Warning Badge */}
<span
className="inline-flex items-center justify-center gap-1 rounded-full py-0.5 pl-2.5 pr-2 text-sm font-medium text-white"
style={{ backgroundColor: '#F59E0B' }} // Tailwind's warning-500 equivalent
>
Warning
<PlusIcon />
</span>
{/* Info Badge */}
<span
className="inline-flex items-center justify-center gap-1 rounded-full py-0.5 pl-2.5 pr-2 text-sm font-medium text-white"
style={{ backgroundColor: '#38BDF8' }} // Tailwind's blue-light-500 equivalent
>
Info
<PlusIcon />
</span>
{/* Light Badge */}
<span
className="inline-flex items-center justify-center gap-1 rounded-full py-0.5 pl-2.5 pr-2 text-sm font-medium text-white"
style={{
backgroundColor: '#9CA3AF', // Tailwind's gray-400
color: 'rgba(255, 255, 255, 0.8)',
}}
>
Light
<PlusIcon />
</span>
{/* Dark Badge */}
<span
className="inline-flex items-center justify-center gap-1 rounded-full py-0.5 pl-2.5 pr-2 text-sm font-medium text-white"
style={{
backgroundColor: '#1F2937', // Tailwind's gray-800
color: '#ffffff',
}}
>
Dark
<PlusIcon />
</span>
</div>
);
};
export default Badge06;

2
src/app/components/partials/header.jsx
View File

@ -18,7 +18,7 @@ export default function Header({
return (
<div className={`flex grow flex-col items-center ${darkMode ? 'bg-gray-500' : 'bg-white'} justify-between lg:flex-row lg:px-6 w-full`}> <div className="hidden lg:flex lg:justify-center lg:items-center lg:w-full lg:px-6 lg:py-3 xl:flex xl:justify-center xl:items-center xl:w-full xl:px-6 2xl:flex 2xl:justify-center 2xl:items-center 2xl:w-full 2xl:px-6">
<div className={`flex grow flex-col items-center ${darkMode ? 'bg-gray-900' : 'bg-white'} justify-between lg:flex-row lg:px-6 w-full`}> <div className="hidden lg:flex lg:justify-center lg:items-center lg:w-full lg:px-6 lg:py-3 xl:flex xl:justify-center xl:items-center xl:w-full xl:px-6 2xl:flex 2xl:justify-center 2xl:items-center 2xl:w-full 2xl:px-6">
<div className={`flex flex-col gap-3 p-4 rounded-lg ${darkMode ? 'bg-gray-800 text-gray-200' : 'bg-gray-50 text-gray-600'}`}>
<div className="grid grid-cols-4 gap-4">
{/* ----------Total Tokens Card---------------- */}

2
src/app/dashboard/page.js
View File

@ -43,7 +43,7 @@ export default function DashboardPage() {
<main className={`min-h-screen transition-colors duration-300 ${
darkMode ? 'dark bg-gray-900' : 'bg-white'
}`}>
<div className="p-6">
<div className="p-1">
<EntriesTable />
</div>
</main>

4
src/app/pages/MultiBooking/page.js
View File

@ -58,13 +58,13 @@ export default function MultiBooking() {
<div className="relative flex flex-1 flex-col overflow-x-hidden overflow-y-auto">
{/* Sticky Header */}
<header className="sticky top-0 z-50 bg-white shadow-sm dark:bg-gray-800">
<div className="flex items-center justify-between p-4">
<div className="flex items-center justify-between">
<Header />
</div>
</header>
{/* Main Content */}
<main className="flex-1 overflow-y-auto">
<main className="flex-1 overflow-y-auto scrollbar-hide">
<div className="mx-auto max-w-[--breakpoint-2xl] p-4 md:p-6 pt-20">
{error && (
<div className="mb-4 p-4 bg-red-100 text-red-700 rounded-md">

109
src/app/pages/alerts/page.js
View File

@ -1,109 +0,0 @@
'use client';
import { useState, useEffect } from 'react';
import Head from 'next/head';
import Preloader from "../../components/partials/preloaders";
// import Sidebar from './partials/sidebar';
import Overlay from "../../components/partials/overlay";
import Header from "../../components/partials/header";
import Breadcrumb from "../../components/partials/breadcrumb";
import AlertSuccess from '../../components/partials/alert/alert-success';
import AlertWarning from "../../components/partials/alert/alert-warning";
import AlertError from '../../components/partials/alert/alert-error';
import AlertInfo from '../../components/partials/alert/alert-info';
export default function AlertsPage() {
const [darkMode, setDarkMode] = useState(false);
const [loaded, setLoaded] = useState(true);
useEffect(() => {
// Initialize dark mode from localStorage
const savedDarkMode = JSON.parse(localStorage.getItem('darkMode') || 'false');
setDarkMode(savedDarkMode);
}, []);
useEffect(() => {
// Save dark mode preference to localStorage
localStorage.setItem('darkMode', JSON.stringify(darkMode));
}, [darkMode]);
if (!loaded) {
return <Preloader />;
}
return (
<div className={`${darkMode ? 'dark bg-[#101828]' : ''}`}>
<div className="flex h-screen overflow-hidden">
{/* <Sidebar /> */}
<div className="relative flex flex-1 flex-col overflow-y-auto overflow-x-hidden">
<Overlay />
<div className='flex bg-white dark:bg-gray-800 shadow-sm sticky top-0 z-50 w-full'>
<Header />
</div>
<main>
<div className="mx-auto max-w-[--breakpoint-2xl] p-4 md:p-6">
<Breadcrumb pageName="Alerts" />
<div className="space-y-5 sm:space-y-6">
<div className="rounded-2xl border border-[#E4E7EC] bg-white dark:border-[#1A2231] dark:bg-white/5">
<div className="px-6 py-5">
<h3 className="text-base font-medium text-[#1D2939] dark:text-white/90">
Success Alert
</h3>
</div>
<div className="border-t border-[#F2F4F7] p-4 dark:border-[#1A2231] sm:p-6">
<div className="space-y-6">
<AlertSuccess />
</div>
</div>
</div>
<div className="rounded-2xl border border-[#E4E7EC] bg-white dark:border-[#1A2231] dark:bg-white/5">
<div className="px-6 py-5">
<h3 className="text-base font-medium text-[#1D2939] dark:text-white/90">
Warning Alert
</h3>
</div>
<div className="border-t border-[#F2F4F7] p-4 dark:border-[#1A2231] sm:p-6">
<div className="space-y-6">
<AlertWarning />
</div>
</div>
</div>
<div className="rounded-2xl border border-[#E4E7EC] bg-white dark:border-[#1A2231] dark:bg-white/5">
<div className="px-6 py-5">
<h3 className="text-base font-medium text-[#1D2939] dark:text-white/90">
Error Alert
</h3>
</div>
<div className="border-t border-[#F2F4F7] p-4 dark:border-[#1A2231] sm:p-6">
<div className="space-y-6">
<AlertError />
</div>
</div>
</div>
<div className="rounded-2xl border border-[#E4E7EC] bg-white dark:border-[#1A2231] dark:bg-white/5">
<div className="px-6 py-5">
<h3 className="text-base font-medium text-[#1D2939] dark:text-white/90">
Info Alert
</h3>
</div>
<div className="border-t border-[#F2F4F7] p-4 dark:border-[#1A2231] sm:p-6">
<div className="space-y-6">
<AlertInfo />
</div>
</div>
</div>
</div>
</div>
</main>
</div>
</div>
</div>
);
};

137
src/app/pages/avatars/page.js
View File

@ -1,137 +0,0 @@
// app/avatars/page.tsx
'use client'
import { useState, useEffect } from 'react';
import Head from 'next/head';
import Preloader from "../../components/partials/preloaders";
// import Sidebar from '@/components/partials/Sidebar';
import Overlay from "../../components/partials/overlay";
import Header from "../../components/partials/header";
import Breadcrumb from "../../components/partials/breadcrumb";
import Avatar01 from "../../components/partials/avatar/avatar01";
import Avatar02 from"../../components/partials/avatar/avatar02";
import Avatar03 from "../../components/partials/avatar/avatar03";
import Avatar04 from "../../components/partials/avatar/avatar04";
export default function AvatarsPage() {
const [loaded, setLoaded] = useState(false);
const [darkMode, setDarkMode] = useState(false);
const [stickyMenu, setStickyMenu] = useState(false);
const [sidebarToggle, setSidebarToggle] = useState(false);
const [scrollTop, setScrollTop] = useState(false);
useEffect(() => {
const savedDarkMode = JSON.parse(localStorage.getItem('darkMode') || 'false');
setDarkMode(savedDarkMode);
const timer = setTimeout(() => {
setLoaded(true);
}, 500);
return () => clearTimeout(timer);
}, []);
useEffect(() => {
localStorage.setItem('darkMode', JSON.stringify(darkMode));
}, [darkMode]);
const pageName = 'Avatars';
return (
<>
<div className={`${darkMode ? 'dark bg-gray-900' : ''}`}>
{/* Preloader */}
{!loaded && <Preloader />}
{/* Page Wrapper */}
<div className="flex h-screen overflow-hidden">
{/* Sidebar */}
{/* <Sidebar
activePage="avatars"
darkMode={darkMode}
sidebarToggle={sidebarToggle}
setSidebarToggle={setSidebarToggle}
/> */}
{/* Content Area */}
<div className="relative flex flex-col flex-1 overflow-x-hidden overflow-y-auto">
{/* Small Device Overlay */}
<Overlay
sidebarToggle={sidebarToggle}
setSidebarToggle={setSidebarToggle}
/>
{/* Header */}
<Header
darkMode={darkMode}
setDarkMode={setDarkMode}
stickyMenu={stickyMenu}
setStickyMenu={setStickyMenu}
sidebarToggle={sidebarToggle}
setSidebarToggle={setSidebarToggle}
/>
{/* Main Content */}
<main>
<div className="p-4 mx-auto max-w-[--breakpoint-2xl] md:p-6">
{/* Breadcrumb */}
<Breadcrumb pageName={pageName} />
<div className="space-y-5 sm:space-y-6">
{/* Default Avatar */}
<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 Avatar
</h3>
</div>
<div className="p-8 border-t border-gray-100 dark:border-gray-800">
<Avatar01 />
</div>
</div>
{/* Avatar with online indicator */}
<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">
Avatar with online indicator
</h3>
</div>
<div className="p-8 border-t border-gray-100 dark:border-gray-800">
<Avatar02 />
</div>
</div>
{/* Avatar with Offline indicator */}
<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">
Avatar with Offline indicator
</h3>
</div>
<div className="p-8 border-t border-gray-100 dark:border-gray-800">
<Avatar03 />
</div>
</div>
{/* Avatar with busy indicator */}
<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">
Avatar with busy indicator
</h3>
</div>
<div className="p-8 border-t border-gray-100 dark:border-gray-800">
<Avatar04 />
</div>
</div>
</div>
</div>
</main>
</div>
</div>
</div>
</>
);
}

161
src/app/pages/badge/page.js
View File

@ -1,161 +0,0 @@
// app/badge/page.tsx
'use client'
import { useState, useEffect } from 'react';
import Head from 'next/head';
import Preloader from "../../components/partials/preloaders";
// import Sidebar from '@/components/partials/Sidebar';
import Overlay from "../../components/partials/overlay";
import Header from "../../components/partials/header";
import Breadcrumb from "../../components/partials/breadcrumb";
import Badge01 from "../../components/partials/badge/Badge01";
import Badge02 from "../../components/partials/badge/Badge02";
import Badge03 from "../../components/partials/badge/Badge03";
import Badge04 from "../../components/partials/badge/Badge04";
import Badge05 from "../../components/partials/badge/Badge05";
import Badge06 from "../../components/partials/badge/Badge06";
export default function BadgePage() {
const [loaded, setLoaded] = useState(false);
const [darkMode, setDarkMode] = useState(false);
const [stickyMenu, setStickyMenu] = useState(false);
const [sidebarToggle, setSidebarToggle] = useState(false);
const [scrollTop, setScrollTop] = useState(false);
useEffect(() => {
// Load dark mode preference from localStorage
const savedDarkMode = JSON.parse(localStorage.getItem('darkMode') || 'false');
setDarkMode(savedDarkMode);
// Simulate loading
const timer = setTimeout(() => {
setLoaded(true);
}, 500);
return () => clearTimeout(timer);
}, []);
useEffect(() => {
// Save dark mode preference to localStorage
localStorage.setItem('darkMode', JSON.stringify(darkMode));
}, [darkMode]);
const pageName = 'Badge';
return (
<>
<div className={`${darkMode ? 'dark bg-gray-900' : ''}`}>
{/* Preloader */}
{!loaded && <Preloader />}
{/* Page Wrapper */}
<div className="flex h-screen overflow-hidden">
{/* Sidebar */}
{/* <Sidebar
activePage="badge"
darkMode={darkMode}
sidebarToggle={sidebarToggle}
setSidebarToggle={setSidebarToggle}
/> */}
{/* Content Area */}
<div className="relative flex flex-1 flex-col overflow-y-auto overflow-x-hidden">
{/* Small Device Overlay */}
<Overlay
sidebarToggle={sidebarToggle}
setSidebarToggle={setSidebarToggle}
/>
{/* Header */}
<div darkMode={darkMode} setDarkMode={setDarkMode} className='flex bg-white dark:bg-gray-800 shadow-sm sticky top-0 z-50 w-full'>
<Header />
</div>
{/* Main Content */}
<main>
<div className="mx-auto max-w-[--breakpoint-2xl] p-4 md:p-6">
{/* Breadcrumb */}
<Breadcrumb pageName={pageName} />
<div className="space-y-5 sm:space-y-6">
{/* With Light Background */}
<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">
With Light Background
</h3>
</div>
<div className="border-t border-gray-100 p-6 dark:border-gray-800 xl:p-10">
<Badge01 />
</div>
</div>
{/* With Solid Background */}
<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">
With Solid Background
</h3>
</div>
<div className="border-t border-gray-100 p-6 dark:border-gray-800 xl:p-10">
<Badge02 />
</div>
</div>
{/* Light Background with Left 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">
Light Background with Left Icon
</h3>
</div>
<div className="border-t border-gray-100 p-6 dark:border-gray-800 xl:p-10">
<Badge03 />
</div>
</div>
{/* Solid Background with Left 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">
Solid Background with Left Icon
</h3>
</div>
<div className="border-t border-gray-100 p-6 dark:border-gray-800 xl:p-10">
<Badge04 />
</div>
</div>
{/* Light Background with Right 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">
Light Background with Right Icon
</h3>
</div>
<div className="border-t border-gray-100 p-6 dark:border-gray-800 xl:p-10">
<Badge05 />
</div>
</div>
{/* Solid Background with Right 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">
Solid Background with Right Icon
</h3>
</div>
<div className="border-t border-gray-100 p-6 dark:border-gray-800 xl:p-10">
<Badge06 />
</div>
</div>
</div>
</div>
</main>
</div>
</div>
</div>
</>
);
}