38 lines
1.1 KiB
TypeScript
38 lines
1.1 KiB
TypeScript
import "./links.sass";
|
|
import {Link as LinkBase} from "../router/Link";
|
|
import {Path} from "../router/router";
|
|
import {Link} from "./link";
|
|
import {LINKS} from "./links";
|
|
import {motion} from "motion/react";
|
|
import {AnimateFade} from "../animations";
|
|
|
|
export default function LinkTree() {
|
|
return <motion.main className="link-tree" {...AnimateFade()}>
|
|
<section className="link-ctr">
|
|
{
|
|
LINKS.map(link => <LinkBox key={link.name} {...link}/>)
|
|
}
|
|
</section>
|
|
</motion.main>
|
|
}
|
|
|
|
function LinkBox(props: Link) {
|
|
const {name, desc, img, href} = props;
|
|
|
|
return <section className="link-box">
|
|
<LinkBase target="_blank" className="link-box-ctr" href={href as Path}>
|
|
<div className="link-img-ctr">
|
|
{
|
|
img && <img className="link-img" src={img.href} alt={img.alt} width={100} height={100}/>
|
|
}
|
|
</div>
|
|
<div className="content-ctr">
|
|
<div className="link-title">
|
|
<h2>{name}</h2>
|
|
</div>
|
|
<div className="link-desc">{desc}</div>
|
|
</div>
|
|
</LinkBase>
|
|
</section>
|
|
}
|