Components folder refactoring

src/components/core/Picture.astro

@@ -0,0 +1,41 @@
+---
+import { getPicture } from "@astrojs/image";
+
+const {
+  src,
+  alt,
+  sizes,
+  widths,
+  aspectRatio,
+  formats = ["avif", "webp"],
+  loading = "lazy",
+  decoding = "async",
+  class: className = "",
+  ...attrs
+} = Astro.props;
+
+const { image, sources = [] } =
+  !src ? { image: {}}
+    : (typeof src === "string"
+      ? { image: { src } }
+      :
+      await getPicture({
+        src,
+        widths,
+        formats,
+        aspectRatio,
+      }))
+---
+
+{ (src || !image) &&
+<picture {...attrs}>
+  {sources.map((attrs) => <source {...attrs} {sizes} />)}
+  <img {...image} {loading} {decoding} {alt} class={className} />
+</picture>
+}
+
+<style>
+  img {
+    content-visibility: auto;
+  }
+</style>