removed unwanted files
This commit is contained in:
parent
084809f31f
commit
afee8c8516
@ -1,158 +0,0 @@
|
|||||||
// components/LineChart.js
|
|
||||||
'use client';
|
|
||||||
import { useEffect } from 'react';
|
|
||||||
import ApexCharts from 'apexcharts';
|
|
||||||
|
|
||||||
const LineChart = () => {
|
|
||||||
useEffect(() => {
|
|
||||||
const chartThreeOptions = {
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
name: "Sales",
|
|
||||||
data: [180, 190, 170, 160, 175, 165, 170, 205, 230, 210, 240, 235],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Revenue",
|
|
||||||
data: [40, 30, 50, 40, 55, 40, 70, 100, 110, 120, 150, 140],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
legend: {
|
|
||||||
show: false,
|
|
||||||
position: "top",
|
|
||||||
horizontalAlign: "left",
|
|
||||||
},
|
|
||||||
colors: ["#465FFF", "#9CB9FF"],
|
|
||||||
chart: {
|
|
||||||
fontFamily: "Outfit, sans-serif",
|
|
||||||
height: 310,
|
|
||||||
type: "area",
|
|
||||||
toolbar: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
animations: {
|
|
||||||
enabled: true,
|
|
||||||
easing: 'easeinout',
|
|
||||||
speed: 800,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
fill: {
|
|
||||||
type: "gradient",
|
|
||||||
gradient: {
|
|
||||||
shadeIntensity: 1,
|
|
||||||
opacityFrom: 0.55,
|
|
||||||
opacityTo: 0,
|
|
||||||
stops: [0, 90, 100],
|
|
||||||
},
|
|
||||||
},
|
|
||||||
stroke: {
|
|
||||||
curve: "straight",
|
|
||||||
width: [2, 2],
|
|
||||||
dashArray: [0, 0],
|
|
||||||
},
|
|
||||||
markers: {
|
|
||||||
size: 0,
|
|
||||||
hover: {
|
|
||||||
size: 5,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
labels: {
|
|
||||||
show: false,
|
|
||||||
position: "top",
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
borderColor: "#F1F1F1",
|
|
||||||
xaxis: {
|
|
||||||
lines: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
yaxis: {
|
|
||||||
lines: {
|
|
||||||
show: true,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
dataLabels: {
|
|
||||||
enabled: false,
|
|
||||||
},
|
|
||||||
tooltip: {
|
|
||||||
enabled: true,
|
|
||||||
x: {
|
|
||||||
format: "MMM yyyy",
|
|
||||||
},
|
|
||||||
y: {
|
|
||||||
formatter: function(val) {
|
|
||||||
return "$" + val;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
marker: {
|
|
||||||
show: true,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
xaxis: {
|
|
||||||
type: "category",
|
|
||||||
categories: [
|
|
||||||
"Jan",
|
|
||||||
"Feb",
|
|
||||||
"Mar",
|
|
||||||
"Apr",
|
|
||||||
"May",
|
|
||||||
"Jun",
|
|
||||||
"Jul",
|
|
||||||
"Aug",
|
|
||||||
"Sep",
|
|
||||||
"Oct",
|
|
||||||
"Nov",
|
|
||||||
"Dec",
|
|
||||||
],
|
|
||||||
axisBorder: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
axisTicks: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
tooltip: {
|
|
||||||
enabled: false,
|
|
||||||
},
|
|
||||||
labels: {
|
|
||||||
style: {
|
|
||||||
colors: "#6B7280",
|
|
||||||
fontSize: "12px",
|
|
||||||
fontFamily: "Outfit, sans-serif",
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
yaxis: {
|
|
||||||
title: {
|
|
||||||
text: "Amount ($)",
|
|
||||||
style: {
|
|
||||||
color: "#6B7280",
|
|
||||||
fontSize: "12px",
|
|
||||||
fontFamily: "Outfit, sans-serif",
|
|
||||||
}
|
|
||||||
},
|
|
||||||
labels: {
|
|
||||||
formatter: function(val) {
|
|
||||||
return "$" + val;
|
|
||||||
},
|
|
||||||
style: {
|
|
||||||
colors: "#6B7280",
|
|
||||||
fontSize: "12px",
|
|
||||||
fontFamily: "Outfit, sans-serif",
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
const chart = new ApexCharts(document.querySelector("#chartThree"), chartThreeOptions);
|
|
||||||
chart.render();
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
chart.destroy();
|
|
||||||
};
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return <div id="chartThree" />;
|
|
||||||
};
|
|
||||||
|
|
||||||
export default LineChart;
|
|
||||||
@ -1,142 +0,0 @@
|
|||||||
// components/charts/chart-01.jsx
|
|
||||||
'use client';
|
|
||||||
import { useEffect } from 'react';
|
|
||||||
import ApexCharts from 'apexcharts';
|
|
||||||
|
|
||||||
const Chart01 = () => {
|
|
||||||
useEffect(() => {
|
|
||||||
const chartOneOptions = {
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
name: "Sales",
|
|
||||||
data: [168, 385, 201, 298, 187, 195, 291, 110, 215, 390, 280, 112],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
colors: ["#465fff"],
|
|
||||||
chart: {
|
|
||||||
fontFamily: "Outfit, sans-serif",
|
|
||||||
type: "bar",
|
|
||||||
height: 180,
|
|
||||||
toolbar: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
animations: {
|
|
||||||
enabled: true,
|
|
||||||
easing: 'easeinout',
|
|
||||||
speed: 800,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
plotOptions: {
|
|
||||||
bar: {
|
|
||||||
horizontal: false,
|
|
||||||
columnWidth: "39%",
|
|
||||||
borderRadius: 5,
|
|
||||||
borderRadiusApplication: "end",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
dataLabels: {
|
|
||||||
enabled: false,
|
|
||||||
},
|
|
||||||
stroke: {
|
|
||||||
show: true,
|
|
||||||
width: 4,
|
|
||||||
colors: ["transparent"],
|
|
||||||
},
|
|
||||||
xaxis: {
|
|
||||||
categories: [
|
|
||||||
"Jan",
|
|
||||||
"Feb",
|
|
||||||
"Mar",
|
|
||||||
"Apr",
|
|
||||||
"May",
|
|
||||||
"Jun",
|
|
||||||
"Jul",
|
|
||||||
"Aug",
|
|
||||||
"Sep",
|
|
||||||
"Oct",
|
|
||||||
"Nov",
|
|
||||||
"Dec",
|
|
||||||
],
|
|
||||||
axisBorder: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
axisTicks: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
labels: {
|
|
||||||
style: {
|
|
||||||
colors: "#6B7280",
|
|
||||||
fontSize: "12px",
|
|
||||||
fontFamily: "Outfit, sans-serif",
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
show: true,
|
|
||||||
position: "top",
|
|
||||||
horizontalAlign: "left",
|
|
||||||
fontFamily: "Outfit, sans-serif",
|
|
||||||
markers: {
|
|
||||||
radius: 12,
|
|
||||||
},
|
|
||||||
itemMargin: {
|
|
||||||
horizontal: 10,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
yaxis: {
|
|
||||||
title: {
|
|
||||||
text: "Amount ($)",
|
|
||||||
style: {
|
|
||||||
color: "#6B7280",
|
|
||||||
fontSize: "12px",
|
|
||||||
fontFamily: "Outfit, sans-serif",
|
|
||||||
}
|
|
||||||
},
|
|
||||||
labels: {
|
|
||||||
formatter: function(val) {
|
|
||||||
return "$" + val;
|
|
||||||
},
|
|
||||||
style: {
|
|
||||||
colors: "#6B7280",
|
|
||||||
fontSize: "12px",
|
|
||||||
fontFamily: "Outfit, sans-serif",
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
borderColor: "#F1F1F1",
|
|
||||||
yaxis: {
|
|
||||||
lines: {
|
|
||||||
show: true,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
xaxis: {
|
|
||||||
lines: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
fill: {
|
|
||||||
opacity: 1,
|
|
||||||
},
|
|
||||||
tooltip: {
|
|
||||||
y: {
|
|
||||||
formatter: function(val) {
|
|
||||||
return "$" + val;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
const chart = new ApexCharts(document.querySelector("#chartOne"), chartOneOptions);
|
|
||||||
chart.render();
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
chart.destroy();
|
|
||||||
};
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return <div id="chartOne" />;
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Chart01;
|
|
||||||
@ -1,100 +0,0 @@
|
|||||||
// components/charts/chart-02.jsx
|
|
||||||
'use client';
|
|
||||||
import { useEffect } from 'react';
|
|
||||||
import ApexCharts from 'apexcharts';
|
|
||||||
|
|
||||||
const Chart02 = () => {
|
|
||||||
useEffect(() => {
|
|
||||||
const chartTwoOptions = {
|
|
||||||
series: [75.55],
|
|
||||||
colors: ["#465FFF"],
|
|
||||||
chart: {
|
|
||||||
fontFamily: "Outfit, sans-serif",
|
|
||||||
type: "radialBar",
|
|
||||||
height: 330,
|
|
||||||
sparkline: {
|
|
||||||
enabled: true,
|
|
||||||
},
|
|
||||||
animations: {
|
|
||||||
enabled: true,
|
|
||||||
easing: 'easeinout',
|
|
||||||
speed: 800,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
plotOptions: {
|
|
||||||
radialBar: {
|
|
||||||
startAngle: -90,
|
|
||||||
endAngle: 90,
|
|
||||||
hollow: {
|
|
||||||
size: "80%",
|
|
||||||
},
|
|
||||||
track: {
|
|
||||||
background: "#E4E7EC",
|
|
||||||
strokeWidth: "100%",
|
|
||||||
margin: 5,
|
|
||||||
},
|
|
||||||
dataLabels: {
|
|
||||||
name: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
value: {
|
|
||||||
fontSize: "36px",
|
|
||||||
fontWeight: "600",
|
|
||||||
offsetY: 60,
|
|
||||||
color: "#1D2939",
|
|
||||||
fontFamily: "Outfit, sans-serif",
|
|
||||||
formatter: function (val) {
|
|
||||||
return val + "%";
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
fill: {
|
|
||||||
type: "gradient",
|
|
||||||
gradient: {
|
|
||||||
shade: "dark",
|
|
||||||
shadeIntensity: 0.5,
|
|
||||||
gradientToColors: ["#465FFF"],
|
|
||||||
inverseColors: false,
|
|
||||||
opacityFrom: 1,
|
|
||||||
opacityTo: 0.8,
|
|
||||||
stops: [0, 100],
|
|
||||||
},
|
|
||||||
},
|
|
||||||
stroke: {
|
|
||||||
lineCap: "round",
|
|
||||||
},
|
|
||||||
labels: ["Progress"],
|
|
||||||
responsive: [{
|
|
||||||
breakpoint: 768,
|
|
||||||
options: {
|
|
||||||
chart: {
|
|
||||||
height: 280,
|
|
||||||
},
|
|
||||||
plotOptions: {
|
|
||||||
radialBar: {
|
|
||||||
dataLabels: {
|
|
||||||
value: {
|
|
||||||
fontSize: "28px",
|
|
||||||
offsetY: 50,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}],
|
|
||||||
};
|
|
||||||
|
|
||||||
const chart = new ApexCharts(document.querySelector("#chartTwo"), chartTwoOptions);
|
|
||||||
chart.render();
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
chart.destroy();
|
|
||||||
};
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return <div id="chartTwo" />;
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Chart02;
|
|
||||||
@ -1,26 +0,0 @@
|
|||||||
import Image from "next/image";
|
|
||||||
|
|
||||||
export default function GridShape() {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<div className="absolute right-0 top-0 -z-10 w-full max-w-[250px] xl:max-w-[450px]">
|
|
||||||
<Image
|
|
||||||
width={540}
|
|
||||||
height={254}
|
|
||||||
src="/images/shape/grid-01.svg"
|
|
||||||
alt="grid"
|
|
||||||
className="h-auto w-full"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="absolute bottom-0 left-0 -z-10 w-full max-w-[250px] rotate-180 xl:max-w-[450px]">
|
|
||||||
<Image
|
|
||||||
width={540}
|
|
||||||
height={254}
|
|
||||||
src="/images/shape/grid-01.svg"
|
|
||||||
alt="grid"
|
|
||||||
className="h-auto w-full"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,23 +0,0 @@
|
|||||||
import Image from 'next/image';
|
|
||||||
|
|
||||||
const Image01 = () => {
|
|
||||||
return (
|
|
||||||
<div className="relative">
|
|
||||||
<div id="pane" className="overflow-hidden">
|
|
||||||
<Image
|
|
||||||
src="/images/grid-image/image-01.png"
|
|
||||||
alt="Cover"
|
|
||||||
width={800} // Set appropriate width
|
|
||||||
height={600} // Set appropriate height
|
|
||||||
className="w-full rounded-xl border border-gray-200 dark:border-gray-800"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
id="ghostpane"
|
|
||||||
className="absolute left-0 top-0 duration-300 ease-in-out"
|
|
||||||
></div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Image01;
|
|
||||||
@ -1,29 +0,0 @@
|
|||||||
import Image from 'next/image';
|
|
||||||
|
|
||||||
const Image02 = () => {
|
|
||||||
return (
|
|
||||||
<div className="grid grid-cols-1 gap-5 sm:grid-cols-2">
|
|
||||||
<div>
|
|
||||||
<Image
|
|
||||||
src="/images/grid-image/image-02.png"
|
|
||||||
alt="image grid"
|
|
||||||
width={600} // Set appropriate width
|
|
||||||
height={400} // Set appropriate height
|
|
||||||
className="rounded-xl border border-gray-200 dark:border-gray-800"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<Image
|
|
||||||
src="/images/grid-image/image-03.png"
|
|
||||||
alt="image grid"
|
|
||||||
width={600} // Set appropriate width
|
|
||||||
height={400} // Set appropriate height
|
|
||||||
className="rounded-xl border border-gray-200 dark:border-gray-800"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Image02;
|
|
||||||
@ -1,39 +0,0 @@
|
|||||||
import Image from 'next/image';
|
|
||||||
|
|
||||||
const Image03 = () => {
|
|
||||||
return (
|
|
||||||
<div className="grid grid-cols-1 gap-5 sm:grid-cols-2 xl:grid-cols-3">
|
|
||||||
<div>
|
|
||||||
<Image
|
|
||||||
src="/images/grid-image/image-04.png"
|
|
||||||
alt="image grid"
|
|
||||||
width={400} // Set appropriate width
|
|
||||||
height={300} // Set appropriate height
|
|
||||||
className="rounded-xl border border-gray-200 dark:border-gray-800"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<Image
|
|
||||||
src="/images/grid-image/image-05.png"
|
|
||||||
alt="image grid"
|
|
||||||
width={400}
|
|
||||||
height={300}
|
|
||||||
className="rounded-xl border border-gray-200 dark:border-gray-800"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<Image
|
|
||||||
src="/images/grid-image/image-06.png"
|
|
||||||
alt="image grid"
|
|
||||||
width={400}
|
|
||||||
height={300}
|
|
||||||
className="rounded-xl border border-gray-200 dark:border-gray-800"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Image03;
|
|
||||||
@ -1,203 +0,0 @@
|
|||||||
import Image from 'next/image';
|
|
||||||
|
|
||||||
const TableOne = () => {
|
|
||||||
// Table data
|
|
||||||
const tableData = [
|
|
||||||
{
|
|
||||||
id: 1,
|
|
||||||
token: "1",
|
|
||||||
name: "John Doe",
|
|
||||||
status: {
|
|
||||||
text: "Done",
|
|
||||||
variant: "success",
|
|
||||||
color: "text-success-600",
|
|
||||||
bg: "bg-success-50",
|
|
||||||
dark: {
|
|
||||||
color: "dark:text-success-500",
|
|
||||||
bg: "dark:bg-success-500/15"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 2,
|
|
||||||
token: "1",
|
|
||||||
name: "John Doe",
|
|
||||||
status: {
|
|
||||||
text: "In-Queue",
|
|
||||||
variant: "warning",
|
|
||||||
color: "text-warning-600",
|
|
||||||
bg: "bg-warning-50",
|
|
||||||
dark: {
|
|
||||||
color: "dark:text-orange-400",
|
|
||||||
bg: "dark:bg-warning-500/15"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 3,
|
|
||||||
token: "1",
|
|
||||||
name: "John Doe",
|
|
||||||
status: {
|
|
||||||
text: "Cancelled",
|
|
||||||
variant: "error",
|
|
||||||
color: "text-error-600",
|
|
||||||
bg: "bg-error-50",
|
|
||||||
dark: {
|
|
||||||
color: "dark:text-error-500",
|
|
||||||
bg: "dark:bg-error-500/15"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 4,
|
|
||||||
token: "1",
|
|
||||||
name: "John Doe",
|
|
||||||
status: {
|
|
||||||
text: "Done",
|
|
||||||
variant: "success",
|
|
||||||
color: "text-success-600",
|
|
||||||
bg: "bg-success-50",
|
|
||||||
dark: {
|
|
||||||
color: "dark:text-success-500",
|
|
||||||
bg: "dark:bg-success-500/15"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 5,
|
|
||||||
token: "1",
|
|
||||||
name: "John Doe",
|
|
||||||
status: {
|
|
||||||
text: "In-Queue",
|
|
||||||
variant: "warning",
|
|
||||||
color: "text-warning-600",
|
|
||||||
bg: "bg-warning-50",
|
|
||||||
dark: {
|
|
||||||
color: "dark:text-orange-400",
|
|
||||||
bg: "dark:bg-warning-500/15"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 6,
|
|
||||||
token: "1",
|
|
||||||
name: "John Doe",
|
|
||||||
status: {
|
|
||||||
text: "Cancelled",
|
|
||||||
variant: "error",
|
|
||||||
color: "text-error-600",
|
|
||||||
bg: "bg-error-50",
|
|
||||||
dark: {
|
|
||||||
color: "dark:text-error-500",
|
|
||||||
bg: "dark:bg-error-500/15"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
// Action button component
|
|
||||||
const ActionButton = ({ type }) => (
|
|
||||||
<p className="rounded-full border-[1px] px-2 py-0.5 text-theme-xs flex flex-row items-center gap-2 2xl:px-3 2xl:py-1.5 2xl:text-[14px] 2xl:font-normal">
|
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
width="10"
|
|
||||||
height="10"
|
|
||||||
fill="currentColor"
|
|
||||||
className="bi bi-pencil"
|
|
||||||
viewBox="0 0 16 16"
|
|
||||||
>
|
|
||||||
<path d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325"/>
|
|
||||||
</svg>
|
|
||||||
{type}
|
|
||||||
</p>
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="overflow-hidden rounded-2xl border border-gray-200 bg-white px-4 pb-3 pt-4 dark:border-gray-800 dark:bg-white/[0.03] sm:px-6">
|
|
||||||
<div className="w-full overflow-x-auto">
|
|
||||||
<table className="min-w-full">
|
|
||||||
{/* Table Header */}
|
|
||||||
<thead>
|
|
||||||
<tr className="border-y border-gray-100 dark:border-gray-800">
|
|
||||||
<th className="py-3">
|
|
||||||
<div className="flex items-center">
|
|
||||||
<p className="font-medium text-gray-500 text-theme-xs dark:text-gray-400">
|
|
||||||
Token
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</th>
|
|
||||||
<th className="py-3 sm:columns-2 2xl:columns-2">
|
|
||||||
<div className="flex items-center">
|
|
||||||
<p className="font-medium text-gray-500 text-theme-xs dark:text-gray-400">
|
|
||||||
Name
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</th>
|
|
||||||
<th className="py-3 columns-0 sm:columns-0 2xl:columns-0">
|
|
||||||
<div className="flex items-center justify-normal sm:justify-normal 2xl:justify-normal">
|
|
||||||
<p className="font-medium text-gray-500 text-theme-xs dark:text-gray-400">
|
|
||||||
Status
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</th>
|
|
||||||
<th className="py-3">
|
|
||||||
<div className="flex items-center justify-center col-span-1">
|
|
||||||
<p className="font-medium text-gray-500 text-theme-xs dark:text-gray-400 hidden md:block 2xl:block">
|
|
||||||
Options
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
|
|
||||||
{/* Table Body */}
|
|
||||||
<tbody className="divide-y divide-gray-100 dark:divide-gray-800">
|
|
||||||
{tableData.map((item) => (
|
|
||||||
<tr key={item.id}>
|
|
||||||
{/* Token Column */}
|
|
||||||
<td className="py-3">
|
|
||||||
<div className="flex items-center -mt-7 ml-3 md:mt-0 md:mb-0 2xl:mb-0">
|
|
||||||
<p>{item.token}</p>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
|
|
||||||
{/* Name Column */}
|
|
||||||
<td className="py-3">
|
|
||||||
<div className="flex items-center -mt-8 md:mt-0 md:mb-0 2xl:mb-0">
|
|
||||||
<p className="text-gray-500 text-theme-sm dark:text-gray-400">
|
|
||||||
{item.name}
|
|
||||||
</p>
|
|
||||||
{/* Mobile Actions */}
|
|
||||||
<div className="flex items-center justify-center gap-2 mt-20 -ml-[4rem] sm:-ml-[4rem] md:hidden md:mt-0 md:ml-0 2xl:mt-0 2xl:ml-0">
|
|
||||||
<ActionButton type="Done" />
|
|
||||||
<ActionButton type="Missed" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
|
|
||||||
{/* Status Column */}
|
|
||||||
<td className="py-3">
|
|
||||||
<div className="flex items-center justify-normal -mt-7 sm:justify-normal md:mt-0 md:mb-0 2xl:mb-0 2xl:justify-normal">
|
|
||||||
<p className={`rounded-full px-2 py-0.5 text-theme-xs font-medium ${item.status.bg} ${item.status.color} ${item.status.dark.bg} ${item.status.dark.color}`}>
|
|
||||||
{item.status.text}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
|
|
||||||
{/* Options Column (Desktop) */}
|
|
||||||
<td className="py-3">
|
|
||||||
<div className="hidden items-center justify-center gap-2 mt-8 -ml-[18rem] sm:-ml-[49rem] md:flex md:mt-0 md:ml-0 2xl:mt-0 2xl:ml-0">
|
|
||||||
<ActionButton type="Done" />
|
|
||||||
<ActionButton type="Missed" />
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
))}
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default TableOne;
|
|
||||||
@ -1,240 +0,0 @@
|
|||||||
import Image from 'next/image';
|
|
||||||
|
|
||||||
const TableSix = () => {
|
|
||||||
// Table data array
|
|
||||||
const tableData = [
|
|
||||||
{
|
|
||||||
id: 1,
|
|
||||||
user: {
|
|
||||||
name: "Lindsey Curtis",
|
|
||||||
role: "Web Designer",
|
|
||||||
avatar: "/images/user/user-17.jpg"
|
|
||||||
},
|
|
||||||
project: "Agency Website",
|
|
||||||
team: [
|
|
||||||
"/images/user/user-22.jpg",
|
|
||||||
"/images/user/user-23.jpg",
|
|
||||||
"/images/user/user-24.jpg"
|
|
||||||
],
|
|
||||||
status: {
|
|
||||||
text: "Active",
|
|
||||||
variant: "success"
|
|
||||||
},
|
|
||||||
budget: "3.9K"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 2,
|
|
||||||
user: {
|
|
||||||
name: "Kaiya George",
|
|
||||||
role: "Project Manager",
|
|
||||||
avatar: "/images/user/user-18.jpg"
|
|
||||||
},
|
|
||||||
project: "Technology",
|
|
||||||
team: [
|
|
||||||
"/images/user/user-25.jpg",
|
|
||||||
"/images/user/user-26.jpg"
|
|
||||||
],
|
|
||||||
status: {
|
|
||||||
text: "Pending",
|
|
||||||
variant: "warning"
|
|
||||||
},
|
|
||||||
budget: "24.9K"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 3,
|
|
||||||
user: {
|
|
||||||
name: "Zain Geidt",
|
|
||||||
role: "Content Writer",
|
|
||||||
avatar: "/images/user/user-19.jpg"
|
|
||||||
},
|
|
||||||
project: "Blog Writing",
|
|
||||||
team: [
|
|
||||||
"/images/user/user-27.jpg"
|
|
||||||
],
|
|
||||||
status: {
|
|
||||||
text: "Active",
|
|
||||||
variant: "success"
|
|
||||||
},
|
|
||||||
budget: "12.7K"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 4,
|
|
||||||
user: {
|
|
||||||
name: "Abram Schleifer",
|
|
||||||
role: "Digital Marketer",
|
|
||||||
avatar: "/images/user/user-20.jpg"
|
|
||||||
},
|
|
||||||
project: "Social Media",
|
|
||||||
team: [
|
|
||||||
"/images/user/user-28.jpg",
|
|
||||||
"/images/user/user-29.jpg",
|
|
||||||
"/images/user/user-30.jpg"
|
|
||||||
],
|
|
||||||
status: {
|
|
||||||
text: "Cancel",
|
|
||||||
variant: "error"
|
|
||||||
},
|
|
||||||
budget: "2.8K"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 5,
|
|
||||||
user: {
|
|
||||||
name: "Carla George",
|
|
||||||
role: "Front-end Developer",
|
|
||||||
avatar: "/images/user/user-21.jpg"
|
|
||||||
},
|
|
||||||
project: "Website",
|
|
||||||
team: [
|
|
||||||
"/images/user/user-31.jpg",
|
|
||||||
"/images/user/user-32.jpg",
|
|
||||||
"/images/user/user-33.jpg"
|
|
||||||
],
|
|
||||||
status: {
|
|
||||||
text: "Active",
|
|
||||||
variant: "success"
|
|
||||||
},
|
|
||||||
budget: "4.5K"
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
// Status style variants
|
|
||||||
const statusVariants = {
|
|
||||||
success: "bg-success-50 text-success-700 dark:bg-success-500/15 dark:text-success-500",
|
|
||||||
warning: "bg-warning-50 text-warning-700 dark:bg-warning-500/15 dark:text-warning-400",
|
|
||||||
error: "bg-error-50 text-error-700 dark:bg-error-500/15 dark:text-error-500"
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="overflow-hidden rounded-xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
|
|
||||||
<div className="max-w-full overflow-x-auto">
|
|
||||||
<table className="min-w-full">
|
|
||||||
{/* Table Header */}
|
|
||||||
<thead>
|
|
||||||
<tr className="border-b border-gray-100 dark:border-gray-800">
|
|
||||||
<th className="px-5 py-3 sm:px-6">
|
|
||||||
<div className="flex items-center">
|
|
||||||
<p className="font-medium text-gray-500 text-theme-xs dark:text-gray-400">
|
|
||||||
User
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</th>
|
|
||||||
<th className="px-5 py-3 sm:px-6">
|
|
||||||
<div className="flex items-center">
|
|
||||||
<p className="font-medium text-gray-500 text-theme-xs dark:text-gray-400">
|
|
||||||
Project Name
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</th>
|
|
||||||
<th className="px-5 py-3 sm:px-6">
|
|
||||||
<div className="flex items-center">
|
|
||||||
<p className="font-medium text-gray-500 text-theme-xs dark:text-gray-400">
|
|
||||||
Team
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</th>
|
|
||||||
<th className="px-5 py-3 sm:px-6">
|
|
||||||
<div className="flex items-center">
|
|
||||||
<p className="font-medium text-gray-500 text-theme-xs dark:text-gray-400">
|
|
||||||
Status
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</th>
|
|
||||||
<th className="px-5 py-3 sm:px-6">
|
|
||||||
<div className="flex items-center">
|
|
||||||
<p className="font-medium text-gray-500 text-theme-xs dark:text-gray-400">
|
|
||||||
Budget
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
|
|
||||||
{/* Table Body */}
|
|
||||||
<tbody className="divide-y divide-gray-100 dark:divide-gray-800">
|
|
||||||
{tableData.map((item) => (
|
|
||||||
<tr key={item.id}>
|
|
||||||
{/* User Column */}
|
|
||||||
<td className="px-5 py-4 sm:px-6">
|
|
||||||
<div className="flex items-center">
|
|
||||||
<div className="flex items-center gap-3">
|
|
||||||
<div className="w-10 h-10 overflow-hidden rounded-full">
|
|
||||||
<Image
|
|
||||||
src={item.user.avatar}
|
|
||||||
alt={item.user.name}
|
|
||||||
width={40}
|
|
||||||
height={40}
|
|
||||||
className="object-cover"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<span className="block font-medium text-gray-800 text-theme-sm dark:text-white/90">
|
|
||||||
{item.user.name}
|
|
||||||
</span>
|
|
||||||
<span className="block text-gray-500 text-theme-xs dark:text-gray-400">
|
|
||||||
{item.user.role}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
|
|
||||||
{/* Project Column */}
|
|
||||||
<td className="px-5 py-4 sm:px-6">
|
|
||||||
<div className="flex items-center">
|
|
||||||
<p className="text-gray-500 text-theme-sm dark:text-gray-400">
|
|
||||||
{item.project}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
|
|
||||||
{/* Team Column */}
|
|
||||||
<td className="px-5 py-4 sm:px-6">
|
|
||||||
<div className="flex items-center">
|
|
||||||
<div className="flex -space-x-2">
|
|
||||||
{item.team.map((member, index) => (
|
|
||||||
<div
|
|
||||||
key={index}
|
|
||||||
className="w-6 h-6 overflow-hidden border-2 border-white rounded-full dark:border-gray-900"
|
|
||||||
>
|
|
||||||
<Image
|
|
||||||
src={member}
|
|
||||||
alt={`Team member ${index + 1}`}
|
|
||||||
width={24}
|
|
||||||
height={24}
|
|
||||||
className="object-cover"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
|
|
||||||
{/* Status Column */}
|
|
||||||
<td className="px-5 py-4 sm:px-6">
|
|
||||||
<div className="flex items-center">
|
|
||||||
<p
|
|
||||||
className={`rounded-full px-2 py-0.5 text-theme-xs font-medium ${statusVariants[item.status.variant]}`}
|
|
||||||
>
|
|
||||||
{item.status.text}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
|
|
||||||
{/* Budget Column */}
|
|
||||||
<td className="px-5 py-4 sm:px-6">
|
|
||||||
<div className="flex items-center">
|
|
||||||
<p className="text-gray-500 text-theme-sm dark:text-gray-400">
|
|
||||||
{item.budget}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
))}
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default TableSix;
|
|
||||||
@ -1,18 +0,0 @@
|
|||||||
'use client';
|
|
||||||
|
|
||||||
export default function YouTubeVideo() {
|
|
||||||
return (
|
|
||||||
<div className="overflow-hidden rounded-lg aspect-video">
|
|
||||||
<iframe
|
|
||||||
src="https://www.youtube.com/embed/dQw4w9WgXcQ"
|
|
||||||
title="YouTube video player"
|
|
||||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
|
||||||
allowFullScreen
|
|
||||||
className="w-full h-full"
|
|
||||||
// Next.js specific attributes
|
|
||||||
loading="lazy"
|
|
||||||
referrerPolicy="strict-origin-when-cross-origin"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,21 +0,0 @@
|
|||||||
'use client';
|
|
||||||
|
|
||||||
export default function YouTubeVideo4x3({
|
|
||||||
videoId = "dQw4w9WgXcQ",
|
|
||||||
title = "YouTube video player"
|
|
||||||
}) {
|
|
||||||
return (
|
|
||||||
<div className="aspect-[4/3] overflow-hidden rounded-lg">
|
|
||||||
<iframe
|
|
||||||
src={`https://www.youtube.com/embed/${videoId}`}
|
|
||||||
title={title}
|
|
||||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
|
||||||
allowFullScreen
|
|
||||||
className="w-full h-full"
|
|
||||||
frameBorder="0"
|
|
||||||
loading="lazy"
|
|
||||||
referrerPolicy="strict-origin-when-cross-origin"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,22 +0,0 @@
|
|||||||
'use client';
|
|
||||||
|
|
||||||
export default function SquareYouTubeVideo({
|
|
||||||
videoId = "dQw4w9WgXcQ",
|
|
||||||
title = "YouTube video player",
|
|
||||||
className = ""
|
|
||||||
}) {
|
|
||||||
return (
|
|
||||||
<div className={`overflow-hidden rounded-lg aspect-square ${className}`}>
|
|
||||||
<iframe
|
|
||||||
src={`https://www.youtube.com/embed/${videoId}`}
|
|
||||||
title={title}
|
|
||||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
|
||||||
allowFullScreen
|
|
||||||
className="w-full h-full"
|
|
||||||
frameBorder="0"
|
|
||||||
loading="lazy"
|
|
||||||
referrerPolicy="strict-origin-when-cross-origin"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,77 +0,0 @@
|
|||||||
'use client';
|
|
||||||
|
|
||||||
import { useEffect, useState } from 'react';
|
|
||||||
import Head from 'next/head';
|
|
||||||
import dynamic from 'next/dynamic';
|
|
||||||
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";
|
|
||||||
|
|
||||||
// Dynamically import the chart component with SSR disabled
|
|
||||||
const ChartOne = dynamic(
|
|
||||||
() => import("../../components/charts/chart-01"),
|
|
||||||
{ ssr: false }
|
|
||||||
);
|
|
||||||
|
|
||||||
export default function BarChartPage() {
|
|
||||||
const [darkMode, setDarkMode] = useState(false);
|
|
||||||
const [loaded, setLoaded] = useState(true);
|
|
||||||
|
|
||||||
// Initialize dark mode from localStorage
|
|
||||||
useEffect(() => {
|
|
||||||
const savedDarkMode = JSON.parse(localStorage.getItem('darkMode'));
|
|
||||||
if (savedDarkMode !== null) {
|
|
||||||
setDarkMode(savedDarkMode);
|
|
||||||
}
|
|
||||||
setLoaded(true); // Simulate loading completion
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
// Save dark mode preference when it changes
|
|
||||||
useEffect(() => {
|
|
||||||
localStorage.setItem('darkMode', JSON.stringify(darkMode));
|
|
||||||
}, [darkMode]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className={`flex h-screen overflow-hidden ${darkMode ? 'dark bg-gray-900' : ''}`}>
|
|
||||||
{/* Preloader */}
|
|
||||||
{!loaded && <Preloader />}
|
|
||||||
|
|
||||||
{/* Sidebar */}
|
|
||||||
{/* <Sidebar /> */}
|
|
||||||
|
|
||||||
{/* Content Area */}
|
|
||||||
<div className="relative flex flex-col flex-1 overflow-x-hidden overflow-y-auto">
|
|
||||||
{/* Small Device Overlay */}
|
|
||||||
<Overlay />
|
|
||||||
|
|
||||||
{/* 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="p-4 mx-auto max-w-screen-2xl md:p-6">
|
|
||||||
{/* Breadcrumb */}
|
|
||||||
<Breadcrumb pageName="Bar Chart" />
|
|
||||||
|
|
||||||
<div className="space-y-6">
|
|
||||||
<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">
|
|
||||||
Bar Chart 1
|
|
||||||
</h3>
|
|
||||||
</div>
|
|
||||||
<div className="p-5 border-t border-gray-100 dark:border-gray-800 sm:p-6">
|
|
||||||
{/* Chart One Component */}
|
|
||||||
<ChartOne />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,893 +0,0 @@
|
|||||||
"use client";
|
|
||||||
import { useState } from 'react';
|
|
||||||
|
|
||||||
const FormElementPage = () => {
|
|
||||||
const [checkboxStates, setCheckboxStates] = useState({
|
|
||||||
default: false,
|
|
||||||
checked: true,
|
|
||||||
disabled: true
|
|
||||||
});
|
|
||||||
|
|
||||||
const [radioStates, setRadioStates] = useState({
|
|
||||||
default: false,
|
|
||||||
secondary: true,
|
|
||||||
disabled: false
|
|
||||||
});
|
|
||||||
|
|
||||||
const [toggleStates, setToggleStates] = useState({
|
|
||||||
default: false,
|
|
||||||
checked: true,
|
|
||||||
disabled: false,
|
|
||||||
defaultDark: false,
|
|
||||||
checkedDark: true,
|
|
||||||
disabledDark: false
|
|
||||||
});
|
|
||||||
|
|
||||||
const [selectedCountry, setSelectedCountry] = useState('US');
|
|
||||||
const [phoneNumber, setPhoneNumber] = useState('');
|
|
||||||
|
|
||||||
const countryCodes = {
|
|
||||||
'US': '+1',
|
|
||||||
'GB': '+44',
|
|
||||||
'CA': '+1',
|
|
||||||
'AU': '+61'
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleCountryChange = (e) => {
|
|
||||||
const country = e.target.value;
|
|
||||||
setSelectedCountry(country);
|
|
||||||
setPhoneNumber(countryCodes[country]);
|
|
||||||
};
|
|
||||||
|
|
||||||
const copyToClipboard = () => {
|
|
||||||
const input = document.getElementById('website-input');
|
|
||||||
input.select();
|
|
||||||
document.execCommand('copy');
|
|
||||||
const copyText = document.getElementById('copy-text');
|
|
||||||
copyText.textContent = 'Copied!';
|
|
||||||
setTimeout(() => {
|
|
||||||
copyText.textContent = 'Copy';
|
|
||||||
}, 2000);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="mx-auto max-w-[--breakpoint-2xl] p-4 md:p-6">
|
|
||||||
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
|
|
||||||
<div className="space-y-6">
|
|
||||||
{/* Default Inputs */}
|
|
||||||
<div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
|
|
||||||
<div className="px-5 py-4 sm:px-6 sm:py-5">
|
|
||||||
<h3 className="text-base font-medium text-gray-800 dark:text-white/90">
|
|
||||||
Default Inputs
|
|
||||||
</h3>
|
|
||||||
</div>
|
|
||||||
<div className="space-y-6 border-t border-gray-100 p-5 sm:p-6 dark:border-gray-800">
|
|
||||||
{/* Input */}
|
|
||||||
<div>
|
|
||||||
<label className="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">
|
|
||||||
Input
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
className="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Input with Placeholder */}
|
|
||||||
<div>
|
|
||||||
<label className="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">
|
|
||||||
Input with Placeholder
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
placeholder="info@gmail.com"
|
|
||||||
className="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Select Input */}
|
|
||||||
<div>
|
|
||||||
<label className="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">
|
|
||||||
Select Input
|
|
||||||
</label>
|
|
||||||
<div className="relative z-20 bg-transparent">
|
|
||||||
<select className="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full appearance-none rounded-lg border border-gray-300 bg-transparent bg-none px-4 py-2.5 pr-11 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30">
|
|
||||||
<option value="" className="text-gray-700 dark:bg-gray-900 dark:text-gray-400">
|
|
||||||
Select Option
|
|
||||||
</option>
|
|
||||||
<option value="" className="text-gray-700 dark:bg-gray-900 dark:text-gray-400">
|
|
||||||
Marketing
|
|
||||||
</option>
|
|
||||||
<option value="" className="text-gray-700 dark:bg-gray-900 dark:text-gray-400">
|
|
||||||
Template
|
|
||||||
</option>
|
|
||||||
<option value="" className="text-gray-700 dark:bg-gray-900 dark:text-gray-400">
|
|
||||||
Development
|
|
||||||
</option>
|
|
||||||
</select>
|
|
||||||
<span className="pointer-events-none absolute top-1/2 right-4 z-30 -translate-y-1/2 text-gray-500 dark:text-gray-400">
|
|
||||||
<svg className="stroke-current" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M4.79175 7.396L10.0001 12.6043L15.2084 7.396" stroke="" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Password Input */}
|
|
||||||
<div>
|
|
||||||
<label className="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">
|
|
||||||
Password Input
|
|
||||||
</label>
|
|
||||||
<div className="relative">
|
|
||||||
<input
|
|
||||||
type="password"
|
|
||||||
placeholder="Enter your password"
|
|
||||||
className="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full appearance-none rounded-lg border border-gray-300 bg-transparent bg-none px-4 py-2.5 pr-11 pl-4 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30"
|
|
||||||
/>
|
|
||||||
<span className="absolute top-1/2 right-4 z-30 -translate-y-1/2 cursor-pointer">
|
|
||||||
<svg className="fill-gray-500 dark:fill-gray-400" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path fillRule="evenodd" clipRule="evenodd" d="M10.0002 13.8619C7.23361 13.8619 4.86803 12.1372 3.92328 9.70241C4.86804 7.26761 7.23361 5.54297 10.0002 5.54297C12.7667 5.54297 15.1323 7.26762 16.0771 9.70243C15.1323 12.1372 12.7667 13.8619 10.0002 13.8619ZM10.0002 4.04297C6.48191 4.04297 3.49489 6.30917 2.4155 9.4593C2.3615 9.61687 2.3615 9.78794 2.41549 9.94552C3.49488 13.0957 6.48191 15.3619 10.0002 15.3619C13.5184 15.3619 16.5055 13.0957 17.5849 9.94555C17.6389 9.78797 17.6389 9.6169 17.5849 9.45932C16.5055 6.30919 13.5184 4.04297 10.0002 4.04297ZM9.99151 7.84413C8.96527 7.84413 8.13333 8.67606 8.13333 9.70231C8.13333 10.7286 8.96527 11.5605 9.99151 11.5605H10.0064C11.0326 11.5605 11.8646 10.7286 11.8646 9.70231C11.8646 8.67606 11.0326 7.84413 10.0064 7.84413H9.99151Z" />
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Date Picker Input */}
|
|
||||||
<div>
|
|
||||||
<label className="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">
|
|
||||||
Date Picker Input
|
|
||||||
</label>
|
|
||||||
<div className="relative">
|
|
||||||
<input
|
|
||||||
type="date"
|
|
||||||
placeholder="Select date"
|
|
||||||
className="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full appearance-none rounded-lg border border-gray-300 bg-transparent bg-none px-4 py-2.5 pr-11 pl-4 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30"
|
|
||||||
/>
|
|
||||||
<span className="pointer-events-none absolute top-1/2 right-3 -translate-y-1/2 text-gray-500 dark:text-gray-400">
|
|
||||||
<svg className="fill-current" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path fillRule="evenodd" clipRule="evenodd" d="M10.0002 13.8619C7.23361 13.8619 4.86803 12.1372 3.92328 9.70241C4.86804 7.26761 7.23361 5.54297 10.0002 5.54297C12.7667 5.54297 15.1323 7.26762 16.0771 9.70243C15.1323 12.1372 12.7667 13.8619 10.0002 13.8619ZM10.0002 4.04297C6.48191 4.04297 3.49489 6.30917 2.4155 9.4593C2.3615 9.61687 2.3615 9.78794 2.41549 9.94552C3.49488 13.0957 6.48191 15.3619 10.0002 15.3619C13.5184 15.3619 16.5055 13.0957 17.5849 9.94555C17.6389 9.78797 17.6389 9.6169 17.5849 9.45932C16.5055 6.30919 13.5184 4.04297 10.0002 4.04297ZM9.99151 7.84413C8.96527 7.84413 8.13333 8.67606 8.13333 9.70231C8.13333 10.7286 8.96527 11.5605 9.99151 11.5605H10.0064C11.0326 11.5605 11.8646 10.7286 11.8646 9.70231C11.8646 8.67606 11.0326 7.84413 10.0064 7.84413H9.99151Z" />
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Time Select Input */}
|
|
||||||
<div>
|
|
||||||
<label className="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">
|
|
||||||
Time Select Input
|
|
||||||
</label>
|
|
||||||
<div className="relative">
|
|
||||||
<input
|
|
||||||
type="time"
|
|
||||||
placeholder="12:00 AM"
|
|
||||||
className="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full appearance-none rounded-lg border border-gray-300 bg-transparent bg-none px-4 py-2.5 pr-11 pl-4 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30"
|
|
||||||
/>
|
|
||||||
<span className="absolute top-1/2 right-3 -translate-y-1/2 text-gray-500 dark:text-gray-400">
|
|
||||||
<svg className="fill-current" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path fillRule="evenodd" clipRule="evenodd" d="M3.04175 9.99984C3.04175 6.15686 6.1571 3.0415 10.0001 3.0415C13.8431 3.0415 16.9584 6.15686 16.9584 9.99984C16.9584 13.8428 13.8431 16.9582 10.0001 16.9582C6.1571 16.9582 3.04175 13.8428 3.04175 9.99984ZM10.0001 1.5415C5.32867 1.5415 1.54175 5.32843 1.54175 9.99984C1.54175 14.6712 5.32867 18.4582 10.0001 18.4582C14.6715 18.4582 18.4584 14.6712 18.4584 9.99984C18.4584 5.32843 14.6715 1.5415 10.0001 1.5415ZM9.99998 10.7498C9.58577 10.7498 9.24998 10.4141 9.24998 9.99984V5.4165C9.24998 5.00229 9.58577 4.6665 9.99998 4.6665C10.4142 4.6665 10.75 5.00229 10.75 5.4165V9.24984H13.3334C13.7476 9.24984 14.0834 9.58562 14.0834 9.99984C14.0834 10.4141 13.7476 10.7498 13.3334 10.7498H10.0001H9.99998Z" />
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Input with Payment */}
|
|
||||||
<div>
|
|
||||||
<label className="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">
|
|
||||||
Input with Payment
|
|
||||||
</label>
|
|
||||||
<div className="relative">
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
placeholder="Card number"
|
|
||||||
className="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full appearance-none rounded-lg border border-gray-300 bg-transparent bg-none px-4 py-2.5 pl-[62px] text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30"
|
|
||||||
/>
|
|
||||||
<span className="absolute top-1/2 left-0 flex h-11 w-[46px] -translate-y-1/2 items-center justify-center border-r border-gray-200 dark:border-gray-800">
|
|
||||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<circle cx="6.25" cy="10" r="5.625" fill="#E80B26" />
|
|
||||||
<circle cx="13.75" cy="10" r="5.625" fill="#F59D31" />
|
|
||||||
<path d="M10 14.1924C11.1508 13.1625 11.875 11.6657 11.875 9.99979C11.875 8.33383 11.1508 6.8371 10 5.80713C8.84918 6.8371 8.125 8.33383 8.125 9.99979C8.125 11.6657 8.84918 13.1625 10 14.1924Z" fill="#FC6020" />
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Select Inputs */}
|
|
||||||
<div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
|
|
||||||
<div className="px-5 py-4 sm:px-6 sm:py-5">
|
|
||||||
<h3 className="text-base font-medium text-gray-800 dark:text-white/90">
|
|
||||||
Select Inputs
|
|
||||||
</h3>
|
|
||||||
</div>
|
|
||||||
<div className="space-y-6 border-t border-gray-100 p-5 sm:p-6 dark:border-gray-800">
|
|
||||||
{/* Select Input */}
|
|
||||||
<div>
|
|
||||||
<label className="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">
|
|
||||||
Select Input
|
|
||||||
</label>
|
|
||||||
<div className="relative z-20 bg-transparent">
|
|
||||||
<select className="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full appearance-none rounded-lg border border-gray-300 bg-transparent bg-none px-4 py-2.5 pr-11 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30">
|
|
||||||
<option value="" className="text-gray-700 dark:bg-gray-900 dark:text-gray-400">
|
|
||||||
Select Option
|
|
||||||
</option>
|
|
||||||
<option value="" className="text-gray-700 dark:bg-gray-900 dark:text-gray-400">
|
|
||||||
Marketing
|
|
||||||
</option>
|
|
||||||
<option value="" className="text-gray-700 dark:bg-gray-900 dark:text-gray-400">
|
|
||||||
Template
|
|
||||||
</option>
|
|
||||||
<option value="" className="text-gray-700 dark:bg-gray-900 dark:text-gray-400">
|
|
||||||
Development
|
|
||||||
</option>
|
|
||||||
</select>
|
|
||||||
<span className="pointer-events-none absolute top-1/2 right-4 z-30 -translate-y-1/2 text-gray-700 dark:text-gray-400">
|
|
||||||
<svg className="stroke-current" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M4.79175 7.396L10.0001 12.6043L15.2084 7.396" stroke="" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Multiple Select Options */}
|
|
||||||
<div>
|
|
||||||
<label className="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">
|
|
||||||
Multiple Select Options
|
|
||||||
</label>
|
|
||||||
<div>
|
|
||||||
<select className="hidden" id="select">
|
|
||||||
<option value="1">Option 2</option>
|
|
||||||
<option value="2">Option 3</option>
|
|
||||||
<option value="3">Option 4</option>
|
|
||||||
<option value="4">Option 5</option>
|
|
||||||
</select>
|
|
||||||
|
|
||||||
<div className="flex flex-col items-center">
|
|
||||||
<input name="values" type="hidden" />
|
|
||||||
<div className="relative z-20 inline-block w-full">
|
|
||||||
<div className="relative flex flex-col items-center">
|
|
||||||
<div className="w-full">
|
|
||||||
<div className="shadow-theme-xs focus:border-brand-300 focus:shadow-focus-ring dark:focus:border-brand-300 mb-2 flex h-11 rounded-lg border border-gray-300 py-1.5 pr-3 pl-3 outline-hidden transition dark:border-gray-700 dark:bg-gray-900">
|
|
||||||
<div className="flex flex-auto flex-wrap gap-2">
|
|
||||||
{/* Selected options would be rendered here */}
|
|
||||||
</div>
|
|
||||||
<div className="flex w-7 items-center py-1 pr-1 pl-1">
|
|
||||||
<button type="button" className="h-5 w-5 cursor-pointer text-gray-700 outline-hidden focus:outline-hidden dark:text-gray-400">
|
|
||||||
<svg className="stroke-current" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M4.79175 7.396L10.0001 12.6043L15.2084 7.396" stroke="" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="w-full px-4">
|
|
||||||
<div className="max-h-select absolute top-full left-0 z-40 w-full overflow-y-auto rounded-lg bg-white shadow-sm dark:bg-gray-900">
|
|
||||||
<div className="flex w-full flex-col">
|
|
||||||
{/* Options would be rendered here */}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Textarea input field */}
|
|
||||||
<div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
|
|
||||||
<div className="px-5 py-4 sm:px-6 sm:py-5">
|
|
||||||
<h3 className="text-base font-medium text-gray-800 dark:text-white/90">
|
|
||||||
Textarea input field
|
|
||||||
</h3>
|
|
||||||
</div>
|
|
||||||
<div className="space-y-6 border-t border-gray-100 p-5 sm:p-6 dark:border-gray-800">
|
|
||||||
{/* Description */}
|
|
||||||
<div>
|
|
||||||
<label className="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">
|
|
||||||
Description
|
|
||||||
</label>
|
|
||||||
<textarea
|
|
||||||
placeholder="Enter a description..."
|
|
||||||
type="text"
|
|
||||||
rows="6"
|
|
||||||
className="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30"
|
|
||||||
></textarea>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Disabled Description */}
|
|
||||||
<div>
|
|
||||||
<label className="mb-1.5 block text-sm font-medium text-gray-300 dark:text-white/15">
|
|
||||||
Description
|
|
||||||
</label>
|
|
||||||
<textarea
|
|
||||||
placeholder="Enter a description..."
|
|
||||||
type="text"
|
|
||||||
rows="6"
|
|
||||||
disabled
|
|
||||||
className="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:shadow-focus-ring dark:focus:border-brand-800 w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-0 focus:outline-hidden disabled:border-gray-100 disabled:bg-gray-50 disabled:placeholder:text-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:disabled:border-gray-800 dark:disabled:bg-white/[0.03] dark:disabled:placeholder:text-white/15"
|
|
||||||
></textarea>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Error Description */}
|
|
||||||
<div>
|
|
||||||
<label className="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">
|
|
||||||
Description
|
|
||||||
</label>
|
|
||||||
<textarea
|
|
||||||
placeholder="Enter a description..."
|
|
||||||
type="text"
|
|
||||||
rows="6"
|
|
||||||
className="dark:bg-dark-900 border-red-300 shadow-theme-xs focus:border-red-300 focus:ring-red-500/10 dark:border-error-700 dark:focus:border-error-800 w-full rounded-lg border bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30"
|
|
||||||
></textarea>
|
|
||||||
<p className="text-[11px] text-red-500">
|
|
||||||
Please enter a message in the textarea.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Input States */}
|
|
||||||
<div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
|
|
||||||
<div className="px-5 py-4 sm:px-6 sm:py-5">
|
|
||||||
<h3 className="text-base font-medium text-gray-800 dark:text-white/90">
|
|
||||||
Input States
|
|
||||||
</h3>
|
|
||||||
<p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
|
|
||||||
Validation styles for error, success and disabled states on form controls.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div className="space-y-6 border-t border-gray-100 p-5 sm:p-6 dark:border-gray-800">
|
|
||||||
{/* Error State */}
|
|
||||||
<div>
|
|
||||||
<label className="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">
|
|
||||||
Email
|
|
||||||
</label>
|
|
||||||
<div className="relative">
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
value="demoemail"
|
|
||||||
className="dark:bg-dark-900 border-red-300 shadow-theme-xs focus:border-red-300 focus:ring-red-500/10 dark:border-error-700 dark:focus:border-error-800 w-full rounded-lg border bg-transparent px-4 py-2.5 pr-10 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30"
|
|
||||||
/>
|
|
||||||
<span className="absolute top-1/2 right-3.5 -translate-y-1/2">
|
|
||||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path fillRule="evenodd" clipRule="evenodd" d="M2.58325 7.99967C2.58325 5.00813 5.00838 2.58301 7.99992 2.58301C10.9915 2.58301 13.4166 5.00813 13.4166 7.99967C13.4166 10.9912 10.9915 13.4163 7.99992 13.4163C5.00838 13.4163 2.58325 10.9912 2.58325 7.99967ZM7.99992 1.08301C4.17995 1.08301 1.08325 4.17971 1.08325 7.99967C1.08325 11.8196 4.17995 14.9163 7.99992 14.9163C11.8199 14.9163 14.9166 11.8196 14.9166 7.99967C14.9166 4.17971 11.8199 1.08301 7.99992 1.08301ZM7.09932 5.01639C7.09932 5.51345 7.50227 5.91639 7.99932 5.91639H7.99999C8.49705 5.91639 8.89999 5.51345 8.89999 5.01639C8.89999 4.51933 8.49705 4.11639 7.99999 4.11639H7.99932C7.50227 4.11639 7.09932 4.51933 7.09932 5.01639ZM7.99998 11.8306C7.58576 11.8306 7.24998 11.4948 7.24998 11.0806V7.29627C7.24998 6.88206 7.58576 6.54627 7.99998 6.54627C8.41419 6.54627 8.74998 6.88206 8.74998 7.29627V11.0806C8.74998 11.4948 8.41419 11.8306 7.99998 11.8306Z" fill="#F04438" />
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<p className="text-[11px] text-red-500 mt-1.5">
|
|
||||||
This is an error message.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Success State */}
|
|
||||||
<div>
|
|
||||||
<label className="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">
|
|
||||||
Email
|
|
||||||
</label>
|
|
||||||
<div className="relative">
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
value="demoemail@gmail.com"
|
|
||||||
className="dark:bg-dark-900 border-success-300 shadow-theme-xs focus:border-success-300 focus:ring-success-500/10 dark:border-success-700 dark:focus:border-success-800 w-full rounded-lg border bg-transparent px-4 py-2.5 pr-10 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30"
|
|
||||||
/>
|
|
||||||
<span className="absolute top-1/2 right-3.5 -translate-y-1/2">
|
|
||||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path fillRule="evenodd" clipRule="evenodd" d="M2.61792 8.00034C2.61792 5.02784 5.0276 2.61816 8.00009 2.61816C10.9726 2.61816 13.3823 5.02784 13.3823 8.00034C13.3823 10.9728 10.9726 13.3825 8.00009 13.3825C5.0276 13.3825 2.61792 10.9728 2.61792 8.00034ZM8.00009 1.11816C4.19917 1.11816 1.11792 4.19942 1.11792 8.00034C1.11792 11.8013 4.19917 14.8825 8.00009 14.8825C11.801 14.8825 14.8823 11.8013 14.8823 8.00034C14.8823 4.19942 11.801 1.11816 8.00009 1.11816ZM10.5192 7.266C10.8121 6.97311 10.8121 6.49823 10.5192 6.20534C10.2264 5.91245 9.75148 5.91245 9.45858 6.20534L7.45958 8.20434L6.54162 7.28638C6.24873 6.99349 5.77385 6.99349 5.48096 7.28638C5.18807 7.57927 5.18807 8.05415 5.48096 8.34704L6.92925 9.79533C7.0699 9.93599 7.26067 10.015 7.45958 10.015C7.6585 10.015 7.84926 9.93599 7.98991 9.79533L10.5192 7.266Z" fill="#12B76A" />
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<p className="text-[11px] text-green-700 mt-1.5">
|
|
||||||
This is an success message.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Disabled State */}
|
|
||||||
<div>
|
|
||||||
<label className="mb-1.5 block text-sm font-medium text-gray-300 dark:text-white/15">
|
|
||||||
Email
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
placeholder="info@gmail.com"
|
|
||||||
disabled
|
|
||||||
className="shadow-theme-xs focus:border-brand-300 focus:shadow-focus-ring dark:focus:border-brand-300 h-11 w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:outline-hidden disabled:border-gray-100 disabled:placeholder:text-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-gray-400 dark:disabled:border-gray-800 dark:disabled:placeholder:text-white/15"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-6">
|
|
||||||
{/* Input Group */}
|
|
||||||
<div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
|
|
||||||
<div className="px-5 py-4 sm:px-6 sm:py-5">
|
|
||||||
<h3 className="text-base font-medium text-gray-800 dark:text-white/90">
|
|
||||||
Input Group
|
|
||||||
</h3>
|
|
||||||
</div>
|
|
||||||
<div className="space-y-6 border-t border-gray-100 p-5 sm:p-6 dark:border-gray-800">
|
|
||||||
{/* Email with icon */}
|
|
||||||
<div>
|
|
||||||
<label className="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">
|
|
||||||
Email
|
|
||||||
</label>
|
|
||||||
<div className="relative">
|
|
||||||
<span className="absolute top-1/2 left-0 -translate-y-1/2 border-r border-gray-200 px-3.5 py-3 text-gray-500 dark:border-gray-800 dark:text-gray-400">
|
|
||||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path fillRule="evenodd" clipRule="evenodd" d="M3.04175 7.06206V14.375C3.04175 14.6511 3.26561 14.875 3.54175 14.875H16.4584C16.7346 14.875 16.9584 14.6511 16.9584 14.375V7.06245L11.1443 11.1168C10.457 11.5961 9.54373 11.5961 8.85638 11.1168L3.04175 7.06206ZM16.9584 5.19262C16.9584 5.19341 16.9584 5.1942 16.9584 5.19498V5.20026C16.9572 5.22216 16.946 5.24239 16.9279 5.25501L10.2864 9.88638C10.1145 10.0062 9.8862 10.0062 9.71437 9.88638L3.07255 5.25485C3.05342 5.24151 3.04202 5.21967 3.04202 5.19636C3.042 5.15695 3.07394 5.125 3.11335 5.125H16.8871C16.9253 5.125 16.9564 5.15494 16.9584 5.19262ZM18.4584 5.21428V14.375C18.4584 15.4796 17.563 16.375 16.4584 16.375H3.54175C2.43718 16.375 1.54175 15.4796 1.54175 14.375V5.19498C1.54175 5.1852 1.54194 5.17546 1.54231 5.16577C1.55858 4.31209 2.25571 3.625 3.11335 3.625H16.8871C17.7549 3.625 18.4584 4.32843 18.4585 5.19622C18.4585 5.20225 18.4585 5.20826 18.4584 5.21428Z" fill="#667085" />
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
placeholder="info@gmail.com"
|
|
||||||
className="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 pl-[62px] text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Phone with country code */}
|
|
||||||
<div>
|
|
||||||
<label className="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">
|
|
||||||
Phone
|
|
||||||
</label>
|
|
||||||
<div className="relative">
|
|
||||||
<div className="absolute">
|
|
||||||
<select
|
|
||||||
value={selectedCountry}
|
|
||||||
onChange={handleCountryChange}
|
|
||||||
className="focus:border-brand-300 focus:ring-brand-500/10 appearance-none rounded-l-lg border-0 border-r border-gray-200 bg-transparent bg-none py-3 pr-8 pl-3.5 leading-tight text-gray-700 focus:ring-3 focus:outline-hidden dark:border-gray-800 dark:text-gray-400"
|
|
||||||
>
|
|
||||||
<option value="US" className="text-gray-700 dark:bg-gray-900 dark:text-gray-400">
|
|
||||||
US
|
|
||||||
</option>
|
|
||||||
<option value="GB" className="text-gray-700 dark:bg-gray-900 dark:text-gray-400">
|
|
||||||
GB
|
|
||||||
</option>
|
|
||||||
<option value="CA" className="text-gray-700 dark:bg-gray-900 dark:text-gray-400">
|
|
||||||
CA
|
|
||||||
</option>
|
|
||||||
<option value="AU" className="text-gray-700 dark:bg-gray-900 dark:text-gray-400">
|
|
||||||
AU
|
|
||||||
</option>
|
|
||||||
</select>
|
|
||||||
<div className="pointer-events-none absolute inset-y-0 right-3 flex items-center text-gray-700 dark:text-gray-400">
|
|
||||||
<svg className="stroke-current" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M4.79175 7.396L10.0001 12.6043L15.2084 7.396" stroke="" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<input
|
|
||||||
placeholder="+1 (555) 000-0000"
|
|
||||||
value={phoneNumber}
|
|
||||||
onChange={(e) => setPhoneNumber(e.target.value)}
|
|
||||||
type="tel"
|
|
||||||
className="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full rounded-lg border border-gray-300 bg-transparent py-3 pr-4 pl-[84px] text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Phone with right country code */}
|
|
||||||
<div>
|
|
||||||
<label className="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">
|
|
||||||
Phone
|
|
||||||
</label>
|
|
||||||
<div className="relative">
|
|
||||||
<div className="absolute right-0">
|
|
||||||
<select
|
|
||||||
value={selectedCountry}
|
|
||||||
onChange={handleCountryChange}
|
|
||||||
className="focus:border-brand-300 focus:ring-brand-500/10 appearance-none rounded-r-lg border-0 border-l border-gray-200 bg-transparent bg-none py-3 pr-8 pl-3.5 leading-tight text-gray-700 focus:ring-3 focus:outline-hidden dark:border-gray-800 dark:text-gray-400"
|
|
||||||
>
|
|
||||||
<option value="US" className="text-gray-700 dark:bg-gray-900 dark:text-gray-400">
|
|
||||||
US
|
|
||||||
</option>
|
|
||||||
<option value="GB" className="text-gray-700 dark:bg-gray-900 dark:text-gray-400">
|
|
||||||
GB
|
|
||||||
</option>
|
|
||||||
<option value="CA" className="text-gray-700 dark:bg-gray-900 dark:text-gray-400">
|
|
||||||
CA
|
|
||||||
</option>
|
|
||||||
<option value="AU" className="text-gray-700 dark:bg-gray-900 dark:text-gray-400">
|
|
||||||
AU
|
|
||||||
</option>
|
|
||||||
</select>
|
|
||||||
<div className="pointer-events-none absolute inset-y-0 right-3 flex items-center text-gray-700 dark:text-gray-400">
|
|
||||||
<svg className="stroke-current" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M4.79175 7.396L10.0001 12.6043L15.2084 7.396" stroke="" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<input
|
|
||||||
placeholder="+1 (555) 000-0000"
|
|
||||||
value={phoneNumber}
|
|
||||||
onChange={(e) => setPhoneNumber(e.target.value)}
|
|
||||||
type="tel"
|
|
||||||
className="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full rounded-lg border border-gray-300 bg-transparent py-3 pr-[84px] pl-3 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* URL with prefix */}
|
|
||||||
<div>
|
|
||||||
<label className="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">
|
|
||||||
URL
|
|
||||||
</label>
|
|
||||||
<div className="relative">
|
|
||||||
<span className="absolute top-1/2 left-0 inline-flex h-11 -translate-y-1/2 items-center justify-center border-r border-gray-200 py-3 pr-3 pl-3.5 text-gray-500 dark:border-gray-800 dark:text-gray-400">
|
|
||||||
http://
|
|
||||||
</span>
|
|
||||||
<input
|
|
||||||
type="url"
|
|
||||||
placeholder="www.tailadmin.com"
|
|
||||||
className="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 pl-[90px] text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Website with copy button */}
|
|
||||||
<div id="copy-input">
|
|
||||||
<label className="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">
|
|
||||||
Website
|
|
||||||
</label>
|
|
||||||
<div className="relative">
|
|
||||||
<button
|
|
||||||
id="copy-button"
|
|
||||||
onClick={copyToClipboard}
|
|
||||||
className="absolute top-1/2 right-0 inline-flex -translate-y-1/2 cursor-pointer items-center gap-1 border-l border-gray-200 py-3 pr-3 pl-3.5 text-sm font-medium text-gray-700 dark:border-gray-800 dark:text-gray-400"
|
|
||||||
>
|
|
||||||
<svg className="fill-current" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path fillRule="evenodd" clipRule="evenodd" d="M6.58822 4.58398C6.58822 4.30784 6.81207 4.08398 7.08822 4.08398H15.4154C15.6915 4.08398 15.9154 4.30784 15.9154 4.58398L15.9154 12.9128C15.9154 13.189 15.6916 13.4128 15.4154 13.4128H7.08821C6.81207 13.4128 6.58822 13.189 6.58822 12.9128V4.58398ZM7.08822 2.58398C5.98365 2.58398 5.08822 3.47942 5.08822 4.58398V5.09416H4.58496C3.48039 5.09416 2.58496 5.98959 2.58496 7.09416V15.4161C2.58496 16.5207 3.48039 17.4161 4.58496 17.4161H12.9069C14.0115 17.4161 14.9069 16.5207 14.9069 15.4161L14.9069 14.9128H15.4154C16.52 14.9128 17.4154 14.0174 17.4154 12.9128L17.4154 4.58398C17.4154 3.47941 16.52 2.58398 15.4154 2.58398H7.08822ZM13.4069 14.9128H7.08821C5.98364 14.9128 5.08822 14.0174 5.08822 12.9128V6.59416H4.58496C4.30882 6.59416 4.08496 6.81801 4.08496 7.09416V15.4161C4.08496 15.6922 4.30882 15.9161 4.58496 15.9161H12.9069C13.183 15.9161 13.4069 15.6922 13.4069 15.4161L13.4069 14.9128Z" fill="" />
|
|
||||||
</svg>
|
|
||||||
<div id="copy-text">Copy</div>
|
|
||||||
</button>
|
|
||||||
<input
|
|
||||||
value="www.tailadmin.com"
|
|
||||||
type="url"
|
|
||||||
id="website-input"
|
|
||||||
className="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full rounded-lg border border-gray-300 bg-transparent py-3 pr-[90px] pl-4 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* File Input */}
|
|
||||||
<div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
|
|
||||||
<div className="px-5 py-4 sm:px-6 sm:py-5">
|
|
||||||
<h3 className="text-base font-medium text-gray-800 dark:text-white/90">
|
|
||||||
File Input
|
|
||||||
</h3>
|
|
||||||
</div>
|
|
||||||
<div className="space-y-6 border-t border-gray-100 p-5 sm:p-6 dark:border-gray-800">
|
|
||||||
<div>
|
|
||||||
<label className="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">
|
|
||||||
Upload file
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="file"
|
|
||||||
className="focus:border-ring-brand-300 shadow-theme-xs focus:file:ring-brand-300 h-11 w-full overflow-hidden rounded-lg border border-gray-300 bg-transparent text-sm text-gray-500 transition-colors file:mr-5 file:border-collapse file:cursor-pointer file:rounded-l-lg file:border-0 file:border-r file:border-solid file:border-gray-200 file:bg-gray-50 file:py-3 file:pr-3 file:pl-3.5 file:text-sm file:text-gray-700 placeholder:text-gray-400 hover:file:bg-gray-100 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-gray-400 dark:text-white/90 dark:file:border-gray-800 dark:file:bg-white/[0.03] dark:file:text-gray-400 dark:placeholder:text-gray-400"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Checkboxes */}
|
|
||||||
<div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
|
|
||||||
<div className="px-5 py-4 sm:px-6 sm:py-5">
|
|
||||||
<h3 className="text-base font-medium text-gray-800 dark:text-white/90">
|
|
||||||
Checkboxes
|
|
||||||
</h3>
|
|
||||||
</div>
|
|
||||||
<div className="space-y-6 border-t border-gray-100 p-5 sm:p-6 dark:border-gray-800">
|
|
||||||
<div className="flex flex-wrap items-center gap-8">
|
|
||||||
{/* Default Checkbox */}
|
|
||||||
<div>
|
|
||||||
<label htmlFor="checkboxLabelOne" className="flex cursor-pointer items-center text-sm font-medium text-gray-700 select-none dark:text-gray-400">
|
|
||||||
<div className="relative">
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
id="checkboxLabelOne"
|
|
||||||
className="sr-only"
|
|
||||||
checked={checkboxStates.default}
|
|
||||||
onChange={() => setCheckboxStates({...checkboxStates, default: !checkboxStates.default})}
|
|
||||||
/>
|
|
||||||
<div className={`hover:border-brand-500 dark:hover:border-brand-500 mr-3 flex h-5 w-5 items-center justify-center rounded-md border-[1.25px] ${checkboxStates.default ? 'border-brand-500 bg-brand-500' : 'bg-transparent border-gray-300 dark:border-gray-700'}`}>
|
|
||||||
<span className={checkboxStates.default ? '' : 'opacity-0'}>
|
|
||||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M11.6666 3.5L5.24992 9.91667L2.33325 7" stroke="white" strokeWidth="1.94437" strokeLinecap="round" strokeLinejoin="round" />
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
Default
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Checked Checkbox */}
|
|
||||||
<div>
|
|
||||||
<label htmlFor="checkboxLabelTwo" className="flex cursor-pointer items-center text-sm font-medium text-gray-700 select-none dark:text-gray-400">
|
|
||||||
<div className="relative">
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
id="checkboxLabelTwo"
|
|
||||||
className="sr-only"
|
|
||||||
checked={checkboxStates.checked}
|
|
||||||
onChange={() => setCheckboxStates({...checkboxStates, checked: !checkboxStates.checked})}
|
|
||||||
/>
|
|
||||||
<div className={`hover:border-brand-500 dark:hover:border-brand-500 mr-3 flex h-5 w-5 items-center justify-center rounded-md border-[1.25px] ${checkboxStates.checked ? 'border-brand-500 bg-brand-500' : 'bg-transparent border-gray-300 dark:border-gray-700'}`}>
|
|
||||||
<span className={checkboxStates.checked ? '' : 'opacity-0'}>
|
|
||||||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M11.6666 3.5L5.24992 9.91667L2.33325 7" stroke="white" strokeWidth="1.94437" strokeLinecap="round" strokeLinejoin="round" />
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
Checked
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Disabled Checkbox */}
|
|
||||||
<div>
|
|
||||||
<label htmlFor="checkboxLabelThree" className="flex cursor-pointer items-center text-sm font-medium text-gray-300 select-none dark:text-gray-700">
|
|
||||||
<div className="relative">
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
id="checkboxLabelThree"
|
|
||||||
className="peer sr-only"
|
|
||||||
checked={checkboxStates.disabled}
|
|
||||||
onChange={() => setCheckboxStates({...checkboxStates, disabled: !checkboxStates.disabled})}
|
|
||||||
disabled
|
|
||||||
/>
|
|
||||||
<div className={`mr-3 flex h-5 w-5 items-center justify-center rounded-md border-[1.25px] ${checkboxStates.disabled ? 'bg-transparent border-gray-200 dark:border-gray-800' : 'border-brand-500 bg-brand-500'}`}>
|
|
||||||
<span className={checkboxStates.disabled ? '' : 'opacity-0'}>
|
|
||||||
<svg className="stroke-gray-200 dark:stroke-gray-800" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M11.6666 3.5L5.24992 9.91667L2.33325 7" stroke="" strokeWidth="2.33333" strokeLinecap="round" strokeLinejoin="round" />
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
Disabled
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Radio Buttons */}
|
|
||||||
<div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
|
|
||||||
<div className="px-5 py-4 sm:px-6 sm:py-5">
|
|
||||||
<h3 className="text-base font-medium text-gray-800 dark:text-white/90">
|
|
||||||
Radio Buttons
|
|
||||||
</h3>
|
|
||||||
</div>
|
|
||||||
<div className="space-y-6 border-t border-gray-100 p-5 sm:p-6 dark:border-gray-800">
|
|
||||||
<div className="flex flex-wrap items-center gap-8">
|
|
||||||
{/* Default Radio */}
|
|
||||||
<div>
|
|
||||||
<label htmlFor="radioLabelOne" className="flex cursor-pointer items-center text-sm font-medium text-gray-700 select-none dark:text-gray-400">
|
|
||||||
<div className="relative">
|
|
||||||
<input
|
|
||||||
type="radio"
|
|
||||||
id="radioLabelOne"
|
|
||||||
name="radioGroup"
|
|
||||||
className="sr-only"
|
|
||||||
checked={radioStates.default}
|
|
||||||
onChange={() => setRadioStates({...radioStates, default: !radioStates.default})}
|
|
||||||
/>
|
|
||||||
<div className={`hover:border-brand-500 dark:hover:border-brand-500 mr-3 flex h-5 w-5 items-center justify-center rounded-full border-[1.25px] ${radioStates.default ? 'border-brand-500 bg-brand-500' : 'bg-transparent border-gray-300 dark:border-gray-700'}`}>
|
|
||||||
<span className={`h-2 w-2 rounded-full ${radioStates.default ? 'bg-white' : 'bg-white dark:bg-[#171f2e]'}`}></span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
Default
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Secondary Radio */}
|
|
||||||
<div>
|
|
||||||
<label htmlFor="radioLabelTwo" className="flex cursor-pointer items-center text-sm font-medium text-gray-700 select-none dark:text-gray-400">
|
|
||||||
<div className="relative">
|
|
||||||
<input
|
|
||||||
type="radio"
|
|
||||||
id="radioLabelTwo"
|
|
||||||
name="radioGroup"
|
|
||||||
className="sr-only"
|
|
||||||
checked={radioStates.secondary}
|
|
||||||
onChange={() => setRadioStates({...radioStates, secondary: !radioStates.secondary})}
|
|
||||||
/>
|
|
||||||
<div className={`hover:border-brand-500 dark:hover:border-brand-500 mr-3 flex h-5 w-5 items-center justify-center rounded-full border-[1.25px] ${radioStates.secondary ? 'border-brand-500 bg-brand-500' : 'bg-transparent border-gray-300 dark:border-gray-700'}`}>
|
|
||||||
<span className={`h-2 w-2 rounded-full ${radioStates.secondary ? 'bg-white' : 'bg-white dark:bg-[#171f2e]'}`}></span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
Secondary
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Disabled Radio */}
|
|
||||||
<div>
|
|
||||||
<label htmlFor="radioLabelThree" className="flex cursor-pointer items-center text-sm font-medium text-gray-300 select-none dark:text-gray-700">
|
|
||||||
<div className="relative">
|
|
||||||
<input
|
|
||||||
type="radio"
|
|
||||||
id="radioLabelThree"
|
|
||||||
name="radioGroup"
|
|
||||||
className="peer sr-only"
|
|
||||||
checked={radioStates.disabled}
|
|
||||||
onChange={() => setRadioStates({...radioStates, disabled: !radioStates.disabled})}
|
|
||||||
disabled
|
|
||||||
/>
|
|
||||||
<div className={`mr-3 flex h-5 w-5 items-center justify-center rounded-full border-[1.25px] ${radioStates.disabled ? 'bg-transparent border-gray-300 dark:border-gray-700' : 'border-brand-500 bg-brand-500'}`}>
|
|
||||||
<span className={`h-2 w-2 rounded-full ${radioStates.disabled ? 'bg-white' : 'bg-white dark:bg-[#171f2e]'}`}></span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
Disabled Secondary
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Toggle switch input */}
|
|
||||||
<div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
|
|
||||||
<div className="px-5 py-4 sm:px-6 sm:py-5">
|
|
||||||
<h3 className="text-base font-medium text-gray-800 dark:text-white/90">
|
|
||||||
Toggle switch input
|
|
||||||
</h3>
|
|
||||||
</div>
|
|
||||||
<div className="space-y-6 border-t border-gray-100 p-5 sm:p-6 dark:border-gray-800">
|
|
||||||
<div className="mb-6 flex flex-wrap items-center gap-6 sm:gap-8">
|
|
||||||
{/* Default Toggle */}
|
|
||||||
<div>
|
|
||||||
<label htmlFor="toggle1" className="flex cursor-pointer items-center gap-3 text-sm font-medium text-gray-700 select-none dark:text-gray-400">
|
|
||||||
<div className="relative">
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
id="toggle1"
|
|
||||||
className="sr-only"
|
|
||||||
checked={toggleStates.default}
|
|
||||||
onChange={() => setToggleStates({...toggleStates, default: !toggleStates.default})}
|
|
||||||
/>
|
|
||||||
<div className={`block h-6 w-11 rounded-full ${toggleStates.default ? 'bg-brand-500 dark:bg-brand-500' : 'bg-gray-200 dark:bg-white/10'}`}></div>
|
|
||||||
<div className={`shadow-theme-sm absolute top-0.5 left-0.5 h-5 w-5 rounded-full bg-white duration-300 ease-linear ${toggleStates.default ? 'translate-x-full' : 'translate-x-0'}`}></div>
|
|
||||||
</div>
|
|
||||||
Default
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Checked Toggle */}
|
|
||||||
<div>
|
|
||||||
<label htmlFor="toggle2" className="flex cursor-pointer items-center gap-3 text-sm font-medium text-gray-700 select-none dark:text-gray-400">
|
|
||||||
<div className="relative">
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
id="toggle2"
|
|
||||||
className="sr-only"
|
|
||||||
checked={toggleStates.checked}
|
|
||||||
onChange={() => setToggleStates({...toggleStates, checked: !toggleStates.checked})}
|
|
||||||
/>
|
|
||||||
<div className={`block h-6 w-11 rounded-full ${toggleStates.checked ? 'bg-brand-500 dark:bg-brand-500' : 'bg-gray-200 dark:bg-white/10'}`}></div>
|
|
||||||
<div className={`shadow-theme-sm absolute top-0.5 left-0.5 h-5 w-5 rounded-full bg-white duration-300 ease-linear ${toggleStates.checked ? 'translate-x-full' : 'translate-x-0'}`}></div>
|
|
||||||
</div>
|
|
||||||
Checked
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Disabled Toggle */}
|
|
||||||
<div>
|
|
||||||
<label htmlFor="toggle3" className="flex cursor-pointer items-center gap-3 text-sm font-medium text-gray-400 select-none">
|
|
||||||
<div className="relative">
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
id="toggle3"
|
|
||||||
className="sr-only"
|
|
||||||
checked={toggleStates.disabled}
|
|
||||||
onChange={() => setToggleStates({...toggleStates, disabled: !toggleStates.disabled})}
|
|
||||||
disabled
|
|
||||||
/>
|
|
||||||
<div className={`block h-6 w-11 rounded-full ${toggleStates.disabled ? 'bg-brand-500 dark:bg-brand-500' : 'bg-gray-100 dark:bg-gray-800'}`}></div>
|
|
||||||
<div className={`shadow-theme-sm absolute top-0.5 left-0.5 h-5 w-5 rounded-full bg-gray-50 duration-300 ease-linear ${toggleStates.disabled ? 'translate-x-full' : 'translate-x-0'}`}></div>
|
|
||||||
</div>
|
|
||||||
Disabled
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex flex-wrap items-center gap-6 sm:gap-8">
|
|
||||||
{/* Default Dark Toggle */}
|
|
||||||
<div>
|
|
||||||
<label htmlFor="toggle11" className="flex cursor-pointer items-center gap-3 text-sm font-medium text-gray-700 select-none dark:text-gray-400">
|
|
||||||
<div className="relative">
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
id="toggle11"
|
|
||||||
className="sr-only"
|
|
||||||
checked={toggleStates.defaultDark}
|
|
||||||
onChange={() => setToggleStates({...toggleStates, defaultDark: !toggleStates.defaultDark})}
|
|
||||||
/>
|
|
||||||
<div className="block h-6 w-11 rounded-full bg-gray-700 dark:bg-white/10"></div>
|
|
||||||
<div className={`shadow-theme-sm absolute top-0.5 left-0.5 h-5 w-5 rounded-full bg-white duration-300 ease-linear ${toggleStates.defaultDark ? 'translate-x-full' : 'translate-x-0'}`}></div>
|
|
||||||
</div>
|
|
||||||
Default
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Checked Dark Toggle */}
|
|
||||||
<div>
|
|
||||||
<label htmlFor="toggle22" className="flex cursor-pointer items-center gap-3 text-sm font-medium text-gray-700 select-none dark:text-gray-400">
|
|
||||||
<div className="relative">
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
id="toggle22"
|
|
||||||
className="sr-only"
|
|
||||||
checked={toggleStates.checkedDark}
|
|
||||||
onChange={() => setToggleStates({...toggleStates, checkedDark: !toggleStates.checkedDark})}
|
|
||||||
/>
|
|
||||||
<div className="block h-6 w-11 rounded-full bg-gray-700 dark:bg-white/10"></div>
|
|
||||||
<div className={`shadow-theme-sm absolute top-0.5 left-0.5 h-5 w-5 rounded-full bg-white duration-300 ease-linear ${toggleStates.checkedDark ? 'translate-x-full' : 'translate-x-0'}`}></div>
|
|
||||||
</div>
|
|
||||||
Checked
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Disabled Dark Toggle */}
|
|
||||||
<div>
|
|
||||||
<label htmlFor="toggle33" className="flex cursor-pointer items-center gap-3 text-sm font-medium text-gray-400 select-none">
|
|
||||||
<div className="relative">
|
|
||||||
<input
|
|
||||||
type="checkbox"
|
|
||||||
id="toggle33"
|
|
||||||
className="sr-only"
|
|
||||||
checked={toggleStates.disabledDark}
|
|
||||||
onChange={() => setToggleStates({...toggleStates, disabledDark: !toggleStates.disabledDark})}
|
|
||||||
disabled
|
|
||||||
/>
|
|
||||||
<div className="block h-6 w-11 rounded-full bg-gray-100 dark:bg-gray-800"></div>
|
|
||||||
<div className={`shadow-theme-sm absolute top-0.5 left-0.5 h-5 w-5 rounded-full bg-gray-50 duration-300 ease-linear ${toggleStates.disabledDark ? 'translate-x-full' : 'translate-x-0'}`}></div>
|
|
||||||
</div>
|
|
||||||
Disabled
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Dropzone */}
|
|
||||||
<div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
|
|
||||||
<div className="px-5 py-4 sm:px-6 sm:py-5">
|
|
||||||
<h3 className="text-base font-medium text-gray-800 dark:text-white/90">
|
|
||||||
Dropzone
|
|
||||||
</h3>
|
|
||||||
</div>
|
|
||||||
<div className="space-y-6 border-t border-gray-100 p-5 sm:p-6 dark:border-gray-800">
|
|
||||||
<div className="hover:border-brand-500! dark:hover:border-brand-500! rounded-xl border border-dashed! border-gray-300! bg-gray-50 p-7 lg:p-10 dark:border-gray-700! dark:bg-gray-900">
|
|
||||||
<div className="dz-message m-0!">
|
|
||||||
<div className="mb-[22px] flex justify-center">
|
|
||||||
<div className="flex h-[68px] w-[68px] items-center justify-center rounded-full bg-gray-200 text-gray-700 dark:bg-gray-800 dark:text-gray-400">
|
|
||||||
<svg className="fill-current" width="29" height="28" viewBox="0 0 29 28" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path fillRule="evenodd" clipRule="evenodd" d="M14.5019 3.91699C14.2852 3.91699 14.0899 4.00891 13.953 4.15589L8.57363 9.53186C8.28065 9.82466 8.2805 10.2995 8.5733 10.5925C8.8661 10.8855 9.34097 10.8857 9.63396 10.5929L13.7519 6.47752V18.667C13.7519 19.0812 14.0877 19.417 14.5019 19.417C14.9161 19.417 15.2519 19.0812 15.2519 18.667V6.48234L19.3653 10.5929C19.6583 10.8857 20.1332 10.8855 20.426 10.5925C20.7188 10.2995 20.7186 9.82463 20.4256 9.53184L15.0838 4.19378C14.9463 4.02488 14.7367 3.91699 14.5019 3.91699ZM5.91626 18.667C5.91626 18.2528 5.58047 17.917 5.16626 17.917C4.75205 17.917 4.41626 18.2528 4.41626 18.667V21.8337C4.41626 23.0763 5.42362 24.0837 6.66626 24.0837H22.3339C23.5766 24.0837 24.5839 23.0763 24.5839 21.8337V18.667C24.5839 18.2528 24.2482 17.917 23.8339 17.917C23.4197 17.917 23.0839 18.2528 23.0839 18.667V21.8337C23.0839 22.2479 22.7482 22.5837 22.3339 22.5837H6.66626C6.25205 22.5837 5.91626 22.2479 5.91626 21.8337V18.667Z" fill="" />
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h4 className="text-theme-xl mb-3 font-semibold text-gray-800 dark:text-white/90">
|
|
||||||
Drop File Here
|
|
||||||
</h4>
|
|
||||||
<span className="mx-auto mb-5 block w-full max-w-[290px] text-sm text-gray-700 dark:text-gray-400">
|
|
||||||
Drag and drop your PNG, JPG, WebP, SVG images here or browse
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<span className="text-theme-sm text-brand-500 font-medium underline">
|
|
||||||
Browse File
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default FormElementPage;
|
|
||||||
@ -1,90 +0,0 @@
|
|||||||
// app/page.js or app/dashboard/page.js (depending on your structure)
|
|
||||||
'use client'; // This is needed because we'll use client-side state
|
|
||||||
|
|
||||||
import { useEffect, useState } from 'react';
|
|
||||||
import dynamic from 'next/dynamic';
|
|
||||||
|
|
||||||
// Dynamically import the chart component to avoid SSR issues
|
|
||||||
const LineChart = dynamic(() => import("../../components/charts/LineChart"), {
|
|
||||||
ssr: false
|
|
||||||
});
|
|
||||||
|
|
||||||
export default function LineChartPage() {
|
|
||||||
const [darkMode, setDarkMode] = useState(false);
|
|
||||||
const [isLoaded, setIsLoaded] = useState(false);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
// Load dark mode preference from localStorage
|
|
||||||
const savedDarkMode = JSON.parse(localStorage.getItem('darkMode'));
|
|
||||||
if (savedDarkMode !== null) {
|
|
||||||
setDarkMode(savedDarkMode);
|
|
||||||
}
|
|
||||||
setIsLoaded(true);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
// Save dark mode preference to localStorage when it changes
|
|
||||||
localStorage.setItem('darkMode', JSON.stringify(darkMode));
|
|
||||||
}, [darkMode]);
|
|
||||||
|
|
||||||
if (!isLoaded) {
|
|
||||||
// Preloader while checking dark mode preference
|
|
||||||
return (
|
|
||||||
<div className="flex items-center justify-center h-screen">
|
|
||||||
<div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-primary"></div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className={`flex h-screen overflow-hidden ${darkMode ? 'dark bg-gray-900' : ''}`}>
|
|
||||||
{/* Main Content Area */}
|
|
||||||
<div className="relative flex flex-col flex-1 overflow-x-hidden overflow-y-auto">
|
|
||||||
{/* Main Content */}
|
|
||||||
<main>
|
|
||||||
<div className="p-4 mx-auto max-w-screen-2xl md:p-6">
|
|
||||||
{/* Breadcrumb */}
|
|
||||||
<div className="mb-6">
|
|
||||||
<nav className="flex" aria-label="Breadcrumb">
|
|
||||||
<ol className="inline-flex items-center space-x-1 md:space-x-2">
|
|
||||||
<li className="inline-flex items-center">
|
|
||||||
<a href="#" className="inline-flex items-center text-sm font-medium text-gray-700 hover:text-blue-600 dark:text-gray-400 dark:hover:text-white">
|
|
||||||
Dashboard
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li aria-current="page">
|
|
||||||
<div className="flex items-center">
|
|
||||||
<svg className="w-3 h-3 mx-1 text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
|
|
||||||
<path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="m1 9 4-4-4-4"/>
|
|
||||||
</svg>
|
|
||||||
<span className="ml-1 text-sm font-medium text-gray-500 md:ml-2 dark:text-gray-400">Line Chart</span>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</ol>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Chart Section */}
|
|
||||||
<div className="space-y-6">
|
|
||||||
<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">
|
|
||||||
Line Chart 1
|
|
||||||
</h3>
|
|
||||||
</div>
|
|
||||||
<div className="p-5 border-t border-gray-100 dark:border-gray-800 sm:p-6">
|
|
||||||
{/* Line Chart Component */}
|
|
||||||
<div className="max-w-full overflow-x-auto custom-scrollbar">
|
|
||||||
<div className="min-w-[1000px]">
|
|
||||||
<LineChart />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -6,8 +6,7 @@ import Button1 from "../../ui/buttons/button1";
|
|||||||
import { account } from "../../lib/appwrite";
|
import { account } from "../../lib/appwrite";
|
||||||
import { useRouter } from "next/navigation";
|
import { useRouter } from "next/navigation";
|
||||||
import { useAuth } from "../../context/AuthContext";
|
import { useAuth } from "../../context/AuthContext";
|
||||||
import GridShape from "../../components/common/GridShape";
|
|
||||||
import Image from "next/image";
|
|
||||||
|
|
||||||
|
|
||||||
export default function SignInPage() {
|
export default function SignInPage() {
|
||||||
|
|||||||
@ -1,81 +0,0 @@
|
|||||||
"use client";
|
|
||||||
import { useEffect, useState } from 'react';
|
|
||||||
import dynamic from 'next/dynamic';
|
|
||||||
|
|
||||||
// Dynamically import components with no SSR
|
|
||||||
const Preloader = dynamic(() => import("../../components/partials/preloaders"), { ssr: false });
|
|
||||||
const Sidebar = dynamic(() => import("../../components/Sidebar"), { ssr: false });
|
|
||||||
const Overlay = dynamic(() => import("../../components/partials/overlay"), { ssr: false });
|
|
||||||
const Header = dynamic(() => import("../../components/partials/header"), { ssr: false });
|
|
||||||
const Breadcrumb = dynamic(() => import("../../components/partials/breadcrumb"), { ssr: false });
|
|
||||||
const TableSix = dynamic(() => import("../../components/partials/table/TableSix"), { ssr: false });
|
|
||||||
|
|
||||||
export default function BasicTables() {
|
|
||||||
const [darkMode, setDarkMode] = useState(false);
|
|
||||||
const [loaded, setLoaded] = useState(false);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
// Initialize dark mode from localStorage
|
|
||||||
const savedDarkMode = JSON.parse(localStorage.getItem('darkMode'));
|
|
||||||
if (savedDarkMode !== null) {
|
|
||||||
setDarkMode(savedDarkMode);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Simulate loading completion
|
|
||||||
const timer = setTimeout(() => setLoaded(true), 1000);
|
|
||||||
return () => clearTimeout(timer);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
// Save dark mode preference to localStorage
|
|
||||||
localStorage.setItem('darkMode', JSON.stringify(darkMode));
|
|
||||||
}, [darkMode]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className={`${darkMode ? 'dark bg-gray-900' : ''}`}>
|
|
||||||
|
|
||||||
{/* Preloader */}
|
|
||||||
{!loaded && <Preloader />}
|
|
||||||
|
|
||||||
{/* Page Wrapper */}
|
|
||||||
<div className="flex h-screen overflow-hidden">
|
|
||||||
{/* Sidebar */}
|
|
||||||
{/* <Sidebar activePage="basicTables" darkMode={darkMode} setDarkMode={setDarkMode} /> */}
|
|
||||||
|
|
||||||
{/* Content Area */}
|
|
||||||
<div className="relative flex flex-1 flex-col overflow-y-auto overflow-x-hidden">
|
|
||||||
{/* Small Device Overlay */}
|
|
||||||
<Overlay />
|
|
||||||
|
|
||||||
{/* 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 */}
|
|
||||||
<div>
|
|
||||||
<Breadcrumb pageName="Basic Tables" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-5 sm:space-y-6">
|
|
||||||
<div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
|
|
||||||
<div className="px-5 py-4 sm:px-6 sm:py-5">
|
|
||||||
<h3 className="text-base font-medium text-gray-800 dark:text-white/90">
|
|
||||||
Basic Table 1
|
|
||||||
</h3>
|
|
||||||
</div>
|
|
||||||
<div className="border-t border-gray-100 p-5 dark:border-gray-800 sm:p-6">
|
|
||||||
{/* Table Six */}
|
|
||||||
<TableSix />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,47 +0,0 @@
|
|||||||
import Image01 from "../../components/partials/grid-images/image01";
|
|
||||||
import Image02 from "../../components/partials/grid-images/image02";
|
|
||||||
import Image03 from "../../components/partials/grid-images/image03";
|
|
||||||
|
|
||||||
export default function ImagesPage() {
|
|
||||||
return (
|
|
||||||
<div className="p-4 mx-auto max-w-[--breakpoint-2xl] md:p-6">
|
|
||||||
<div className="space-y-5 sm:space-y-6">
|
|
||||||
{/* Responsive Image Section */}
|
|
||||||
<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">
|
|
||||||
Responsive image
|
|
||||||
</h3>
|
|
||||||
</div>
|
|
||||||
<div className="p-4 border-t border-gray-100 dark:border-gray-800 sm:p-6">
|
|
||||||
<Image01 />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 2 Grid Images Section */}
|
|
||||||
<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">
|
|
||||||
Image in 2 Grid
|
|
||||||
</h3>
|
|
||||||
</div>
|
|
||||||
<div className="p-4 border-t border-gray-100 dark:border-gray-800 sm:p-6">
|
|
||||||
<Image02 />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* 3 Grid Images Section */}
|
|
||||||
<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">
|
|
||||||
Image in 3 Grid
|
|
||||||
</h3>
|
|
||||||
</div>
|
|
||||||
<div className="p-4 border-t border-gray-100 dark:border-gray-800 sm:p-6">
|
|
||||||
<Image03 />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,112 +0,0 @@
|
|||||||
'use client';
|
|
||||||
|
|
||||||
import { useState, useEffect } from 'react';
|
|
||||||
import Head from 'next/head';
|
|
||||||
import Preloader from "../../components/partials/preloaders";
|
|
||||||
// import Sidebar from "../../components/partials/header";
|
|
||||||
import Overlay from "../../components/partials/overlay";
|
|
||||||
// import Header from '../../components/partials/Header';
|
|
||||||
import Breadcrumb from "../../components/partials/breadcrumb";
|
|
||||||
import Video01 from "../../components/partials/video/video-01";
|
|
||||||
import Video02 from "../../components/partials/video/video-02";
|
|
||||||
import Video04 from "../../components/partials/video/video-04";
|
|
||||||
|
|
||||||
export default function VideosPage() {
|
|
||||||
const [darkMode, setDarkMode] = useState(false);
|
|
||||||
const [loaded, setLoaded] = useState(false);
|
|
||||||
const [sidebarToggle, setSidebarToggle] = useState(false);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const savedDarkMode = JSON.parse(
|
|
||||||
localStorage.getItem('darkMode') || 'false'
|
|
||||||
);
|
|
||||||
setDarkMode(savedDarkMode);
|
|
||||||
setLoaded(true);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
localStorage.setItem('darkMode', JSON.stringify(darkMode));
|
|
||||||
}, [darkMode]);
|
|
||||||
|
|
||||||
if (!loaded) {
|
|
||||||
return <Preloader />;
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className={`${darkMode ? 'dark bg-gray-900' : ''}`}>
|
|
||||||
<Head>
|
|
||||||
<title>Videos | TailAdmin - Tailwind CSS Admin Dashboard Template</title>
|
|
||||||
<meta charSet="UTF-8" />
|
|
||||||
<meta
|
|
||||||
name="viewport"
|
|
||||||
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
|
|
||||||
/>
|
|
||||||
<meta httpEquiv="X-UA-Compatible" content="ie=edge" />
|
|
||||||
</Head>
|
|
||||||
|
|
||||||
<div className="flex h-screen overflow-hidden">
|
|
||||||
<div className="relative flex flex-col flex-1 overflow-hidden">
|
|
||||||
<Overlay
|
|
||||||
sidebarToggle={sidebarToggle}
|
|
||||||
setSidebarToggle={setSidebarToggle}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<main className="h-full overflow-y-auto [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]"> <div className="p-4 mx-auto max-w-[--breakpoint-2xl] md:p-6">
|
|
||||||
<Breadcrumb pageName="Videos" />
|
|
||||||
|
|
||||||
<div className="grid grid-cols-1 gap-5 sm:gap-6 xl:grid-cols-2">
|
|
||||||
<div className="space-y-5 sm:space-y-6">
|
|
||||||
<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 border-b border-gray-200 dark:border-gray-800">
|
|
||||||
<h3 className="text-base font-medium text-gray-800 dark:text-white/90">
|
|
||||||
Video Ratio 16:9
|
|
||||||
</h3>
|
|
||||||
</div>
|
|
||||||
<div className="p-4 sm:p-6">
|
|
||||||
<Video01 />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<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 border-b border-gray-200 dark:border-gray-800">
|
|
||||||
<h3 className="text-base font-medium text-gray-800 dark:text-white/90">
|
|
||||||
Video Ratio 4:3
|
|
||||||
</h3>
|
|
||||||
</div>
|
|
||||||
<div className="p-4 sm:p-6">
|
|
||||||
<Video02 />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="space-y-5 sm:space-y-6">
|
|
||||||
<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 border-b border-gray-200 dark:border-gray-800">
|
|
||||||
<h3 className="text-base font-medium text-gray-800 dark:text-white/90">
|
|
||||||
Video Ratio 4:3
|
|
||||||
</h3>
|
|
||||||
</div>
|
|
||||||
<div className="p-4 sm:p-6">
|
|
||||||
<Video02 />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<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 border-b border-gray-200 dark:border-gray-800">
|
|
||||||
<h3 className="text-base font-medium text-gray-800 dark:text-white/90">
|
|
||||||
Video Ratio 1:1
|
|
||||||
</h3>
|
|
||||||
</div>
|
|
||||||
<div className="p-4 sm:p-6">
|
|
||||||
<Video04 />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -6,8 +6,6 @@ import { useRouter } from "next/navigation";
|
|||||||
import { account, ID } from "../lib/appwrite";
|
import { account, ID } from "../lib/appwrite";
|
||||||
import { useAuth } from "../context/AuthContext";
|
import { useAuth } from "../context/AuthContext";
|
||||||
import Button1 from "../ui/buttons/button1";
|
import Button1 from "../ui/buttons/button1";
|
||||||
import GridShape from "../components/common/GridShape";
|
|
||||||
import Image from "next/image";
|
|
||||||
|
|
||||||
export default function SignUpPage() {
|
export default function SignUpPage() {
|
||||||
const [darkMode, setDarkMode] = useState(false);
|
const [darkMode, setDarkMode] = useState(false);
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user