From 8e0469a194677c3039291c121679a780a81da551 Mon Sep 17 00:00:00 2001
From: Patrick Alvin Alcala <patrick_alv@yahoo.com>
Date: Tue, 26 Aug 2025 15:10:47 +0800
Subject: [PATCH] New builtin-component for images

---
 src/builtin-components/Image/Image.tsx | 29 ++++++++++++++++++++++++++
 1 file changed, 29 insertions(+)
 create mode 100644 src/builtin-components/Image/Image.tsx

diff --git a/src/builtin-components/Image/Image.tsx b/src/builtin-components/Image/Image.tsx
new file mode 100644
index 0000000..7c897e6
--- /dev/null
+++ b/src/builtin-components/Image/Image.tsx
@@ -0,0 +1,29 @@
+import sharp from 'sharp'
+
+interface Props {
+  src: string
+  size?: number
+  alt?: string
+}
+
+const convertImage = async (props: Props) => {
+  const webp = await sharp(`src/assets/images/${props.src}`).webp({ quality: 75 }).resize(props.size).toBuffer()
+  await sharp(webp).toFile(`src/assets/compressed-images/${props.src.split('.').slice(0, -1).join('.')}.webp`)
+
+  const avif = await sharp(`src/assets/images/${props.src}`).avif({ quality: 60 }).resize(props.size).toBuffer()
+  await sharp(avif).toFile(`src/assets/compressed-images/${props.src.split('.').slice(0, -1).join('.')}.avif`)
+}
+
+export default (props: Props) => {
+  convertImage(props)
+
+  return (
+    <>
+      <picture class="fullscreen">
+        <source srcset={`src/assets/compressed-images/${props.src.split('.').slice(0, -1).join('.')}.avif`} type="image/avif" />
+        <source srcset={`src/assets/compressed-images/${props.src.split('.').slice(0, -1).join('.')}.webp`} type="image/webp" />
+        <img src={`src/assets/compressed-images/${props.src.split('.').slice(0, -1).join('.')}.webp`} width={props.size} height="auto" decoding="async" loading="lazy" alt={props.alt} />
+      </picture>
+    </>
+  )
+}