update

Author: MananTank

apps/dashboard/src/@/components/blocks/Img.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { ImageIcon } from "lucide-react";
 import { useState } from "react";
-import { BadgeContainer, mobileViewport } from "../../../stories/utils";
+import { BadgeContainer } from "../../../stories/utils";
 import { Spinner } from "../ui/Spinner/Spinner";
 import { Button } from "../ui/button";
 import { Img } from "./Img";
@@ -19,28 +19,21 @@ export const Desktop: Story = {
   args: {},
 };
 
-export const Mobile: Story = {
-  args: {},
-  parameters: {
-    viewport: mobileViewport("iphone14"),
-  },
-};
-
 function Story() {
   return (
     <div className="flex flex-col gap-10 p-10">
       <p> All images below are set with size-20 className </p>
 
       <BadgeContainer label="No Src - pending">
-        <Img className="size-20" />
+        <Img className="size-20" src={undefined} />
       </BadgeContainer>
 
       <BadgeContainer label="Failed to load - fallback">
         <Img className="size-20" src="invalid-src" />
       </BadgeContainer>
 
       <BadgeContainer label="No Src, pending - rounded-full">
-        <Img className="size-20 rounded-full" />
+        <Img className="size-20 rounded-full" src={undefined} />
       </BadgeContainer>
 
       <BadgeContainer label="Failed to load - fallback - rounded-full">
@@ -59,6 +52,7 @@ function Story() {
 
       <BadgeContainer label="Custom Skeleton">
         <Img
+          src={undefined}
           skeleton={
             <div className="flex items-center justify-center rounded-lg border">
               <Spinner className="size-6" />

apps/dashboard/src/@/components/blocks/Img.tsx

@@ -9,13 +9,14 @@ type imgElementProps = React.DetailedHTMLProps<
 > & {
   skeleton?: React.ReactNode;
   fallback?: React.ReactNode;
+  src: string | undefined;
 };
 
 export function Img(props: imgElementProps) {
   const [_status, setStatus] = useState<"pending" | "fallback" | "loaded">(
     "pending",
   );
-  const status = props.src ? _status : "pending";
+  const status = props.src === undefined ? "pending" : _status;
   const { className, ...restProps } = props;
   const defaultSkeleton = <div className="animate-pulse bg-accent" />;
   const defaultFallback = <div className="bg-muted" />;