Refactor Frame usage and improve HTML semantics

* Extract inline guide frames into a reusable Frame component
* Update step elements to use proper ordered lists (<ol> and <li>)
* Move related image and list styling to Frame.css

src/components/frame/Frame.tsx

@@ -0,0 +1,18 @@
+import type { FrameType } from "../../lib/schemas";
+
+export default function Frame({ frame } : { frame: FrameType }) {
+  return (
+    <div className="frame">
+      <h2>{frame.title}</h2>
+      <img src={URL.createObjectURL(frame.file)} alt={frame.title} />
+
+      <ol className="steps">
+        {frame.steps.map((step, stepIndex) => (
+          <li key={stepIndex} className="step">
+            {step.text}
+          </li>
+        ))}
+      </ol>
+    </div>
+  );
+}

src/features/guides/components/Frame.css

@@ -8,6 +8,12 @@
     border-radius: var(--radius);
 }
 
+.frame img {
+    max-height: 350px;
+    object-fit: contain;
+    object-position: left center;
+}
+
 .frame .buttons {
     display: flex;
     gap: var(--size-md);
@@ -20,3 +26,7 @@
 .frame .buttons .remove {
     margin-left: auto;
 }
+
+.frame ol {
+    margin-left: var(--size-md);
+}

src/features/guides/components/Frame.tsx

@@ -72,7 +72,7 @@ export default function Frame({
       >
         Add Step
       </button>
-      <div className="steps">
+      <ol className="steps">
         {frame.steps.map((step: StepType, index: number) => (
           <Step
             key={step.id}
@@ -82,7 +82,7 @@ export default function Frame({
             updateStep={updateStep}
           />
         ))}
-      </div>
+      </ol>
     </div>
   );
 }

src/features/guides/components/Step.tsx

@@ -13,7 +13,7 @@ export default function Step({
   index: number;
 }) {
   return (
-    <div className={"step " + index}>
+    <li className={"step " + index}>
       <label>
         <span>{index + 1}. </span>
         <input
@@ -25,6 +25,6 @@ export default function Step({
       <button type="button" onClick={() => removeStep(step.id)}>
         Remove Step
       </button>
-    </div>
+    </li>
   );
 }

src/features/guides/routes/Guide.css

@@ -3,11 +3,13 @@ main:has(.guide) {
     display: flex;
     justify-content: center;
 }
+
 .guide__frames {
     display: flex;
     flex-direction: column;
     gap: var(--size-xl);
 }
+
 .guide {
     max-width: 600px;
     .delete-button {
@@ -15,40 +17,30 @@ main:has(.guide) {
         bottom: var(--size-md);
         right: var(--size-md);
     }
+
     .edit-button {
         position: absolute;
         top: var(--size-md);
         right: 8rem;
     }
+
     .export-button {
         position: absolute;
         top: var(--size-md);
         right: var(--size-md);
     }
-    .guide__frame {
+
-        padding: var(--size-md);
-        background-color: var(--color-bg-panel);
-        display: flex;
-        flex-direction: column;
-        gap: var(--size-sm);
-    }
-    .guide__frame img {
-        max-height: 350px;
-        object-fit: contain;
-        object-position: left center;
-    }
-    .guide__frame ol {
-        margin-left: var(--size-md);
-    }
 }
 @media print {
     main:has(.guide) {
         padding: 0rem;
         justify-content: flex-start;
     }
+
     .guide__frames {
         display: block;
     }
+
     .guide__frame {
         position: relative;
         break-inside: avoid;
@@ -56,6 +48,7 @@ main:has(.guide) {
         background-color: var(--color-bg-panel);
         margin: var(--size-lg) 0;
     }
+
     .guide__frame img {
         max-width: 100%;
         max-height: 100px;

src/features/guides/routes/Guide.tsx

@@ -2,6 +2,7 @@ import "./Guide.css";
 import { useParams, Link } from "react-router";
 import { useGuides } from "../../../lib/contexts/guide.context";
 import useGuide from "../hooks/useGuide";
+import Frame from "../../../components/frame/Frame";
 
 export default function Guide() {
   const { id } = useParams();
@@ -20,18 +21,7 @@ export default function Guide() {
 
       <div className="guide__frames">
         {guide.frames.map((frame, index) => (
-          <div key={index} className="guide__frame frame">
+          <Frame key={index} frame={frame} />
-            <h2>{frame.title}</h2>
-            <img src={URL.createObjectURL(frame.file)} alt={frame.title} />
-
-            <ol className="steps">
-              {frame.steps.map((step, stepIndex) => (
-                <li key={stepIndex} className="guide__step">
-                  {step.text}
-                </li>
-              ))}
-            </ol>
-          </div>
         ))}
       </div>