AmirReza Jamali
349f1137f7
This commit introduces several UI improvements to enhance the responsive design and visual appeal of the homepage and main layout. Key changes include: - Adjusted the main header to be centered on mobile devices for better alignment. - Refined the hero section on the homepage with responsive text sizes and improved spacing. - Modified the "dynamic island" image container to adapt its size and position across different screen sizes. - Improved typography and layout in the "democratizing tenders" section for better readability. - Reorganized the contact page into a Next.js route group for better project structure.
109 lines
2.3 KiB
TypeScript
109 lines
2.3 KiB
TypeScript
"use client";
|
|
|
|
import { ApexOptions } from "apexcharts";
|
|
import dynamic from "next/dynamic";
|
|
import { useEffect, useState } from "react";
|
|
const ReactApexChart = dynamic(() => import("react-apexcharts"), {
|
|
ssr: false,
|
|
});
|
|
|
|
interface ChartState {
|
|
series: {
|
|
name: string;
|
|
data: number[];
|
|
}[];
|
|
options: ApexOptions;
|
|
}
|
|
|
|
const ApexChart = () => {
|
|
const [state, setState] = useState<ChartState | null>(null);
|
|
|
|
useEffect(() => {
|
|
const initialState: ChartState = {
|
|
series: [
|
|
{
|
|
name: "Sales",
|
|
data: [
|
|
182, 192, 230, 198, 243, 234, 244, 210, 274, 220, 225, 289, 265,
|
|
304,
|
|
],
|
|
},
|
|
],
|
|
options: {
|
|
chart: {
|
|
toolbar: { show: false },
|
|
height: 350,
|
|
type: "line",
|
|
},
|
|
forecastDataPoints: {
|
|
count: 0,
|
|
},
|
|
stroke: {
|
|
width: 6,
|
|
curve: "smooth",
|
|
},
|
|
fill: {
|
|
type: "gradient",
|
|
gradient: {
|
|
shade: "dark",
|
|
type: "horizontal",
|
|
shadeIntensity: 0.5,
|
|
gradientToColors: ["#99DDE5"],
|
|
inverseColors: false,
|
|
opacityFrom: 1,
|
|
opacityTo: 1,
|
|
stops: [0, 100],
|
|
},
|
|
},
|
|
colors: ["#0164FF"],
|
|
xaxis: {
|
|
type: "datetime",
|
|
categories: [
|
|
"1/11/2024",
|
|
"2/11/2024",
|
|
"3/11/2024",
|
|
"5/11/2024",
|
|
"6/11/2024",
|
|
"7/11/2024",
|
|
"8/11/2024",
|
|
"9/11/2024",
|
|
"10/11/2024",
|
|
"11/11/2024",
|
|
"12/11/2024",
|
|
"1/11/2025",
|
|
"2/11/2025",
|
|
"3/11/2025",
|
|
],
|
|
tickAmount: 0,
|
|
labels: {
|
|
formatter: function (value: any, timestamp: any, opts: any) {
|
|
return opts.dateFormatter(new Date(timestamp), "dd MMM");
|
|
},
|
|
},
|
|
},
|
|
},
|
|
};
|
|
setState(initialState);
|
|
}, []);
|
|
|
|
if (!state) {
|
|
return <div>Loading...</div>;
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<div id="chart">
|
|
<ReactApexChart
|
|
options={state.options}
|
|
series={state.series}
|
|
type="line"
|
|
height={350}
|
|
/>
|
|
</div>
|
|
<div id="html-dist"></div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ApexChart;
|