diff --git a/components/header.tsx b/components/header.tsx index 8e6ceeff6..515ddafce 100644 --- a/components/header.tsx +++ b/components/header.tsx @@ -16,7 +16,7 @@ export function Header() { href='/guides'>Guides Videos + href='/watch'>Videos Get Updates diff --git a/pages/guides/index.tsx b/pages/guides/index.tsx index f8263a38e..6f9b7ce21 100644 --- a/pages/guides/index.tsx +++ b/pages/guides/index.tsx @@ -1,4 +1,4 @@ -import { Badge, Box, Button, Container, Heading, Link, Stack, Text } from '@chakra-ui/react'; +import { Box, Container, Stack } from '@chakra-ui/react'; import { Header } from '../../components/header'; import { LinksList } from '../../components/links-list'; import { LinksListItem } from '../../components/links-list-item'; diff --git a/pages/watch/components/video-grid-item.tsx b/pages/watch/components/video-grid-item.tsx new file mode 100644 index 000000000..fbebaee26 --- /dev/null +++ b/pages/watch/components/video-grid-item.tsx @@ -0,0 +1,69 @@ +import { Badge, Box, Heading, Link, Text } from '@chakra-ui/react'; + +type VideoGridItemProps = { + title: string; + subtitle: string; + date: string; + isNew?: boolean; + isPro?: boolean; + colorIndex?: number; +}; + +const bgColorList = [ + 'gray.900', + 'purple.900', + 'blue.900', + 'red.900', + 'green.900', + 'teal.900', + 'yellow.900', + 'cyan.900', + 'pink.900', + + 'gray.800', + 'purple.800', + 'blue.800', + 'red.800', + 'green.800', + 'teal.800', + 'yellow.800', + 'cyan.800', + 'pink.800', + + 'gray.700', + 'purple.700', + 'blue.700', + 'red.700', + 'green.700', + 'teal.700', + 'yellow.700', + 'cyan.700', + 'pink.700', + + 'gray.600', + 'purple.600', + 'blue.600', + 'red.600', + 'green.600', + 'teal.600', + 'yellow.600', + 'cyan.600', + 'pink.600' +]; + +export function VideoGridItem(props: VideoGridItemProps) { + const { title, subtitle, date, isNew = false, isPro = false, colorIndex = 0 } = props; + + return ( + + + {isNew && New} + {isPro && PRO} + {date} + + {title} + {subtitle} + + ); +} diff --git a/pages/watch/index.tsx b/pages/watch/index.tsx index d77a00e95..b9a0e2839 100644 --- a/pages/watch/index.tsx +++ b/pages/watch/index.tsx @@ -1,5 +1,105 @@ +import { Box, Container, SimpleGrid, Stack } from '@chakra-ui/react'; +import { Header } from '../../components/header'; +import { OpensourceBanner } from '../../components/opensource-banner'; +import { UpdatesBanner } from '../../components/updates-banner'; +import { Footer } from '../../components/footer'; +import { VideoGridItem } from './components/video-grid-item'; +import { PageHeader } from '../../components/page-header'; + export default function Watch() { return ( -

Hello world

+ +
+ + + + + + + + + + + + + + + + + + + + + + +