make the placeholders look less pixelated

petar-i-todorov · Jan 7, 2024 · ac0c9e8 · ac0c9e8
1 parent b7e73ef
commit ac0c9e8
Showing 1 changed file with 15 additions and 8 deletions.
diff --git a/app/components/blurrable-image.tsx b/app/components/blurrable-image.tsx
@@ -48,13 +48,20 @@ export const BlurrableImage = ({
 				'relative isolate',
 			)}
 		>
-			{/* it gets the alt from the props */}
-			{/* eslint-disable-next-line jsx-a11y/alt-text */}
-			<img
-				{...props}
-				src={`data:image/webp;base64,${dataUrl}`}
-				className={clsx(props.className, 'absolute inset-0 z-0')}
-			/>
+			<div
+				className={clsx(
+					getWidthAndHeight(props.className ?? ''),
+					'absolute inset-0 z-0 backdrop-blur-xl',
+				)}
+			>
+				{/* it gets the alt from the props */}
+				{/* eslint-disable-next-line jsx-a11y/alt-text */}
+				<img
+					{...props}
+					src={`data:image/webp;base64,${dataUrl}`}
+					className={clsx(props.className)}
+				/>
+			</div>
 			{/* it gets the alt from the props */}
 			{/* eslint-disable-next-line jsx-a11y/alt-text */}
 			<img
@@ -65,7 +72,7 @@ export const BlurrableImage = ({
 						hidden: !isLoaded,
 					},
 					props.className,
-					'animate-fade-in relative z-[1]',
+					'relative z-[1] animate-fade-in',
 				)}
 				ref={imageRef}
 			/>