feat: updating the styles and image zoom files

Author: websiddu

lib/Image/image-zoom.css renamed to lib/Image/ImageZoom.scss

@@ -1,9 +1,10 @@
 'use client';
 
 import { type ImgHTMLAttributes } from 'react';
-import './image-zoom.css';
 import Zoom, { type UncontrolledProps } from 'react-medium-image-zoom';
 
+import './ImageZoom.scss';
+
 type ImageProps = ImgHTMLAttributes<HTMLImageElement>;
 
 type ImageZoomProps = {

lib/Image/ImageZoom.tsx

@@ -1,43 +1,45 @@
-.steps {
-  @apply flex flex-col pl-2 mt-8 mb-4;
+[data-stubby-ui] {
+  &.steps {
+    @apply flex flex-col pl-2 mt-8 mb-4;
 
-  > :last-child {
-    @apply pb-3;
+    > :last-child {
+      @apply pb-3;
+    }
   }
-}
 
-.step {
-  @apply relative flex pb-8;
-}
+  .step {
+    @apply relative flex pb-8;
+  }
 
-.stepLine {
-  @apply absolute left-[14px] top-[2.3rem] h-[calc(100%-2.75rem)] w-px bg-gray-200/70 dark:bg-white/10;
-}
+  .stepLine {
+    @apply absolute left-[14px] top-[2.3rem] h-[calc(100%-2.75rem)] w-px bg-gray-200/70 dark:bg-white/10;
+  }
 
-.stepContainer {
-  @apply -mt-0.5 ml-8 flex-1;
+  .stepContainer {
+    @apply -mt-0.5 ml-8 flex-1;
 
-  > :first-child {
-    @apply mt-0;
+    > :first-child {
+      @apply mt-0;
+    }
   }
-}
 
-.stepNumber {
-  @apply flex h-7 w-7 items-center justify-center rounded-full bg-slate-100 dark:bg-slate-50/20 font-mono text-sm font-bold dark:text-slate-100;
-}
+  .stepNumber {
+    @apply flex h-7 w-7 items-center justify-center rounded-full bg-slate-100 dark:bg-slate-50/20 font-mono text-sm font-bold dark:text-slate-100;
+  }
 
-.stepTitle {
-  @apply mt-0 text-lg font-medium leading-6 text-slate-800 dark:text-slate-200;
-}
+  .stepTitle {
+    @apply mt-0 text-lg font-medium leading-6 text-slate-800 dark:text-slate-200;
+  }
 
-.stepContent {
-  @apply mt-1 dark:text-slate-400;
+  .stepContent {
+    @apply mt-1 dark:text-slate-400;
 
-  > :first-child {
-    @apply mt-0;
-  }
+    > :first-child {
+      @apply mt-0;
+    }
 
-  > :last-child {
-    @apply mb-0;
+    > :last-child {
+      @apply mb-0;
+    }
   }
 }

lib/Steps/Steps.scss

@@ -12,6 +12,7 @@ export const Step = ({ children, number, title }: StepProps) => {
     <div
       className={'step'}
       role="listitem"
+      data-stubby-ui
     >
       <div className={'stepLine'}></div>
       <div className={'stepNumber'}>{number}</div>
@@ -24,5 +25,12 @@ export const Step = ({ children, number, title }: StepProps) => {
 };
 
 export const Steps = ({ children }: { children: React.ReactNode }) => {
-  return <div className={'steps'}>{children}</div>;
+  return (
+    <div
+      className={'steps'}
+      data-stubby-ui
+    >
+      {children}
+    </div>
+  );
 };