chore: refactor

Author: nd0ut

src/components/UploadcareImage.tsx

@@ -1,5 +1,9 @@
 import Image, { ImageProps } from 'next/image';
 import React from 'react';
+import {
+  PLACEHOLDER_SIZE_FALLBACK,
+  PLACEHOLDER_SIZE_MULTIPLIER
+} from '../utils/constants';
 import { getInt } from '../utils/helpers';
 import { uploadcareLoader } from '../utils/loader';
 
@@ -12,7 +16,9 @@ const generateBlurDataUrl = (
   width: ImageProps['width']
 ): string => {
   const imageWidth = getInt(width);
-  const blurImageWidth = imageWidth ? Math.ceil(imageWidth * 0.01) : 10;
+  const blurImageWidth = imageWidth
+    ? Math.ceil(imageWidth * PLACEHOLDER_SIZE_MULTIPLIER)
+    : PLACEHOLDER_SIZE_FALLBACK;
   return uploadcareLoader({
     src: src,
     width: blurImageWidth,

src/utils/constants.ts

@@ -3,3 +3,5 @@ export const MAX_OUTPUT_JPEG_IMAGE_DIMENSION = 5000;
 export const NOT_PROCESSED_EXTENSIONS = ['svg', 'gif'];
 export const DEFAULT_PARAMS = ['format/auto', 'stretch/off', 'progressive/yes'];
 export const DEFAULT_CDN_DOMAIN = 'ucarecdn.com';
+export const PLACEHOLDER_SIZE_MULTIPLIER = 0.01;
+export const PLACEHOLDER_SIZE_FALLBACK = 10;