From 256e7a9149d6eb0842f822e3701baf2b9fd56136 Mon Sep 17 00:00:00 2001
From: Hyeongseok Kim <hyeongseok@coconutsilo.com>
Date: Sat, 24 Aug 2024 04:35:04 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20placehold?=
 =?UTF-8?q?er=20=EC=B6=94=EA=B0=80=20(#8)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/utils.ts | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index 0dba1f8..559af11 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -22,3 +22,24 @@ export const handlePhoneNumberChange = (
     setValue(formattedNumber);
   }
 };
+
+// Base64 encoded SVG to use as placeholder
+export const toBase64 = (str: string) =>
+  typeof window === 'undefined'
+    ? Buffer.from(str).toString('base64')
+    : window.btoa(str);
+
+// SVG shimmer effect
+export const shimmer = (w: number, h: number) => `
+<svg width="${w}" height="${h}" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <defs>
+    <linearGradient id="g">
+      <stop stop-color="#333" offset="20%" />
+      <stop stop-color="#222" offset="50%" />
+      <stop stop-color="#333" offset="70%" />
+    </linearGradient>
+  </defs>
+  <rect width="${w}" height="${h}" fill="#333" />
+  <rect id="r" width="${w}" height="${h}" fill="url(#g)" />
+  <animate xlink:href="#r" attributeName="x" from="-${w}" to="${w}" dur="1s" repeatCount="indefinite"  />
+</svg>`;