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

Add Grain project on index, add bannerSettings.quality for grain banner

Browse Source
This commit is contained in:
Xevion
2023-02-25 18:53:49 -06:00
parent 8f13bd60e7
commit f47f9b482d
4 changed files with 25 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/ItemCard.tsx
View File

@@ -10,6 +10,7 @@ import {type LinkIcon, LinkIcons} from "../utils/types";
type ItemCardProps = {
banner: string;
bannerSettings?: { quality: number};
bannerBlur: string;
title: string;
description: string;
@@ -17,7 +18,7 @@ type ItemCardProps = {
location: string;
}
const ItemCard = ({banner, bannerBlur, title, description, links, location}: ItemCardProps) => {
const ItemCard = ({banner, bannerBlur, title, description, links, location, bannerSettings}: ItemCardProps) => {
const itemRef = useRef<HTMLDivElement>(null);
const mobileButtonRef = useRef<HTMLAnchorElement>(null);
const [active, toggleActive, setActive] = useToggle()
@@ -41,7 +42,9 @@ const ItemCard = ({banner, bannerBlur, title, description, links, location}: Ite
<div ref={itemRef}
className={classNames("item [&:not(:first-child)]:mt-3", active ? "active" : null)}
onClick={navigate}>
<DependentImage fill src={banner} blurDataURL={bannerBlur}
<DependentImage fill src={banner}
quality={bannerSettings?.quality ?? 75}
blurDataURL={bannerBlur}
className={(loaded) => classNames("object-cover", loaded ? null : "blur-xl")}
placeholder="blur"
alt={`Banner for ${title}`}