Components
Android Mock
Rounded-[2rem] outer + p-[5px] + bg-fg. Tasti su -right-[3px]. Punch-hole assoluto top center bg-zinc-900.
MockDeviceAndroid
Esempio01
android-mock.tsx 001Default · punch-hole002App preview · feedInbox · 12Update merged
Build passed
New PR comment
tsxsrc/components/android-mock.tsx
import type { ReactNode } from "react";
import { cn } from "@/lib/utils";
export type AndroidMockProps = {
imageSrc?: string;
videoSrc?: string;
children?: ReactNode;
width?: number;
height?: number;
className?: string;
};
/**
* <AndroidMock/> — Pixel-style frame with a centered front-camera
* punch-hole. Tighter corner radius than iPhone, no dynamic island.
*/
export function AndroidMock({
imageSrc,
videoSrc,
children,
width = 433,
height = 882,
className,
}: AndroidMockProps) {
return (
<div
className={cn("relative", className)}
style={{ aspectRatio: `${width} / ${height}` }}
>
<div className="absolute inset-0 rounded-[2rem] bg-fg p-[5px] shadow-md">
<div className="absolute -right-[3px] top-[12%] h-16 w-[3px] rounded-r-md bg-fg-muted" />
<div className="absolute -right-[3px] top-[26%] h-24 w-[3px] rounded-r-md bg-fg-muted" />
<div className="relative h-full w-full overflow-hidden rounded-[1.7rem] bg-black">
<div className="absolute left-1/2 top-2 z-20 h-3 w-3 -translate-x-1/2 rounded-full bg-black ring-1 ring-zinc-700" />
{videoSrc ? (
<video
src={videoSrc}
autoPlay
muted
loop
playsInline
className="h-full w-full object-cover"
/>
) : imageSrc ? (
// eslint-disable-next-line @next/next/no-img-element
<img
src={imageSrc}
alt=""
className="h-full w-full object-cover"
/>
) : (
children
)}
</div>
</div>
</div>
);
}
Note — Punch-hole è un cerchietto di 12px (h-3 w-3) bg-zinc-900 ring-1 ring-zinc-800. Tasti volume e power solo sul lato destro.
Prompt LLM02
Incolla in Claude o ChatGPT per generare la tua variante. Include il contesto del brand, i token e i vincoli del progetto.
Sei un senior frontend engineer. Stai lavorando su un sito Next.js 16 + React 19 + Tailwind v4 in italiano, look chanhdai-inspired: colonna stretta 672px, Geist Sans + Geist Mono, hairline 1px, divisori a stripe diagonale, palette zinc.
Token CSS disponibili: --bg, --bg-alt, --fg, --fg-muted, --fg-soft, --border, --border-strong, --accent. Usa SEMPRE queste variabili tramite le utility tailwind generate (bg-bg, text-fg-muted, border-border, ecc.). Helper "cn" da "@/lib/utils". Niente librerie UI extra: solo lucide-react e tailwind-merge.
Genera un componente <AndroidMock> Pixel-style.
Props:
- imageSrc?, videoSrc?, children?: ReactNode.
- width?: number (default 433), height?: number (default 882), className?.
Implementazione:
- Server component. Wrapper relative aspect-ratio width/height.
- Frame absolute inset-0 rounded-[2rem] bg-fg p-[5px] shadow-md.
- 2 tasti laterali absolute -right-[3px]: power + volume.
- Inner screen relative h-full overflow-hidden rounded-[1.7rem] bg-black.
- Punch-hole: absolute left-1/2 top-2 h-3 w-3 -translate-x-1/2 rounded-full bg-zinc-900 ring-1 ring-zinc-800 z-20.
- Content: video | img | children.
Output: file completo src/components/android-mock.tsx.
Uso tipico03
<AndroidMock imageSrc="/screen.png" />
Dipendenze04
Ti è servito? Dimmelo, oppure proponi il prossimo componente.
