Files
supabase/apps/www/components/BrowserFrame.tsx
Francesco Sansalvadore e76aa11508 homepage cleanup (#29295)
* new homepage logos marquee

* add products claim

* logos spacing

* dashboard table editor demo

* dashboard table editor demo

* dashboard recordings

* rls policies

* update hp frameworks

* add dataAPIs to homepage bento

* tweet section update

* padding

* hp products update

* new customer stories hp section

* height

* finish homepage details

* update logos

* fix database visual

* improve functions visual ux

* animate data-apis visual

* realtime visual update

* reduce-motion and update chatbase logo

* lighter heading paragraph

* improve video tabs components

* add priority to offsetted images

* video plays inline

* fix mobile tweets spacing

* smoll

* load video slightly before the component enters the viewport

* fix product pointer-events

* theme based and light weight dashboard video

* testimonials margin

* remove yellow tint from light mode recordings

* fix vitest window-matchMedia error

* fix vitest window-matchMedia error

* fix url type

* remove tweet
2024-09-17 11:07:38 +02:00

28 lines
846 B
TypeScript

import React, { PropsWithChildren } from 'react'
import { cn } from 'ui'
interface Props extends PropsWithChildren {
className?: string
contentClassName?: string
}
const BrowserFrame: React.FC<Props> = ({ children, className, contentClassName }) => {
return (
<div
className={cn(
'relative rounded-2xl shadow-lg p-2 pt-0 w-full h-full bg-alternative-200 border flex flex-col',
className
)}
>
<div className="w-full px-2 py-3 relative flex items-center gap-1.5 lg:gap-2">
<div className="w-2 h-2 bg-border rounded-full" />
<div className="w-2 h-2 bg-border rounded-full" />
<div className="w-2 h-2 bg-border rounded-full" />
</div>
<div className={cn('h-full w-full rounded-lg', contentClassName)}>{children}</div>
</div>
)
}
export default BrowserFrame