feat: kubefirst content modal

components/clusterReady/clusterReady.styled.ts

@@ -9,12 +9,9 @@ export const Container = styled(Column)`
   width: 100%;
 `;
 
-export const Description = styled.div`
-  width: 378px;
-`;
-
 export const Link = styled(NextLink)`
-  color: ${({ theme }) => theme.colors.primary};
+  color: ${({ theme }) => theme.colors.white};
+  text-transform: none;
   text-decoration: none;
 `;
 

components/clusterReady/index.tsx

@@ -2,9 +2,10 @@ import React, { FunctionComponent } from 'react';
 import Image from 'next/image';
 
 import Typography from '../typography';
+import Button from '../../components/button';
 import boxImgSrc from '../../public/static/box.svg';
 
-import { Container, Description, Link, Title } from './clusterReady.styled';
+import { Container, Link, Title } from './clusterReady.styled';
 
 const boxImageSrc = process.env.STORYBOOK_MODE ? boxImgSrc : '/static/box.svg';
 
@@ -24,14 +25,11 @@ const ClusterReady: FunctionComponent<ClusterRunningMessageProps> = ({
         Cluster <strong>{clusterName || '<cluster identifier>'}</strong> is now up and running.
       </Typography>
     </Title>
-    <Description>
-      <Typography variant="body2" align="center">
-        Your Kubefirst Console is ready.{' '}
-        <Link href={`https://kubefirst.${domainName}/services`} target="_blank">
-          Take me there
-        </Link>
-      </Typography>
-    </Description>
+    <Button variant="contained" color="primary">
+      <Link href={`https://kubefirst.${domainName}/services`} target="_blank">
+        Open kubefirst console
+      </Link>
+    </Button>
   </Container>
 );
 

components/contentHit/contentHit.styled.ts

@@ -0,0 +1,47 @@
+import styled from 'styled-components';
+
+import Typography from '../../components/typography';
+import { textTruncate } from '../../utils/theme';
+
+export const Container = styled.div`
+  border: 1px solid ${({ theme }) => theme.colors.pastelLightBlue};
+  border-radius: 8px 8px 4px 4px;
+  cursor: pointer;
+  height: 210px;
+`;
+
+export const CardImage = styled.div`
+  position: relative;
+  & img {
+    border-radius: 8px 8px 0px 0px;
+  }
+`;
+
+export const CardDetails = styled.div`
+  padding: 16px;
+  height: 62px;
+  width: 176px;
+`;
+
+export const CardStats = styled.div`
+  color: ${({ theme }) => theme.colors.metro};
+  display: flex;
+  gap: 8px;
+  margin-top: 8px;
+`;
+
+export const Duration = styled.div`
+  background: rgba(63, 63, 70, 0.6);
+  border-radius: 4px;
+  bottom: 8px;
+  padding: 0 4px;
+  position: absolute;
+  right: 6px;
+`;
+
+export const Title = styled(Typography)`
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  ${textTruncate(2)};
+`;

components/contentHit/index.tsx

@@ -0,0 +1,67 @@
+import React, { FunctionComponent, useMemo } from 'react';
+import Typography from 'components/typography';
+import moment from 'moment';
+import Image from 'next/image';
+
+import { Content } from '../../types/algolia/content';
+import { BISCAY } from '../../constants/colors';
+
+import { CardDetails, CardImage, CardStats, Container, Duration, Title } from './contentHit.styled';
+
+export interface ContentHitProps {
+  hit: Content;
+}
+
+const ContentHit: FunctionComponent<ContentHitProps> = ({ hit }) => {
+  const { duration, id, title, imageUrl, publishedAt, viewCount } = hit;
+
+  const handleClickHit = () => {
+    window.open(`https://www.youtube.com/watch?v=${id}`, '_blank');
+  };
+
+  const formattedDuration = useMemo(() => {
+    const fullDuration = moment.duration(duration);
+
+    const durationHours = fullDuration.hours();
+    const durationMinutes = fullDuration.minutes();
+    const durationSeconds = fullDuration.seconds();
+
+    const validateValue = (value: number) => {
+      if (value < 9) {
+        return `0${value}`;
+      }
+
+      return value;
+    };
+
+    if (durationHours > 0) {
+      return `${durationHours}:${validateValue(durationMinutes)}:${validateValue(durationSeconds)}`;
+    }
+
+    return `${validateValue(durationMinutes)}:${validateValue(durationSeconds)}`;
+  }, [duration]);
+
+  return (
+    <Container onClick={handleClickHit}>
+      <CardImage>
+        <Image alt={title} src={imageUrl} height={110} width={208} />
+        <Duration>
+          <Typography variant="labelSmall" color="secondary">
+            {formattedDuration}
+          </Typography>
+        </Duration>
+      </CardImage>
+      <CardDetails>
+        <Title variant="labelMedium" color={BISCAY} sx={{ textTransform: 'capitalize' }}>
+          {title}
+        </Title>
+        <CardStats>
+          <Typography variant="body3">{viewCount} views</Typography>
+          <Typography variant="body3">{`•  ${moment(publishedAt).fromNow()}`}</Typography>
+        </CardStats>
+      </CardDetails>
+    </Container>
+  );
+};
+
+export default ContentHit;

components/flappyKray/flappyKray.styled.ts

@@ -1,13 +1,5 @@
 import styled from 'styled-components';
 import TwitterIcon from '@mui/icons-material/Twitter';
-import CloseIcon from '@mui/icons-material/Close';
-
-export const Close = styled(CloseIcon)`
-  cursor: pointer;
-  position: fixed;
-  top: 40px;
-  right: 40px;
-`;
 
 export const ShareInTwitter = styled(TwitterIcon)`
   cursor: pointer;

components/flappyKray/index.tsx

@@ -1,8 +1,9 @@
 import React, { FunctionComponent, useRef } from 'react';
 
-import Modal from '../../components/modal';
+import Modal, { Close } from '../../components/modal';
+import { FLAPPY_TWEET } from '../../constants';
 
-import { Close, ShareInTwitter } from './flappyKray.styled';
+import { ShareInTwitter } from './flappyKray.styled';
 
 export interface FlappyKrayProps {
   closeModal: () => void;
@@ -12,17 +13,6 @@ export interface FlappyKrayProps {
 const FlappyKray: FunctionComponent<FlappyKrayProps> = ({ closeModal, isOpen }) => {
   const flappyKRayRef = useRef<HTMLIFrameElement>(null);
 
-  // const handleOnKeyPress = ({ keyCode }: KeyboardEvent) => {
-  //   console.log(flappyKRayRef.current?.contentWindow)
-  //   flappyKRayRef.current?.contentWindow?.fly(keyCode, '*');
-  // };
-
-  // useEffect(() => {
-  //   window.addEventListener('keydown', handleOnKeyPress);
-  //   return () => window.removeEventListener('keydown', handleOnKeyPress);
-  // }, []);
-
-  flappyKRayRef.current?.contentWindow?.postMessage('');
   return (
     <Modal isOpen={isOpen} backgroundColor="transparent" boxShadow={false}>
       <>
@@ -41,10 +31,7 @@ const FlappyKray: FunctionComponent<FlappyKrayProps> = ({ closeModal, isOpen })
           color="secondary"
           fontSize="large"
           onClick={() =>
-            window.open(
-              `https://twitter.com/intent/tweet?url=I'm trying @kubefirst \n&hashtags=kubefirst,gitops,kubernetes`,
-              '_blank',
-            )
+            window.open(`https://twitter.com/intent/tweet?url=${encodeURI(FLAPPY_TWEET)}`, '_blank')
           }
         />
         <Close onClick={closeModal} color="secondary" fontSize="large" />

