diff --git a/app/(main)/classes/page.tsx b/app/(main)/classes/page.tsx new file mode 100644 index 0000000..9013e0a --- /dev/null +++ b/app/(main)/classes/page.tsx @@ -0,0 +1,103 @@ +/* eslint-disable @next/next/no-img-element */ +'use client'; +import { Button } from 'primereact/button'; +import React, { useContext, useEffect, useRef, useState } from 'react'; +import { LayoutContext } from '../../../layout/context/layoutcontext'; +import { ChartData, ChartOptions } from 'chart.js'; + +const Classes = () => { + + const { layoutConfig } = useContext(LayoutContext); + + const applyLightTheme = () => { + const lineOptions: ChartOptions = { + plugins: { + legend: { + labels: { + color: '#495057' + } + } + }, + scales: { + x: { + ticks: { + color: '#495057' + }, + grid: { + color: '#ebedef' + } + }, + y: { + ticks: { + color: '#495057' + }, + grid: { + color: '#ebedef' + } + } + } + }; + + setLineOptions(lineOptions); + }; + + const applyDarkTheme = () => { + const lineOptions = { + plugins: { + legend: { + labels: { + color: '#ebedef' + } + } + }, + scales: { + x: { + ticks: { + color: '#ebedef' + }, + grid: { + color: 'rgba(160, 167, 181, .3)' + } + }, + y: { + ticks: { + color: '#ebedef' + }, + grid: { + color: 'rgba(160, 167, 181, .3)' + } + } + } + }; + + setLineOptions(lineOptions); + }; + + // useEffect(() => { + // ProductService.getProductsSmall().then((data) => setProducts(data)); + // }, []); + + useEffect(() => { + if (layoutConfig.colorScheme === 'light') { + applyLightTheme(); + } else { + applyDarkTheme(); + } + }, [layoutConfig.colorScheme]); + + return ( +