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

Markdown description, icon grid, fix overflow

Browse Source
This commit is contained in:
Xevion
2022-12-24 22:03:17 -06:00
parent 17b9fba278
commit adfc22a2b8
5 changed files with 906 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
src/components/ItemCard.tsx
View File

@@ -1,16 +1,19 @@
import Image from "next/image";
import {ArrowLongRightIcon} from "@heroicons/react/24/outline";
import React, {useRef} from "react";
import {useOnClickOutside, useToggle} from "usehooks-ts";
import {classNames, isHoverable} from "../utils/helpers";
import DependentImage from "./DependentImage";
import ReactMarkdown from 'react-markdown'
import {AiFillGithub} from "react-icons/ai";
type ItemCardProps = {
banner: string;
title: React.ReactNode;
description: React.ReactNode;
bannerBlur: string;
title: string;
description: string;
}
const ItemCard = ({banner, title, description}: ItemCardProps) => {
const ItemCard = ({banner, bannerBlur, title, description}: ItemCardProps) => {
const itemRef = useRef<HTMLDivElement>(null);
const [active, toggleActive, setActive] = useToggle()
@@ -18,21 +21,28 @@ const ItemCard = ({banner, title, description}: ItemCardProps) => {
setActive(false);
})
return <div onClick={() => {if (!isHoverable()) toggleActive();}}
return <div onClick={() => {
if (!isHoverable()) toggleActive();
}}
ref={itemRef} className={classNames("item", active ? "active" : null)}>
<Image fill src={banner}
alt={`Banner for ${title}`}
style={{objectFit: "cover"}}
<DependentImage fill src={banner} blurDataURL={bannerBlur}
className={(loaded) => classNames("object-cover", loaded ? null : "blur-xl")}
placeholder="blur"
alt={`Banner for ${title}`}
/>
<div className="elements grid grid-cols-5 h-full">
<div className="col-span-4 md:col-span-3 z-30 drop-shadow-2xl p-0 md:p-3 pl-2 md:ml-4">
<div className="mt-1 text-xl md:mt-3 md:text-3xl">{title}</div>
<div className="mt-0 text-sm md:mt-1.5 md:text-xl ">{description}</div>
<div className="elements grid grid-cols-12 h-full">
<div className="col-span-8 max-h-full md:col-span-7 drop-shadow-2xl md:p-3 pl-2 md:ml-4">
<div className="mt-1 text-lg md:mt-3 md:text-3xl">{title}</div>
<div className="mt-0 md:mt-1.5 md:text-xl overflow-hidden">
<ReactMarkdown>{description}</ReactMarkdown>
</div>
</div>
<div className="hidden md:block"/>
<div className="col-span-1 w-full h-full flex align-center justify-center text-zinc-50 pr-10">
<ArrowLongRightIcon
className="max-w-full stroke-1 text-white z-10 aspect-square w-50"/>
<div className="col-span-1 hidden md:block"/>
<div className="col-span-4 w-full flex justify-end max-h-full md:py-5">
<div
className="grid grid-cols-2 grid-rows-2 mr-1 md:mr-5 gap-3 aspect-square max-w-full object-contain max-h-full icon-grid">
<AiFillGithub/>
</div>
</div>
</div>
</div>