xevion/xevion.dev
1
0
Fork 0
mirror of https://github.com/Xevion/xevion.dev.git synced 2025-12-05 23:16:57 -06:00
Code Issues Packages Projects Releases Wiki Activity

Format change, sort by date_updated descending

Browse Source
This commit is contained in:
Xevion
2024-12-31 20:08:50 -06:00
parent 95acb1cafa
commit 697a6a7a18
1 changed files with 49 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
src/pages/projects.tsx
View File

@@ -10,61 +10,71 @@ type Props = {
}; };
async function getProjects() { async function getProjects() {
return await directus.request(readItems("project", { return await directus.request(
fields: ["id", "name", "shortDescription", "icon", {links: ["url"]}], readItems("project", {
})); fields: ["id", "name", "shortDescription", "icon", { links: ["url"] }],
sort: "-date_updated",
}),
);
} }
export async function getStaticProps(): Promise<GetStaticPropsResult<Props>> {; export async function getStaticProps(): Promise<GetStaticPropsResult<Props>> {
return { return {
props: { props: {
projects: await getProjects(), projects: await getProjects(),
} },
} };
} }
const ProjectsPage: NextPage<Props> = ({projects}) => { const ProjectsPage: NextPage<Props> = ({ projects }) => {
return ( return (
<AppWrapper dotsClassName="animate-bg-fast"> <AppWrapper dotsClassName="animate-bg-fast">
<div className="max-w-500 mx-auto py-20 grid h-full w-max grid-cols-1 gap-x-20 gap-y-9 md:grid-cols-2 lg:grid-cols-3"> <div className="max-w-500 mx-auto grid h-full w-max grid-cols-1 gap-x-20 gap-y-9 py-20 md:grid-cols-2 lg:grid-cols-3">
<div className="md:col-span-2 text-center lg:col-span-3 w-full mb-10"> <div className="mb-10 w-full text-center md:col-span-2 lg:col-span-3">
<h1 className="text-4xl md:text-5xl pb-3 text-zinc-200 opacity-100 font-hanken"> <h1 className="pb-3 font-hanken text-4xl text-zinc-200 opacity-100 md:text-5xl">
Projects Projects
</h1> </h1>
<span className="text-lg text-zinc-400"> <span className="text-lg text-zinc-400">
created, maintained, or contributed to by me... created, maintained, or contributed to by me...
</span> </span>
</div> </div>
{projects.map(({ id, name, shortDescription: description, links, icon }) => {projects.map(
{ ({ id, name, shortDescription: description, links, icon }) => {
const useAnchor = links?.length ?? 0 > 0; const useAnchor = links?.length ?? 0 > 0;
const DynamicLink = useAnchor ? Link : "div"; const DynamicLink = useAnchor ? Link : "div";
const linkProps = useAnchor ? { href: links![0]!.url, target: "_blank", rel: "noreferrer" } : {}; const linkProps = useAnchor
? { href: links![0]!.url, target: "_blank", rel: "noreferrer" }
: {};
return <div className="flex" key={id}> return (
{/* @ts-expect-error because div can't accept href */} <div className="flex" key={id}>
<DynamicLink {/* @ts-expect-error because div can't accept href */}
key={name} <DynamicLink
title={name} key={name}
className="flex pl-3 pr-5 pt-1 pb-2.5 relative max-w-[30rem] items-center transition-colors rounded-lg text-zinc-400 hover:text-zinc-50 bg-black/10 hover:bg-zinc-500/10" title={name}
{...linkProps} className="relative flex max-w-[30rem] items-center rounded-lg bg-black/10 pb-2.5 pl-3 pr-5 pt-1 text-zinc-400 transition-colors hover:bg-zinc-500/10 hover:text-zinc-50"
> {...linkProps}
>
<div className="w-14 pr-5 h-full flex items-center justify-center"> <div className="flex h-full w-14 items-center justify-center pr-5">
<i className={cn(icon ?? "fa-heart", "fa-solid text-3xl text-opacity-80 saturate-0")}></i> <i
</div> className={cn(
<div className="flex-auto overflow-hidden"> icon ?? "fa-heart",
<div className="text-lg">{name}</div> "fa-solid text-3xl text-opacity-80 saturate-0",
<div className="text-base font-normal opacity-70 whitespace-nowrap"> )}
{description} ></i>
</div> </div>
</div> <div className="flex-auto overflow-hidden">
</DynamicLink> <div className="text-lg">{name}</div>
<div className="grow" /> <div className="whitespace-nowrap text-base font-normal opacity-70">
</div>; {description}
} </div>
)} </div>
</DynamicLink>
<div className="grow" />
</div>
);
},
)}
</div> </div>
</AppWrapper> </AppWrapper>
); );