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

56
src/pages/projects.tsx
View File

@@ -10,61 +10,71 @@ type Props = {
};
async function getProjects() {
return await directus.request(readItems("project", {
fields: ["id", "name", "shortDescription", "icon", {links: ["url"]}],
}));
return await directus.request(
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 {
props: {
projects: await getProjects(),
}
}
},
};
}
const ProjectsPage: NextPage<Props> = ({projects}) => {
const ProjectsPage: NextPage<Props> = ({ projects }) => {
return (
<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="md:col-span-2 text-center lg:col-span-3 w-full mb-10">
<h1 className="text-4xl md:text-5xl pb-3 text-zinc-200 opacity-100 font-hanken">
<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="mb-10 w-full text-center md:col-span-2 lg:col-span-3">
<h1 className="pb-3 font-hanken text-4xl text-zinc-200 opacity-100 md:text-5xl">
Projects
</h1>
<span className="text-lg text-zinc-400">
created, maintained, or contributed to by me...
</span>
</div>
{projects.map(({ id, name, shortDescription: description, links, icon }) =>
{
{projects.map(
({ id, name, shortDescription: description, links, icon }) => {
const useAnchor = links?.length ?? 0 > 0;
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 (
<div className="flex" key={id}>
{/* @ts-expect-error because div can't accept href */}
<DynamicLink
key={name}
title={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"
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">
<i className={cn(icon ?? "fa-heart", "fa-solid text-3xl text-opacity-80 saturate-0")}></i>
<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>
</div>
<div className="flex-auto overflow-hidden">
<div className="text-lg">{name}</div>
<div className="text-base font-normal opacity-70 whitespace-nowrap">
<div className="whitespace-nowrap text-base font-normal opacity-70">
{description}
</div>
</div>
</DynamicLink>
<div className="grow" />
</div>;
}
)}
</div>
);
},
)}
</div>
</AppWrapper>
);