Move featured items to the config, and make it more responsive

This commit is contained in:
Braydon 2024-04-16 10:48:32 -04:00
parent 8195239251
commit 10b12a60da
5 changed files with 72 additions and 21 deletions

@ -34,5 +34,19 @@
"Server": "/player", "Server": "/player",
"Mojang": "/mojang", "Mojang": "/mojang",
"Docs": "/docs" "Docs": "/docs"
} },
"featuredItems": [
{
"name": "Player Lookup",
"description": "Wanna find a player? You can locate them here by their username or UUID.",
"image": "/media/featured/server.png",
"href": "/player"
},
{
"name": "Server Lookup",
"description": "Fugiat culpa est consequat nostrud exercitation ut id ex in.",
"image": "/media/featured/server.png",
"href": "/player"
}
]
} }

@ -1,7 +1,7 @@
import Creeper from "@/components/creeper"; import Creeper from "@/components/creeper";
import { minecrafter } from "@/font/fonts"; import { minecrafter } from "@/font/fonts";
import { cn } from "@/lib/utils";
import Link from "next/link"; import Link from "next/link";
import { cn } from "../../lib/utils";
/** /**
* The documentation page. * The documentation page.

@ -1,35 +1,41 @@
import config from "@/config";
import { minecrafter } from "@/font/fonts"; import { minecrafter } from "@/font/fonts";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { FeaturedItemProps } from "@/types/config";
import Link from "next/link"; import Link from "next/link";
/**
* The featured content component.
*
* @returns the featured content jsx
*/
const FeaturedContent = (): JSX.Element => ( const FeaturedContent = (): JSX.Element => (
<div className="-translate-y-14 flex justify-center items-center"> <div className="-translate-y-14 flex justify-center items-center">
<div className="grid grid-cols-2 gap-5"> <div className="max-w-2xl flex flex-wrap justify-center gap-5">
<FeaturedItem {config.featuredItems.map((item, index) => (
name="Player Lookup" <FeaturedItem key={index} {...item} />
description="Id dolore elit mollit adipisicing adipisicing." ))}
image="/media/featured/server.png"
href="/player"
/>
</div> </div>
</div> </div>
); );
/**
* A featured item component.
*
* @param props the item props
* @returns the item jsx
*/
const FeaturedItem = ({ const FeaturedItem = ({
name, name,
description, description,
image, image,
href, href,
}: { }: FeaturedItemProps): JSX.Element => (
name: string;
description: string;
image: string;
href: string;
}): JSX.Element => (
<Link <Link
className={ className={cn(
"w-[19rem] h-80 flex flex-col justify-center items-center bg-[url('/media/featured/server.png')] bg-cover rounded-3xl text-center backdrop-blur-md hover:scale-[1.01] transition-all transform-gpu" "pt-28 w-[19rem] h-80 flex flex-col gap-1 items-center rounded-3xl text-center backdrop-blur-md hover:scale-[1.01] transition-all transform-gpu",
} "bg-[url('" + image + "')] bg-center bg-cover bg-no-repeat" // Couldn't do inline variable interpolation, it threw an error
)}
href={href} href={href}
> >
<h1 <h1

@ -1,6 +1,6 @@
import Creeper from "./components/creeper"; import Creeper from "@/components/creeper";
import { minecrafter } from "./font/fonts"; import { minecrafter } from "@/font/fonts";
import { cn } from "./lib/utils"; import { cn } from "@/lib/utils";
/** /**
* The 404 page. * The 404 page.

@ -39,4 +39,35 @@ interface Config {
navbarLinks: { navbarLinks: {
[name: string]: string; [name: string]: string;
}; };
/**
* Featured items for the landing page.
*/
featuredItems: FeaturedItemProps[];
} }
/**
* Props for a featured item
* on the landing page.
*/
type FeaturedItemProps = {
/**
* The name of this item.
*/
name: string;
/**
* The description of this item.
*/
description: string;
/**
* The image for this item.
*/
image: string;
/**
* The href link for this item.
*/
href: string;
};