import React from 'react' ; import { Text , Box , Flex , ButtonPrimary , Link } from 'design' ; import Card from 'design/Card' ; import Image from 'design/Image' ; import * as Icons from 'design/Icon' ; import empty from './assets' ; export default function Empty ( props ) { const { canCreate , onClick , clusterId , emptyStateInfo } = props ; const { title , description , buttonText , videoLink , readOnly , } = emptyStateInfo ; if ( ! canCreate ) { return ( < Box p = { 8 } mt = { 4 } mx = "auto" maxWidth = "664px" textAlign = "center" color = "text.primary" bg = "primary.light" borderRadius = "12px" > < Text typography = "h2" mb = "3" > { readOnly . title } < /Text> < Text > Either there are no { readOnly . resource } in the " < Text as = "span" bold > { clusterId } < /Text> " cluster, or your roles don't grant you access. < /Text> < /Box>); } return ( < Card p = { 4 } as = { Flex } maxWidth = "900px" width = "100%" mt = { 4 } mx = "auto" bg = "primary.main" > < Flex as = { Link } mr = { 4 } maxWidth = "296px" maxHeight = "176px" bg = "primary.dark" p = { 4 } borderRadius = { 8 } alignItems = "center" justifyContent = "center" style = { { position : 'relative' } } target = "_blank" href = { videoLink } > < Image width = "220px" src = { empty } / > < Flex style = { { position : 'absolute' } } flexDirection = "column" alignItems = "center" mt = { 3 } > < Icons . CirclePlay mb = { 3 } fontSize = "64px" / > < Text color = "text.primary" fontWeight = { 700 } > WATCH THE QUICKSTART < /Text> < /Flex> < /Flex> < Box > < Box mb = { 4 } > < Text typography = "h3" mb = { 2 } fontWeight = { 700 } fontSize = { 14 } > { title } < /Text> { description } < /Box> < ButtonPrimary onClick = { onClick } width = "224px" > { buttonText } < /ButtonPrimary> < /Box> < /Card>); } export type EmptyStateInfo = { title : string ; description : JSX . Element ; buttonText : string ; videoLink : string ; readOnly : { title : string ; resource : string ; } ; } ; export type Props = { canCreate : boolean ; onClick ( ) : void ; clusterId : string ; emptyStateInfo : EmptyStateInfo ; } ;