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

use spaces instead of tabs
All checks were successful
Publish Docker Image / docker (push) Successful in 1m47s
Details

Browse Source
This commit is contained in:
Lee
2023-07-10 05:06:28 +01:00
parent 6a165a3161
commit cc0c9a14e1
5 changed files with 238 additions and 238 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/app/layout.tsx
View File

@ -11,13 +11,13 @@ const inter = Inter({ subsets: ["latin"] });
export const metadata = Config.metadata; // Site metadata from the config
export default function RootLayout({
children,
children,
}: {
children: React.ReactNode;
children: React.ReactNode;
}) {
return (
<html lang="en">
<body className={inter.className}>{children}</body>
</html>
);
return (
<html lang="en">
<body className={inter.className}>{children}</body>
</html>
);
}

222
src/app/page.tsx
View File

@ -9,123 +9,123 @@ 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,
theme, // Fallback to dark if no theme was found
} = Config; // All of the settings pulled from the config file
const {
background,
infoCard,
avatar,
name,
links,
options,
description,
theme, // 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
// all used colors are from TailwindCSS
const themeColors: {
[key: string]: {
background: string;
textColor: string;
buttonTextColor: string;
};
} = {
dark: {
background: "bg-neutral-900",
textColor: "text-white",
buttonTextColor: "text-white",
},
light: {
background: "bg-white",
textColor: "text-black",
buttonTextColor: "text-white",
},
};
const selectedTheme = themeColors[theme]; // The theme to use
// Theme colors to use when using the selected theme
// all used colors are from TailwindCSS
const themeColors: {
[key: string]: {
background: string;
textColor: string;
buttonTextColor: string;
};
} = {
dark: {
background: "bg-neutral-900",
textColor: "text-white",
buttonTextColor: "text-white",
},
light: {
background: "bg-white",
textColor: "text-black",
buttonTextColor: "text-white",
},
};
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 ${selectedTheme.textColor}`}
>
<div
className={`absolute inset-0 filter w-screen h-screen ${
background.blur && "blur-sm"
}`}
style={
background.showBackground
? {
zIndex: 0,
background: background.darken.enabled
? `linear-gradient(rgba(0, 0, 0, ${background.darken.amount}), rgba(0, 0, 0, ${background.darken.amount})),
return (
<>
<main
className={`flex flex-col items-center justify-center w-screen h-screen bg-neutral-900 ${selectedTheme.textColor}`}
>
<div
className={`absolute inset-0 filter w-screen h-screen ${
background.blur && "blur-sm"
}`}
style={
background.showBackground
? {
zIndex: 0,
background: background.darken.enabled
? `linear-gradient(rgba(0, 0, 0, ${background.darken.amount}), rgba(0, 0, 0, ${background.darken.amount})),
url(${background.backgroundImage})`
: `url(${background.backgroundImage})`,
backgroundSize: "cover",
backgroundBlendMode: "multiply",
}
: {}
}
></div>
<div
className={`${selectedTheme.background} rounded-lg text-center shadow-lg`}
style={{
zIndex: 1,
opacity: infoCard.transparency,
}}
>
<div className="m-5">
<div className="flex flex-col items-center justify-center">
<Image
src={avatar}
alt="Avatar"
width={120}
height={120}
className="rounded-full"
/>
<div className="mb-3"></div>
<h1 className="text-4xl font-bold">{name}</h1>
</div>
: `url(${background.backgroundImage})`,
backgroundSize: "cover",
backgroundBlendMode: "multiply",
}
: {}
}
></div>
<div
className={`${selectedTheme.background} rounded-lg text-center shadow-lg`}
style={{
zIndex: 1,
opacity: infoCard.transparency,
}}
>
<div className="m-5">
<div className="flex flex-col items-center justify-center">
<Image
src={avatar}
alt="Avatar"
width={120}
height={120}
className="rounded-full"
/>
<div className="mb-3"></div>
<h1 className="text-4xl font-bold">{name}</h1>
</div>
<p className="mt-4 text-lg max-w-lg">{description}</p>
<p className="mt-4 text-lg max-w-lg">{description}</p>
<div className="flex flex-col items-center">
{links.map((link, index) => {
const icons: any = link.icon?.split(" ") ?? [];
<div className="flex flex-col items-center">
{links.map((link, index) => {
const icons: any = link.icon?.split(" ") ?? [];
return (
<a
key={index}
href={link.url}
target="_blank"
rel="noopener noreferrer"
className={`flex flex-row items-center justify-center mt-4 px-4 w-60 py-2 rounded
return (
<a
key={index}
href={link.url}
target="_blank"
rel="noopener noreferrer"
className={`flex flex-row items-center justify-center mt-4 px-4 w-60 py-2 rounded
${selectedTheme.buttonTextColor} ${link.color.normal} hover:brightness-75 transition`}
>
{link.icon && (
<>
<FontAwesomeIcon icon={icons} />
<div className="ml-2"></div>
</>
)}
<p>{link.title}</p>
</a>
);
})}
</div>
</div>
</div>
>
{link.icon && (
<>
<FontAwesomeIcon icon={icons} />
<div className="ml-2"></div>
</>
)}
<p>{link.title}</p>
</a>
);
})}
</div>
</div>
</div>
<div className="absolute bottom-0 right-0 mb-5 mr-5">
{options.showSourceLink && (
<a
href="https://git.fascinated.cc/Fascinated/simple-links"
target="_blank"
className="mt-5 text-blue-300"
>
Website Source
</a>
)}
</div>
</main>
</>
);
<div className="absolute bottom-0 right-0 mb-5 mr-5">
{options.showSourceLink && (
<a
href="https://git.fascinated.cc/Fascinated/simple-links"
target="_blank"
className="mt-5 text-blue-300"
>
Website Source
</a>
)}
</div>
</main>
</>
);
}