components/installationStepContainer/installationStepContainer.styled.ts

@@ -32,7 +32,8 @@ export const Content = styled(Column)<{ hasInfo?: boolean; isProvisionStep: bool
   ${({ isProvisionStep }) =>
     isProvisionStep &&
     `
-    height: 100%;
+      background-color: transparent;
+      height: 100%;
   `}
 
   ${media.greaterThan<{ hasInfo: boolean }>('lg')`

components/linearProgress/linearProgress.styled.ts

@@ -1,7 +1,6 @@
 import styled from 'styled-components';
 
 export const Container = styled.div`
-  background-color: ${({ theme }) => theme.colors.white};
   display: flex;
   justify-content: center;
   padding: 40px 0 10px 0 !important;

components/modal/index.tsx

@@ -2,13 +2,16 @@ import React, { FunctionComponent } from 'react';
 import ModalMui from '@mui/material/Modal';
 import { Box } from '@mui/material';
 
+export { Close } from './modal.styled';
+
 const style = {
   position: 'absolute',
   top: '50%',
   left: '50%',
   transform: 'translate(-50%, -50%)',
   width: 'auto',
   borderRadius: '8px',
+  outline: 'none',
   zIndex: 2000,
 };
 

components/modal/modal.styled.ts

@@ -1,5 +1,13 @@
 import styled from 'styled-components';
+import CloseIcon from '@mui/icons-material/Close';
 
 export const FragmentContainer = styled.div`
   position: relative;
 `;
+
+export const Close = styled(CloseIcon)`
+  cursor: pointer;
+  position: fixed;
+  top: 40px;
+  right: 40px;
+`;

components/navigation/index.tsx

@@ -4,6 +4,7 @@ import HelpIcon from '@mui/icons-material/Help';
 import { BsSlack } from 'react-icons/bs';
 import Link from 'next/link';
 
+import Typography from '../typography';
 import { ECHO_BLUE } from '../../constants/colors';
 
 import {
@@ -14,6 +15,8 @@ import {
   KubefirstVersion,
   MenuItem,
   Title,
+  FlappyCard,
+  DocsCard,
 } from './navigation.styled';
 
 const FOOTER_ITEMS = [
@@ -32,6 +35,9 @@ const FOOTER_ITEMS = [
 export interface NavigationProps {
   domLoaded: boolean;
   handleIsActiveItem: (path: string) => boolean;
+  handleOpenContent: () => void;
+  handleOpenGame: () => void;
+  isProvisionStep: boolean;
   kubefirstVersion?: string;
   routes: Array<{
     icon: ReactNode;
@@ -44,6 +50,9 @@ export interface NavigationProps {
 const Navigation: FunctionComponent<NavigationProps> = ({
   domLoaded,
   handleIsActiveItem,
+  handleOpenContent,
+  handleOpenGame,
+  isProvisionStep,
   kubefirstVersion,
   routes,
 }) => {
@@ -74,6 +83,22 @@ const Navigation: FunctionComponent<NavigationProps> = ({
         )}
       </div>
       <FooterContainer>
+        {isProvisionStep && (
+          <>
+            <DocsCard onClick={handleOpenContent}>
+              <Image alt="controller-img" src="/static/learn.png" height={80} width={80} />
+              <Typography variant="subtitle2" color="secondary">
+                Got time? Sit back & learn...
+              </Typography>
+            </DocsCard>
+            <FlappyCard onClick={handleOpenGame}>
+              <Typography variant="subtitle2" color="secondary">
+                Bored? Play flappy K-ray and win stuff!
+              </Typography>
+              <Image alt="controller-img" src="/static/controller.png" height={80} width={80} />
+            </FlappyCard>
+          </>
+        )}
         {FOOTER_ITEMS.map(({ icon, path, title }) => (
           <Link href={path} key={path} target="_blank">
             <MenuItem>

components/navigation/navigation.styled.ts

@@ -121,3 +121,33 @@ export const KubefirstTitle = styled.div`
     } 
   `}
 `;
+
+export const RouterCard = styled.div`
+  align-items: center;
+  border-radius: 16px;
+  cursor: pointer;
+  display: none;
+  height: 135px;
+  padding: 0 16px;
+  width: 176px;
+
+  ${media.greaterThan('md')`
+    display: flex;
+  `}
+`;
+
+export const DocsCard = styled(RouterCard)`
+  border: 2px solid;
+  border-image-slice: 1;
+  border-image-source: linear-gradient(90deg, #7aa5e2 0%, #d0bae9 50%, #8851c8 100%);
+  border-width: 2px;
+  gap: 10px;
+  margin: 24px 24px 0 24px;
+`;
+
+export const FlappyCard = styled(RouterCard)`
+  background: linear-gradient(180deg, rgba(136, 81, 200, 0.6) 0%, rgba(129, 226, 180, 0.6) 100%);
+  margin: 24px 24px 40px 24px;
+`;
+
+export const ContentCard = styled.div``;

constants/colors.ts

@@ -49,3 +49,4 @@ export const EXCLUSIVE_PLUM = '#71717A';
 export const LAUGHING_ORANGE = '#F59E0B';
 export const SEFID_WHITE = '#FEF2F2';
 export const ASMANI_SKY = '#81E2B4';
+export const METRO = '#808191';

constants/index.ts

@@ -22,3 +22,7 @@ export const DOMAIN_REGEX = new RegExp(/[a-zA-Z0-9@:%._+~#=]{2,256}\.[a-z]{2,6}/
 
 export const KUBEFIRST_REPOSITORIES = ['gitops', 'metaphor'];
 export const KUBEFIRST_TEAMS = ['admins', 'developers'];
+
+export const FLAPPY_TWEET = `The @kubefirst team is making kubernetes platform provisioning so much fun! Check out this Flappy K-Ray game that they let you play while your cluster provisions! https://kray.kubefirst.com
+
+<note: add a screenshot of your high score for a chance to win a monthly prize!>`;

containers/kubefirstContent/hits.tsx

@@ -0,0 +1,21 @@
+import React, { FunctionComponent } from 'react';
+import { useHits } from 'react-instantsearch-hooks-web';
+
+import ContentHit from '../../components/contentHit';
+import { Content } from '../../types/algolia/content';
+
+import { HitsContainer } from './kubefirstContent.styled';
+
+const Hits: FunctionComponent = () => {
+  const { hits } = useHits<Content>();
+
+  return (
+    <HitsContainer>
+      {hits.map((hit: Content) => (
+        <ContentHit key={hit.id} hit={hit} />
+      ))}
+    </HitsContainer>
+  );
+};
+
+export default Hits;