1 files changed, 25 insertions, 0 deletions
diff --git a/src/components/Media.svelte b/src/components/Media.svelte
new file mode 100644
index 00000000..d24dd12d
--- /dev/null
+++ b/src/components/Media.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+  export const isImage = (url: string) =>
+    url?.match(/^.*\.(jpg|jpeg|png|webp|gif|avif|svg)/gi);
+  export const isVideo = (url: string) =>
+    url?.match(/^.*\.(mov|mkv|mp4|avi|m4v|webm)/gi);
+  export const isAudio = (url: string) => url?.match(/^.*\.(ogg|mp3|wav)/gi);
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  export let value: any;
+</script>
+
+{#if !!isImage(value.url)}
+  <img src={value.url} alt={""} />
+{:else if isVideo(value.url)}
+  <!-- svelte-ignore a11y-media-has-caption -->
+  <video src={value.url} controls />
+{:else if isAudio(value.url)}
+  <audio src={value.url} controls>
+    <a href={value.url}>{value.url.replace(/https?:\/\/(www\.)?/, "")}</a>
+  </audio>
+{:else}
+  <a href={value.url}>
+    {value.url.replace(/https?:\/\/(www\.)?/, "")}
+  </a>
+{/if}