Function FakeBlock

frontend/app/onboarding/onboarding-layout.tsx:22–72

({
    icon,
    name,
    highlighted,
    className,
    markdown,
    imgsrc,
    editorText,
    editorFileName,
    editorLanguage,
}: FakeBlockProps)

};

export const FakeBlock = ({
    icon,
    name,
    highlighted,
    className,
    markdown,
    imgsrc,
    editorText,
    editorFileName,
    editorLanguage,
}: FakeBlockProps) => {
    return (
        <div
            className={cn(
                "w-full h-full bg-background rounded flex flex-col overflow-hidden border-2",
                highlighted ? "border-accent" : "border-border/50",
                className
            )}
        >
            <div className="flex items-center gap-2 px-2 py-1.5 bg-border/20 border-b border-border/50">
                <i className={makeIconClass(icon, false) + " text-xs text-foreground/70"} />
                <span className="text-xs text-foreground/70 flex-1">{name}</span>
                <span className="inline-block [&_svg]:fill-foreground/50 [&_svg_path]:!fill-foreground/50">
                    <MagnifyIcon enabled={false} />
                </span>
                <i className={makeIconClass("xmark-large", false) + " text-xs text-foreground/50"} />
            </div>
            <div className="flex-1 flex items-center justify-center overflow-auto p-4">
                {editorText ? (
                    <div className="w-full h-full">
                        <CodeEditor
                            blockId="fake-block"
                            text={editorText}
                            readonly={true}
                            fileName={editorFileName}
                            language={editorLanguage ?? "shell"}
                        />
                    </div>
                ) : imgsrc ? (
                    <img src={imgsrc} alt={name} className="max-w-full max-h-full object-contain" />
                ) : markdown ? (
                    <div className="w-full">
                        <WaveStreamdown text={markdown} />
                    </div>
                ) : (
                    <i className={makeIconClass(icon, false) + " text-4xl text-foreground/50"} />
                )}
            </div>
        </div>
    );
};

export const FakeLayout = () => {
    const layoutRef = useRef<HTMLDivElement>(null);