johannes-hernehult
254998f3ef
* Class Naming: Standardized button classes with -button suffixes and simplified wrapper classes * Step Numbering: Added explicit span wrappers for step numbers in Frame.tsx * Spacing Adjustments: Tightened margins and gaps in Frame.css and Step.css * Print Styles: Updated Guide.css to define @page size as A4 and simplified .frame selectors * Code Cleanup: Minor whitespace and formatting adjustments in App.css and Step.tsx
18 lines
494 B
TypeScript
18 lines
494 B
TypeScript
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">
|
|
<span>{stepIndex + 1}.</span>{step.text}
|
|
</li>
|
|
))}
|
|
</ol>
|
|
</div>
|
|
);
|
|
}
|