chuckdries/Personal-Website
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix? palette switch

Browse Source
This commit is contained in:
Chuck Dries 2023-01-07 14:01:09 -08:00
parent 7ffb2e31c1
commit f3992d599a
No known key found for this signature in database
GPG Key ID: A00B7AEAE1DC5BE6
1 changed files with 28 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/components/MasonryGallery.tsx
View File

@ -135,6 +135,7 @@ const MasonryGallery = ({
const widthNumber = ((ar / rowAspectRatioSum) * 100).toFixed(7); const widthNumber = ((ar / rowAspectRatioSum) * 100).toFixed(7);
width = `${widthNumber}%`; width = `${widthNumber}%`;
} }
const vibrant = getVibrant(image);
// @ts-ignore // @ts-ignore
const img = getImage(image); const img = getImage(image);
return ( return (
@ -173,13 +174,33 @@ const MasonryGallery = ({
image={img} image={img}
objectFit="cover" objectFit="cover"
/> />
{ showPalette && <div className="grid grid-cols-6 flex-shrink-0 h-[20px] w-full" style={getVibrantStyle(getVibrant(image))}> { showPalette && vibrant && <div className="grid grid-cols-6 flex-shrink-0 h-[20px] w-full">
<div className="bg-vibrant"></div> <div
<div className="bg-vibrant-light"></div> style={{ background: `rgba(${vibrant.Vibrant?.join(",")})` }}
<div className="bg-vibrant-dark"></div> ></div>
<div className="bg-muted"></div> <div
<div className="bg-muted-light"></div> style={{
<div className="bg-muted-dark"></div> background: `rgb(${vibrant.LightVibrant?.join(",")})`,
}}
></div>
<div
style={{
background: `rgb(${vibrant.DarkVibrant?.join(",")})`,
}}
></div>
<div
style={{ background: `rgb(${vibrant.Muted?.join(",")})` }}
></div>
<div
style={{
background: `rgb(${vibrant.LightMuted?.join(",")})`,
}}
></div>
<div
style={{
background: `rgb(${vibrant.DarkMuted?.join(",")})`,
}}
></div>
</div>} </div>}
</div> </div>
)} )}