mirror of
https://github.com/supabase/supabase.git
synced 2026-10-11 20:35:07 +03:00
Francesco Sansalvadore
e76aa11508
* 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
57 lines
1.3 KiB
TypeScript
57 lines
1.3 KiB
TypeScript
import Image from 'next/image'
|
|
import { useTheme } from 'next-themes'
|
|
|
|
type VideoType = {
|
|
sources: {
|
|
src: string
|
|
type?: string
|
|
}[]
|
|
poster: string
|
|
title: string
|
|
}
|
|
|
|
interface Props {
|
|
video: VideoType
|
|
highlights?: { label: string; link?: string }[]
|
|
}
|
|
|
|
const VideoWithHighlights = (props: Props) => {
|
|
const { resolvedTheme } = useTheme()
|
|
|
|
return (
|
|
<div className="relative h-full w-full">
|
|
<video
|
|
className="relative z-10 block w-full h-full reduce-motion:hidden"
|
|
height="100%"
|
|
width="100%"
|
|
loop
|
|
muted
|
|
autoPlay
|
|
controls={false}
|
|
playsInline
|
|
poster={
|
|
props.video.poster ??
|
|
`/images/index/dashboard/supabase-table-editor${resolvedTheme?.includes('dark') ? '' : '-light'}.png`
|
|
}
|
|
>
|
|
{props.video.sources.map((source, i) => (
|
|
<source
|
|
key={`${source.src}${i === 0 ? '.webm' : '.mp4'}`}
|
|
src={`${source.src}${i === 0 ? '.webm' : '.mp4'}`}
|
|
type={source.type ?? i === 0 ? 'video/webm' : 'video/mp4'}
|
|
/>
|
|
))}
|
|
</video>
|
|
<Image
|
|
src={props.video.poster}
|
|
alt={props.video.title}
|
|
width={1920}
|
|
height={1080}
|
|
className="reduce-motion:block relative z-0 overflow-hidden"
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default VideoWithHighlights
|