mirror of
https://github.com/Drop-OSS/drop.git
synced 2026-08-24 15:22:05 +10:00
Husky
ff1144e016
* add basic git files to root * make server part of monorepo * import promo * import libraries base * import docs * import desktop * move docs and promo
32 lines
936 B
TypeScript
32 lines
936 B
TypeScript
import { clsx } from 'clsx'
|
|
|
|
export function Screenshot({
|
|
width,
|
|
height,
|
|
src,
|
|
className,
|
|
}: {
|
|
width: number
|
|
height: number
|
|
src: string
|
|
className?: string
|
|
}) {
|
|
return (
|
|
<div
|
|
style={{ '--width': width, '--height': height } as React.CSSProperties}
|
|
className={clsx(
|
|
className,
|
|
'relative aspect-[var(--width)/var(--height)] [--radius:var(--radius-xl)]',
|
|
)}
|
|
>
|
|
<div className="absolute -inset-(--padding) rounded-[calc(var(--radius)+var(--padding))] shadow-xs ring-1 ring-black/5 [--padding:--spacing(2)]" />
|
|
<img
|
|
alt=""
|
|
src={src}
|
|
className="h-full rounded-(--radius) shadow-2xl ring-1 ring-black/10"
|
|
/>
|
|
<span className='absolute bottom-0 left-0 text-xs text-zinc-300 text-center bg-zinc-900 rounded-(--radius) px-1 py-0.5'>All games and other content shown in screenshots are examples, without actual content.</span>
|
|
</div>
|
|
)
|
|
}
|