lightswind
Version:
A collection of beautifully crafted React Components, Blocks & Templates for Modern Developers. Create stunning web applications effortlessly by using our 160+ professional and animated react components.
14 lines • 3.25 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.Iphone16Pro = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
exports.Iphone16Pro = (0, react_1.forwardRef)(({ width = 433, height = 882, src, videoSrc, showIsland = true, islandWidth = 125, islandHeight = 40, frameColor = "white", frameDarkColor = "black", bezelColor = "neutral-100", screenRadius = 55, shadow = true, rounded = true, contentClassName, contentStyle, showCamera = true, screenGradient, hoverAnimation = true, ...props }, ref) => {
return ((0, jsx_runtime_1.jsxs)("svg", { ref: ref, width: width, height: height, viewBox: `0 0 ${width} ${height}`, fill: "none", xmlns: "http://www.w3.org/2000/svg", className: `
${shadow ? "drop-shadow-2xl" : ""}
${hoverAnimation ? "transition-transform duration-500 hover:scale-[1.02]" : ""}
`, ...props, children: [(0, jsx_runtime_1.jsx)("rect", { x: "2", y: "2", width: width - 4, height: height - 4, rx: rounded ? 75 : 0, className: `fill-${frameColor} dark:fill-${frameDarkColor} stroke-gray-200 dark:stroke-white/20`, strokeWidth: "2" }), (0, jsx_runtime_1.jsx)("rect", { x: "20", y: "20", width: width - 40, height: height - 40, rx: rounded ? 56 : 0, className: `fill-${bezelColor} dark:fill-muted-foreground/10
stroke-neutral-300/40 dark:stroke-neutral-700/50` }), (0, jsx_runtime_1.jsx)("clipPath", { id: "screen", children: (0, jsx_runtime_1.jsx)("rect", { x: "21", y: "21", width: width - 42, height: height - 42, rx: screenRadius, ry: screenRadius }) }), screenGradient && ((0, jsx_runtime_1.jsx)("rect", { x: "21", y: "21", width: width - 42, height: height - 42, rx: screenRadius, ry: screenRadius, fill: `url(#gradient)`, clipPath: "url(#screen)" })), src && ((0, jsx_runtime_1.jsx)("image", { href: src, x: "21", y: "21", width: width - 42, height: height - 42, preserveAspectRatio: "xMidYMid slice", clipPath: "url(#screen)", className: contentClassName, style: contentStyle })), videoSrc && ((0, jsx_runtime_1.jsx)("foreignObject", { x: "21", y: "21", width: width - 42, height: height - 42, clipPath: "url(#screen)", children: (0, jsx_runtime_1.jsx)("video", { className: `w-full h-full object-cover rounded-[${screenRadius}px] ${contentClassName}`, src: videoSrc, autoPlay: true, loop: true, muted: true, playsInline: true, style: contentStyle }) })), showIsland && ((0, jsx_runtime_1.jsx)("rect", { x: width / 2 - islandWidth / 2, y: "28", width: islandWidth, height: islandHeight, rx: 20, className: "fill-neutral-200 dark:fill-neutral-800" })), showCamera && ((0, jsx_runtime_1.jsx)("circle", { cx: width / 2 + islandWidth / 4, cy: "48", r: "6", className: "fill-neutral-400 dark:fill-neutral-600" })), screenGradient && ((0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsxs)("linearGradient", { id: "gradient", x1: "0", y1: "0", x2: "1", y2: "1", children: [(0, jsx_runtime_1.jsx)("stop", { offset: "0%", stopColor: screenGradient.split(",")[0] }), (0, jsx_runtime_1.jsx)("stop", { offset: "100%", stopColor: screenGradient.split(",")[1] || screenGradient.split(",")[0] })] }) }))] }));
});
exports.Iphone16Pro.displayName = "Iphone16Pro";
//# sourceMappingURL=iphone16-pro.js.map