"use client"; import type {Key} from "react-aria-components"; import {Tabs} from "@heroui/react"; import React from "react"; import {cnBase} from "tailwind-variants"; const DEFAULT_ZOOM = 200; const zoomLevels = [200, 100, 48, 35, 28, 24, 13, "macro"] as const; const zoomXMap: Record = { [100]: "4x", [13]: "0.5x", [200]: "8x", [24]: "1x", [28]: "1.2x", [35]: "1.5x", [48]: "2x", ["macro"]: "0.2x", }; const zoomImgMap: Record = { [100]: "https://www.apple.com/v/iphone-17-pro/a/images/overview/cameras/zoom/100mm__cykxcenbhvue_large_2x.jpg", [13]: "https://www.apple.com/v/iphone-17-pro/a/images/overview/cameras/zoom/13mm__dzafu9h1kaye_large_2x.jpg", [200]: "https://www.apple.com/v/iphone-17-pro/a/images/overview/cameras/zoom/200mm__c8kya18imsqe_large_2x.jpg", [24]: "https://www.apple.com/v/iphone-17-pro/a/images/overview/cameras/zoom/24mm__e54cxtdkdrwy_large_2x.jpg", [28]: "https://www.apple.com/v/iphone-17-pro/a/images/overview/cameras/zoom/28mm__fylmxo06jq6i_large_2x.jpg", [35]: "https://www.apple.com/v/iphone-17-pro/a/images/overview/cameras/zoom/35mm__k375wbkrjp2e_large_2x.jpg", [48]: "https://www.apple.com/v/iphone-17-pro/a/images/overview/cameras/zoom/48mm__bmrwps1q6w76_large_2x.jpg", ["macro"]: "https://www.apple.com/v/iphone-17-pro/a/images/overview/cameras/zoom/macro__bb7oud7ri2o2_large_2x.jpg", }; export default function AppleIPhoneCameraZoom() { const [selectedZoom, setSelectedZoom] = React.useState(DEFAULT_ZOOM); return (

{Object.keys(zoomImgMap).map((key) => ( {`iPhone

))}

{zoomLevels.map((zoom) => ( {zoom} {zoom === "macro" ? "" : "mm"} ))}

{Object.keys(zoomXMap).map((key) => (

{zoomXMap[key as keyof typeof zoomXMap]}

))}

); }