mirror of
https://github.com/D4M13N-D3V/neroshitron.git
synced 2025-03-14 10:05:04 +00:00
475 lines
21 KiB
TypeScript
475 lines
21 KiB
TypeScript
"use client";
|
|
import { createClient } from "@/utils/supabase/client";
|
|
import React, { useState, useEffect } from 'react';
|
|
import { useRouter } from 'next/navigation';
|
|
|
|
function PageComponent() {
|
|
const router = useRouter();
|
|
const supabase = createClient();
|
|
|
|
const [primary, setPrimary] = useState('#201240');
|
|
const [primaryLight, setPrimaryLight] = useState('#403260');
|
|
const [primaryDark, setPrimaryDark] = useState('#100120');
|
|
const [secondary, setSecondary] = useState('#4F3D70');
|
|
const [secondaryLight, setSecondaryLight] = useState('#6F5D90');
|
|
const [secondaryDark, setSecondaryDark] = useState('#2F1D50');
|
|
const [error, setError] = useState('#862117');
|
|
const [errorLight, setErrorLight] = useState('#C44C4C');
|
|
const [errorDark, setErrorDark] = useState('#5C0D0D');
|
|
const [changed, setChanged] = useState(false);
|
|
const [success, setSuccess] = useState('#00C9A6');
|
|
const [successLight, setSuccessLight] = useState('#20E9C6');
|
|
const [successDark, setSuccessDark] = useState('#00A986');
|
|
const [warning, setWarning] = useState('#E17558');
|
|
const [warningLight, setWarningLight] = useState('#E39578');
|
|
const [warningDark, setWarningDark] = useState('#C15538');
|
|
const [info, setInfo] = useState('#222140');
|
|
const [infoLight, setInfoLight] = useState('#424260');
|
|
const [infoDark, setInfoDark] = useState('#020120');
|
|
const [saving, setSaving] = useState(false);
|
|
|
|
const getData = async () => {
|
|
var primaryConfig = await getColorConfig('primary');
|
|
setPrimary(primaryConfig.value);
|
|
var primaryLightConfig = await getColorConfig('primary-light');
|
|
setPrimaryLight(primaryLightConfig.value);
|
|
var primaryDarkConfig = await getColorConfig('primary-dark');
|
|
setPrimaryDark(primaryDarkConfig.value);
|
|
var secondaryConfig = await getColorConfig('secondary');
|
|
setSecondary(secondaryConfig.value);
|
|
var secondaryLightConfig = await getColorConfig('secondary-light');
|
|
setSecondaryLight(secondaryLightConfig.value);
|
|
var secondaryDarkConfig = await getColorConfig('secondary-dark');
|
|
setSecondaryDark(secondaryDarkConfig.value);
|
|
var errorConfig = await getColorConfig('error');
|
|
setError(errorConfig.value);
|
|
var errorLightConfig = await getColorConfig('error-light');
|
|
setErrorLight(errorLightConfig.value);
|
|
var errorDarkConfig = await getColorConfig('error-dark');
|
|
setErrorDark(errorDarkConfig.value);
|
|
var successConfig = await getColorConfig('success');
|
|
setSuccess(successConfig.value);
|
|
var successLightConfig = await getColorConfig('success-light');
|
|
setSuccessLight(successLightConfig.value);
|
|
var successDarkConfig = await getColorConfig('success-dark');
|
|
setSuccessDark(successDarkConfig.value);
|
|
var warningConfig = await getColorConfig('warning');
|
|
setWarning(warningConfig.value);
|
|
var warningLightConfig = await getColorConfig('warning-light');
|
|
setWarningLight(warningLightConfig.value);
|
|
var warningDarkConfig = await getColorConfig('warning-dark');
|
|
setWarningDark(warningDarkConfig.value);
|
|
var infoConfig = await getColorConfig('info');
|
|
setInfo(infoConfig.value);
|
|
var infoLightConfig = await getColorConfig('info-light');
|
|
setInfoLight(infoLightConfig.value);
|
|
var infoDarkConfig = await getColorConfig('info-dark');
|
|
setInfoDark(infoDarkConfig.value);
|
|
}
|
|
|
|
const getColorConfig = async (name: string) => {
|
|
try {
|
|
const response = await fetch(`/api/admin/interface-configs?name=${name}`, {
|
|
method: 'GET',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
});
|
|
|
|
if (!response.ok) {
|
|
throw new Error('Failed to call GET request');
|
|
}
|
|
|
|
const data = await response.json();
|
|
return data;
|
|
} catch (error) {
|
|
console.error(error);
|
|
throw new Error('Failed to call GET request');
|
|
}
|
|
}
|
|
|
|
const setColorConfig = async (name: string, value:string) => {
|
|
try {
|
|
const response = await fetch(`/api/admin/interface-configs`, {
|
|
method: 'PUT',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({ name, value }),
|
|
});
|
|
|
|
if (!response.ok) {
|
|
throw new Error('Failed to call GET request');
|
|
}
|
|
|
|
const data = await response.json();
|
|
return data;
|
|
} catch (error) {
|
|
console.error(error);
|
|
throw new Error('Failed to call GET request');
|
|
}
|
|
}
|
|
|
|
|
|
const save = async () => {
|
|
setSaving(true);
|
|
await Promise.all([
|
|
setColorConfig('primary', primary),
|
|
setColorConfig('primary-light', primaryLight),
|
|
setColorConfig('primary-dark', primaryDark),
|
|
setColorConfig('secondary', secondary),
|
|
setColorConfig('secondary-light', secondaryLight),
|
|
setColorConfig('secondary-dark', secondaryDark),
|
|
setColorConfig('error', error),
|
|
setColorConfig('error-light', errorLight),
|
|
setColorConfig('error-dark', errorDark),
|
|
setColorConfig('success', success),
|
|
setColorConfig('success-light', successLight),
|
|
setColorConfig('success-dark', successDark),
|
|
setColorConfig('warning', warning),
|
|
setColorConfig('warning-light', warningLight),
|
|
setColorConfig('warning-dark', warningDark),
|
|
setColorConfig('info', info),
|
|
setColorConfig('info-light', infoLight),
|
|
setColorConfig('info-dark', infoDark)
|
|
]);
|
|
window.location.reload();
|
|
}
|
|
|
|
|
|
useEffect(() => {
|
|
getData();
|
|
}, []);
|
|
|
|
const colorChange = async ()=>{
|
|
setChanged(true)
|
|
document.documentElement.style.setProperty(`--color-primary`, primary);
|
|
document.documentElement.style.setProperty(`--color-primary-light`, primaryLight);
|
|
document.documentElement.style.setProperty(`--color-primary-dark`, primaryDark);
|
|
document.documentElement.style.setProperty(`--color-secondary`, secondary);
|
|
document.documentElement.style.setProperty(`--color-secondary-light`, secondaryLight);
|
|
document.documentElement.style.setProperty(`--color-secondary-dark`, secondaryDark);
|
|
document.documentElement.style.setProperty(`--color-error`, error);
|
|
document.documentElement.style.setProperty(`--color-error-light`, errorLight);
|
|
document.documentElement.style.setProperty(`--color-error-dark`, errorDark);
|
|
document.documentElement.style.setProperty(`--color-success`, success);
|
|
document.documentElement.style.setProperty(`--color-success-light`, successLight);
|
|
document.documentElement.style.setProperty(`--color-success-dark`, successDark);
|
|
document.documentElement.style.setProperty(`--color-warning`, warning);
|
|
document.documentElement.style.setProperty(`--color-warning-light`, warningLight);
|
|
document.documentElement.style.setProperty(`--color-warning-dark`, warningDark);
|
|
document.documentElement.style.setProperty(`--color-info`, info);
|
|
document.documentElement.style.setProperty(`--color-info-light`, infoLight);
|
|
document.documentElement.style.setProperty(`--color-info-dark`, infoDark);
|
|
}
|
|
|
|
return (
|
|
<div className="w-5/6 h-1/2 text-white lg:flex justify-center items-center animate-in overflow-y-hidden">
|
|
<div className=" w-5/6 md:w-4/6 lg:w-3/6 xl:w-2/6 rounded-md bg-primary opacity-90 p-12 m-1 mt-24 shadow-lg backdrop-blur">
|
|
<div className="w-full relative">
|
|
<span className="text-2xl pb-4">Color Settings</span>
|
|
<button onClick={()=>{router.push("/admin")}} className={`float-right bg-error hover:bg-error-light ml-2 rounded p-2`}>
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor"
|
|
className="md:hidden size-6">
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M9 15 3 9m0 0 6-6M3 9h12a6 6 0 0 1 0 12h-3" />
|
|
</svg>
|
|
<span className="hidden md:block">Back</span>
|
|
</button>
|
|
<button onClick={save} disabled={!changed}
|
|
className={`float-right ${changed ? "bg-success hover:bg-success-light" : "bg-success-dark"} rounded p-2`}>
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor"
|
|
className="md:hidden size-6">
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="m4.5 12.75 6 6 9-13.5" />
|
|
</svg>
|
|
<span className="hidden md:block">{saving?"Saving...":"Save"}</span>
|
|
</button>
|
|
</div>
|
|
<div className="w-full relative">
|
|
<label htmlFor="primaryInput">Primary Color</label>
|
|
<div className="flex">
|
|
<input
|
|
value={primary}
|
|
required
|
|
type="text"
|
|
className="w-full rounded-md rounded-r-none bg-info-bright p-2 text-black shadow-lg"
|
|
onChange={(e) => { setPrimary(e.target.value); colorChange(); }}
|
|
placeholder="Choose the primary color"
|
|
/>
|
|
<input
|
|
value={primary}
|
|
onChange={(e) => { setPrimary(e.target.value); colorChange(); }}
|
|
required
|
|
|
|
type="color"
|
|
className="w-10 h-10 rounded-r p-1"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="w-full relative">
|
|
<label htmlFor="primaryInput">Primary Light Color</label>
|
|
<div className="flex">
|
|
<input
|
|
value={primaryLight}
|
|
required
|
|
type="text"
|
|
className="w-full rounded-md rounded-r-none bg-info-bright p-2 text-black shadow-lg"
|
|
onChange={(e) => { setPrimaryLight(e.target.value); colorChange(); }}
|
|
placeholder="Choose the primary color"
|
|
/>
|
|
<input
|
|
value={primaryLight}
|
|
onChange={(e) => { setPrimaryLight(e.target.value); colorChange(); }}
|
|
required
|
|
|
|
type="color"
|
|
className="w-10 h-10 rounded-r p-1"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="w-full relative">
|
|
<label htmlFor="primaryInput">Primary Dark Color</label>
|
|
<div className="flex">
|
|
<input
|
|
value={primaryDark}
|
|
required
|
|
type="text"
|
|
className="w-full rounded-md rounded-r-none bg-info-bright p-2 text-black shadow-lg"
|
|
onChange={(e) => { setPrimaryDark(e.target.value); colorChange(); }}
|
|
placeholder="Choose the primary color"
|
|
/>
|
|
<input
|
|
value={primaryDark}
|
|
onChange={(e) => { setPrimaryDark(e.target.value); colorChange(); }}
|
|
required
|
|
|
|
type="color"
|
|
className="w-10 h-10 rounded-r p-1"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div className="w-full relative">
|
|
<label htmlFor="primaryInput">Secondary Color</label>
|
|
<div className="flex">
|
|
<input
|
|
value={secondary}
|
|
required
|
|
type="text"
|
|
className="w-full rounded-md rounded-r-none bg-info-bright p-2 text-black shadow-lg"
|
|
onChange={(e) => { setSecondary(e.target.value); colorChange(); }}
|
|
placeholder="Choose the primary color"
|
|
/>
|
|
<input
|
|
value={secondary}
|
|
onChange={(e) => { setSecondary(e.target.value); colorChange(); }}
|
|
required
|
|
|
|
type="color"
|
|
className="w-10 h-10 rounded-r p-1"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="w-full relative">
|
|
<label htmlFor="primaryInput">Secondary Dark Color</label>
|
|
<div className="flex">
|
|
<input
|
|
value={secondaryDark}
|
|
required
|
|
type="text"
|
|
className="w-full rounded-md rounded-r-none bg-info-bright p-2 text-black shadow-lg"
|
|
onChange={(e) => { setSecondaryDark(e.target.value); colorChange(); }}
|
|
placeholder="Choose the primary color"
|
|
/>
|
|
<input
|
|
value={secondaryDark}
|
|
onChange={(e) => { setSecondaryDark(e.target.value); colorChange(); }}
|
|
required
|
|
|
|
type="color"
|
|
className="w-10 h-10 rounded-r p-1"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="w-full relative">
|
|
<label htmlFor="primaryInput">Secondary Light Color</label>
|
|
<div className="flex">
|
|
<input
|
|
value={secondaryLight}
|
|
required
|
|
type="text"
|
|
className="w-full rounded-md rounded-r-none bg-info-bright p-2 text-black shadow-lg"
|
|
onChange={(e) => { setSecondaryLight(e.target.value); colorChange(); }}
|
|
placeholder="Choose the primary color"
|
|
/>
|
|
<input
|
|
value={secondaryLight}
|
|
onChange={(e) => { setSecondaryLight(e.target.value); colorChange(); }}
|
|
required
|
|
|
|
type="color"
|
|
className="w-10 h-10 rounded-r p-1"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div className="w-full relative">
|
|
<label htmlFor="primaryInput">Error Color</label>
|
|
<div className="flex">
|
|
<input
|
|
value={error}
|
|
required
|
|
type="text"
|
|
className="w-full rounded-md rounded-r-none bg-info-bright p-2 text-black shadow-lg"
|
|
onChange={(e) => { setError(e.target.value); colorChange(); }}
|
|
placeholder="Choose the primary color"
|
|
/>
|
|
<input
|
|
value={error}
|
|
onChange={(e) => { setError(e.target.value); colorChange(); }}
|
|
required
|
|
|
|
type="color"
|
|
className="w-10 h-10 rounded-r p-1"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="w-full relative">
|
|
<label htmlFor="primaryInput">Error Dark Color</label>
|
|
<div className="flex">
|
|
<input
|
|
value={errorDark}
|
|
required
|
|
type="text"
|
|
className="w-full rounded-md rounded-r-none bg-info-bright p-2 text-black shadow-lg"
|
|
onChange={(e) => { setErrorDark(e.target.value); colorChange(); }}
|
|
placeholder="Choose the primary color"
|
|
/>
|
|
<input
|
|
value={errorDark}
|
|
onChange={(e) => { setErrorDark(e.target.value); colorChange(); }}
|
|
required
|
|
|
|
type="color"
|
|
className="w-10 h-10 rounded-r p-1"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="w-full relative">
|
|
<label htmlFor="primaryInput">Error Light Color</label>
|
|
<div className="flex">
|
|
<input
|
|
value={errorLight}
|
|
required
|
|
type="text"
|
|
className="w-full rounded-md rounded-r-none bg-info-bright p-2 text-black shadow-lg"
|
|
onChange={(e) => { setErrorLight(e.target.value); colorChange(); }}
|
|
placeholder="Choose the primary color"
|
|
/>
|
|
<input
|
|
value={errorLight}
|
|
onChange={(e) => { setErrorLight(e.target.value); colorChange(); }}
|
|
required
|
|
|
|
type="color"
|
|
className="w-10 h-10 rounded-r p-1"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div className="w-full relative">
|
|
<label htmlFor="primaryInput">Success Color</label>
|
|
<div className="flex">
|
|
<input
|
|
value={success}
|
|
required
|
|
type="text"
|
|
className="w-full rounded-md rounded-r-none bg-info-bright p-2 text-black shadow-lg"
|
|
onChange={(e) => { setSuccess(e.target.value); colorChange(); }}
|
|
placeholder="Choose the primary color"
|
|
/>
|
|
<input
|
|
value={success}
|
|
onChange={(e) => { setSuccess(e.target.value); colorChange(); }}
|
|
required
|
|
|
|
type="color"
|
|
className="w-10 h-10 rounded-r p-1"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="w-full relative">
|
|
<label htmlFor="primaryInput">Success Dark Color</label>
|
|
<div className="flex">
|
|
<input
|
|
value={successDark}
|
|
required
|
|
type="text"
|
|
className="w-full rounded-md rounded-r-none bg-info-bright p-2 text-black shadow-lg"
|
|
onChange={(e) => { setSuccessDark(e.target.value); colorChange(); }}
|
|
placeholder="Choose the primary color"
|
|
/>
|
|
<input
|
|
value={successDark}
|
|
onChange={(e) => { setSuccessDark(e.target.value); colorChange(); }}
|
|
required
|
|
|
|
type="color"
|
|
className="w-10 h-10 rounded-r p-1"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="w-full relative">
|
|
<label htmlFor="primaryInput">Success Light Color</label>
|
|
<div className="flex">
|
|
<input
|
|
value={successLight}
|
|
required
|
|
type="text"
|
|
className="w-full rounded-md rounded-r-none bg-info-bright p-2 text-black shadow-lg"
|
|
onChange={(e) => { setSuccessLight(e.target.value); colorChange(); }}
|
|
placeholder="Choose the primary color"
|
|
/>
|
|
<input
|
|
value={successLight}
|
|
onChange={(e) => { setSuccessLight(e.target.value); colorChange(); }}
|
|
required
|
|
|
|
type="color"
|
|
className="w-10 h-10 rounded-r p-1"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default PageComponent;
|
|
|
|
|
|
|