55 lines
2.3 KiB
TypeScript
55 lines
2.3 KiB
TypeScript
import { Card, CardBody } from '@nextui-org/card';
|
|
import Link from 'next/link';
|
|
|
|
const urlList = [
|
|
{
|
|
name: 'Json Parser',
|
|
desc: 'Parse a Json file, with formatter and syntax highlighting',
|
|
url: '/jsonparser'
|
|
}
|
|
];
|
|
|
|
export default function Home() {
|
|
|
|
const listLength = urlList.length;
|
|
const listMaxIdx = listLength - 1;
|
|
const listIsOdd = listLength % 2 !== 0;
|
|
|
|
return (
|
|
<div className={ 'flex w-full items-center justify-center' }>
|
|
<div className={ 'p-5 md:p-16 max-w-[1536px] w-full' }>
|
|
<div className={ 'w-full' }>
|
|
<ul className={ 'grid grid-cols-2 gap-x-6 gap-y-3 ' }>
|
|
{ urlList.map((entry, id) => (
|
|
<li key={ id }
|
|
className={ (id === listMaxIdx && listIsOdd) ? 'col-span-2 flex justify-center' : 'col-span-2 md:col-span-1' }
|
|
>
|
|
<Card
|
|
isPressable
|
|
isHoverable
|
|
as={ Link }
|
|
href={ entry.url }
|
|
className={ 'w-full h-full' }
|
|
>
|
|
<CardBody className={ 'p-6 h-full' }>
|
|
<div className={ 'flex flex-col h-full' }>
|
|
<div className={ 'text-2xl font-bold' }>{ entry.name }</div>
|
|
<div className={ '' }>{ entry.desc }</div>
|
|
<div className={ 'relative h-full mt-8' }>
|
|
<div
|
|
className={ 'text-default-500 dark:text-default-500 absolute bottom-0' }>
|
|
{ `https://lab.lmt.moe${ entry.url }` }
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</CardBody>
|
|
</Card>
|
|
</li>
|
|
)) }
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|