(props)
| 24 | bgColor: "white" | "black"; |
| 25 | setBgColor: React.Dispatch<React.SetStateAction<"white" | "black">>; |
| 26 | }> = (props) => { |
| 27 | const { |
| 28 | htmlPreview, |
| 29 | expanded, |
| 30 | setExpanded, |
| 31 | viewMode, |
| 32 | setViewMode, |
| 33 | bgColor, |
| 34 | setBgColor, |
| 35 | } = props; |
| 36 | |
| 37 | // Define consistent dimensions regardless of mode |
| 38 | const containerWidth = expanded ? 320 : 240; |
| 39 | const containerHeight = expanded ? 180 : 120; |
| 40 | |
| 41 | // Calculate scale factor first to use in content width calculation |
| 42 | const scaleFactor = Math.min( |
| 43 | containerWidth / htmlPreview.size.width, |
| 44 | containerHeight / htmlPreview.size.height, |
| 45 | ); |
| 46 | |
| 47 | // Calculate content dimensions based on view mode |
| 48 | const contentWidth = |
| 49 | viewMode === "desktop" |
| 50 | ? containerWidth |
| 51 | : viewMode === "mobile" |
| 52 | ? Math.floor(containerWidth * 0.4) // Narrower for mobile |
| 53 | : htmlPreview.size.width * scaleFactor + 2; // I don't know why I need the 2, but it works always. I guess rounding error for zoom. |
| 54 | |
| 55 | return ( |
| 56 | <div className="flex flex-col w-full bg-card rounded-lg border border-border"> |
| 57 | {/* Header with view mode controls */} |
| 58 | <div className="flex justify-between items-center px-3 py-2 border-b border-border"> |
| 59 | <h3 className="text-sm font-medium text-muted-foreground flex items-center gap-2"> |
| 60 | <MonitorSmartphone size={16} /> |
| 61 | Preview |
| 62 | </h3> |
| 63 | <div className="flex items-center gap-1"> |
| 64 | {/* Background Color Toggle - Only show in desktop and mobile modes */} |
| 65 | |
| 66 | <Button |
| 67 | variant="ghost" |
| 68 | size="icon-sm" |
| 69 | onClick={() => setBgColor(bgColor === "white" ? "black" : "white")} |
| 70 | className="mr-1 rounded-sm text-neutral-500 hover:bg-neutral-100 dark:text-neutral-400 dark:hover:bg-neutral-700" |
| 71 | aria-label={`Switch the preview to ${bgColor === "white" ? "black" : "white"} background.\nUseful to avoid black text on black background.`} |
| 72 | title={`Switch the preview to ${bgColor === "white" ? "black" : "white"} background.\nUseful to avoid black text on black background.`} |
| 73 | > |
| 74 | <Circle size={14} fill={bgColor} className="stroke-current" /> |
| 75 | </Button> |
| 76 | |
| 77 | {/* View Mode Toggle */} |
| 78 | {/* <div className="mr-1 flex bg-neutral-100 dark:bg-neutral-700 rounded-md p-0.5"> |
| 79 | <button |
| 80 | onClick={() => setViewMode("desktop")} |
| 81 | className={`p-1 rounded text-xs ${ |
| 82 | viewMode === "desktop" |
| 83 | ? "bg-white dark:bg-neutral-600 shadow-2xs text-neutral-800 dark:text-white" |
nothing calls this directly
no test coverage detected