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

Add links to icons

Browse Source
This commit is contained in:
Xevion
2022-12-25 21:32:37 -06:00
parent b8425b8179
commit 3c16258b8e
3 changed files with 63 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/components/ItemCard.tsx
View File

@@ -4,17 +4,18 @@ import {classNames, isHoverable} from "../utils/helpers";
import DependentImage from "./DependentImage";
import ReactMarkdown from 'react-markdown'
import {AiFillGithub, AiFillLinkedin, AiOutlineLink,} from "react-icons/ai";
import {RxOpenInNewWindow} from "react-icons/rx";
import Link from "next/link";
import {LinkIcon, LinkIcons} from "../pages";
type ItemCardProps = {
banner: string;
bannerBlur: string;
title: string;
description: string;
links?: LinkIcon[];
}
const ItemCard = ({banner, bannerBlur, title, description}: ItemCardProps) => {
const ItemCard = ({banner, bannerBlur, title, description, links}: ItemCardProps) => {
const itemRef = useRef<HTMLDivElement>(null);
const [active, toggleActive, setActive] = useToggle()
@@ -34,20 +35,20 @@ const ItemCard = ({banner, bannerBlur, title, description}: ItemCardProps) => {
/>
<div className="elements grid grid-cols-12 h-full m-2 px-1 sm:px-4">
<div className="col-span-9 lg:col-span-8 max-h-full overflow-hidden drop-shadow-2xl pb-2 md:p-1 pl-2">
<div className="text-2xl sm:text-2xl md:text-3xl">{title}</div>
<div className="text-2xl sm:text-2xl md:text-3xl font-semibold">{title}</div>
<div className="mt-0 md:mt-1.5 text-xl sm:text-lg md:text-xl overflow-hidden ">
<ReactMarkdown>{description}</ReactMarkdown>
</div>
</div>
<div className="col-span-3 lg:col-span-4 w-full flex justify-end max-h-full md:py-5">
<div
className="grid grid-cols-2 grid-rows-2 p-2 md:gap-3 aspect-square icon-grid">
<RxOpenInNewWindow/>
{/*<AiOutlineLink/>*/}
<AiFillGithub/>
{/*<AiFillLinkedin/>*/}
{ (links?.length ?? 0) > 0 ? <div className="col-span-3 lg:col-span-4 w-full flex justify-end max-h-full md:py-5">
<div className="grid grid-cols-2 grid-rows-2 p-2 md:gap-3 aspect-square icon-grid">
{links!.map(({icon, location}) => {
return <Link href={location} >
{LinkIcons[icon]({})}
</Link>
})}
</div>
</div>
</div> : null}
</div>
</div>
}