Fascinated/simple-links
1
1
Fork 0
generated from Fascinated/nextjs-13-template-with-tailwindcss
Code Issues 1 Pull Requests 10 Actions Activity

add basic theme support
All checks were successful
Publish Docker Image / docker (push) Successful in 1m44s
Details

Browse Source
This commit is contained in:
Lee 2023-07-10 03:54:12 +01:00
parent b9d54cab59
commit b0f2bad98e
2 changed files with 34 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
config.json
View File

@ -11,6 +11,7 @@
},
"backgroundImage": "https://cdn.fascinated.cc/8twdW8.jpg"
},
"theme": "dark",
"infoCard": {
"transparency": 0.85
},

38
src/app/page.tsx
View File

@ -9,12 +9,40 @@ import Config from "../../config.json";
library.add(fab, far, fas); // Loading in the icons from FontAwesome
export default function Home() {
const { background, infoCard, avatar, name, links, options, description } =
Config; // All of the settings pulled from the config file
const {
background,
infoCard,
avatar,
name,
links,
options,
description,
theme = "dark", // Fallback to dark if no theme was found
} = Config; // All of the settings pulled from the config file
// Theme colors to use when using the selected theme
const themeColors: {
[key: string]: {
background: string;
textColor: string;
};
} = {
dark: {
background: "bg-neutral-900",
textColor: "text-white",
},
light: {
background: "bg-white",
textColor: "text-black",
},
};
const selectedTheme = themeColors[theme]; // The theme to use
return (
<>
<main className="flex flex-col items-center justify-center w-screen h-screen bg-neutral-900 text-white">
<main
className={`flex flex-col items-center justify-center w-screen h-screen bg-neutral-900 ${selectedTheme.textColor}`}
>
<div
className={`absolute inset-0 filter ${
background.blur && "blur-sm"
@ -34,7 +62,7 @@ export default function Home() {
}
></div>
<div
className={`bg-neutral-800 rounded-lg text-center shadow-lg`}
className={`${selectedTheme.background} rounded-lg text-center shadow-lg`}
style={{
zIndex: 1,
opacity: infoCard.transparency,
@ -68,7 +96,7 @@ export default function Home() {
>
<div
key={index}
className={`flex flex-row items-center justify-center mt-4 px-4 w-60 py-2 rounded ${link.color.normal} hover:brightness-75 transition`}
className={`flex flex-row items-center justify-center mt-4 px-4 w-60 py-2 rounded text-white ${link.color.normal} hover:brightness-75 transition`}
>
{link.icon && (
<>