chore: add image stories for blobs

webui/src/stories/BlobPreview.stories.ts

@@ -1,6 +1,11 @@
 import type { Meta, StoryObj } from "@storybook/svelte";
 import BlobPreview from "../components/display/BlobPreview.svelte";
-import { videoAddress, videoVerticalAddress } from "./common";
+import {
+  imageAddress,
+  imageVerticalAddress,
+  videoAddress,
+  videoVerticalAddress,
+} from "./common";
 
 const meta: Meta<BlobPreview> = {
   title: "Blobs/BlobPreview",
@@ -12,7 +17,14 @@ const meta: Meta<BlobPreview> = {
 export default meta;
 type Story = StoryObj<BlobPreview>;
 
-// More on writing stories with args: https://storybook.js.org/docs/7.0/svelte/writing-stories/args
+export const Image: Story = {
+  args: { address: imageAddress },
+};
+
+export const ImageVertical: Story = {
+  args: { address: imageVerticalAddress },
+};
+
 export const Video: Story = {
   args: { address: videoAddress },
 };

webui/src/stories/BlobViewer.stories.ts

@@ -1,6 +1,11 @@
 import type { Meta, StoryObj } from "@storybook/svelte";
 import BlobViewer from "../components/display/BlobViewer.svelte";
-import { videoAddress, videoVerticalAddress } from "./common";
+import {
+  imageAddress,
+  imageVerticalAddress,
+  videoAddress,
+  videoVerticalAddress,
+} from "./common";
 
 const meta: Meta<BlobViewer> = {
   title: "Blobs/BlobViewer",
@@ -18,7 +23,14 @@ const meta: Meta<BlobViewer> = {
 export default meta;
 type Story = StoryObj<BlobViewer>;
 
-// More on writing stories with args: https://storybook.js.org/docs/7.0/svelte/writing-stories/args
+export const Image: Story = {
+  args: { address: imageAddress },
+};
+
+export const ImageVertical: Story = {
+  args: { address: imageVerticalAddress },
+};
+
 export const Video: Story = {
   args: { address: videoAddress },
 };

webui/src/stories/common.ts

@@ -1,2 +1,7 @@
+export const imageAddress = "zQmQ91HTsWMpuoHPJXf1B95Jp9QU2R2WSzZYLL1vNNivmkE";
+export const imageVerticalAddress =
+  "zQmd9ZbZKMm92oVgCdf7DpHCxJE9Vkb1JXNxXfgVcxLXnwc";
+
 export const videoAddress = "zQmeQHYJRniFnkFhG8fDNKQmwqHJW9rLyhX5WCnoDtg7wWa";
-export const videoVerticalAddress = "zQmfJtFbrckn8ZXFuEpL2tbaQGSjv7smTamd2TSTYQGidwt";
+export const videoVerticalAddress =
+  "zQmfJtFbrckn8ZXFuEpL2tbaQGSjv7smTamd2TSTYQGidwt";