Merge pull request #7 from Brahmware:add-koel-container

Update: Responsive Koel
Brahmware · Sep 13, 2023 · 50a38af · 50a38af
2 parents 4a4cec2 + 69d3c1f
commit 50a38af
Show file tree

Hide file tree

Showing 7 changed files with 89 additions and 14 deletions.
diff --git a/src/containers/Koel/Content/index.tsx b/src/containers/Koel/Content/index.tsx
@@ -1,14 +1,17 @@
 import ContainedButton from '@components/Button/ContainedButton';
 import { ContentTitleDivider } from '@components/Dividers';
 import { Box, BoxProps, Divider, Typography, styled } from '@mui/material';
+import Link from 'next/link';
 import React from 'react';
 
 interface KoelShowcaseProps extends BoxProps {
   title?: string;
   sloganHTML?: string;
   descriptionHTML?: string;
   button?: {
-    buttonText: string
+    buttonText: string;
+    link?: string;
+    onClick?: () => void;
   };
 };
 
@@ -36,18 +39,33 @@ const Content: React.FC<KoelShowcaseProps> = ({
       <ContentTitleDivider sx={{ my: 3 }} />
       <Typography
         variant="body1"
+        component='p'
         dangerouslySetInnerHTML={{ __html: descriptionHTML || '' }}
       />
       {
         button && (
-          <ContainedButton
-            color="secondary"
-            aria-label='view more about us'
-            vocab='view more about us'
-            sx={{ my: 3 }}
-          >
-            {button.buttonText}
-          </ContainedButton>
+          button.link ? (
+            <ContainedButton
+              color="secondary"
+              aria-label='view more about us'
+              vocab='view more about us'
+              sx={{ my: 3 }}
+              component={Link}
+              href={button.link}
+            >
+              {button.buttonText}
+            </ContainedButton>
+          ) : (
+            <ContainedButton
+              color="secondary"
+              aria-label='view more about us'
+              vocab='view more about us'
+              sx={{ my: 3 }}
+              onClick={button.onClick}
+            >
+              {button.buttonText}
+            </ContainedButton>
+          )
         )
       }
     </Box>
@@ -58,4 +76,15 @@ export default styled(Content)(({ theme }) => ({
   height: 'max-content',
   width: '50%',
   margin: 'auto 0',
+
+  [theme.Breakpoints.down('lg')]: {
+    width: '100%',
+    gridColumn: '10 / 20',
+    gridRow: '9 / 20',
+  },
+
+  [theme.Breakpoints.down('md')]: {
+    gridColumn: '2 / 20',
+    gridRow: '9 / 21',
+  },
 }));
diff --git a/src/containers/Koel/Showcase/Potrait/index.tsx b/src/containers/Koel/Showcase/Potrait/index.tsx
@@ -38,4 +38,26 @@ export default styled(Potrait)(({ theme }) => ({
   border: `${theme.Spaces.sm} solid ${theme.palette.background.default}`,
   position: 'relative',
   overflow: 'hidden',
+
+  [theme.Breakpoints.down('lg')]: {
+    gridColumn: '2 / 9',
+    gridRow: '7 / 21',
+  },
+
+  [theme.Breakpoints.down('md')]: {
+    gridColumn: '13 / 20',
+    gridRow: '4 / 13',
+    aspectRatio: '1 / 1',
+  },
+
+  [theme.Breakpoints.down('sm')]: {
+    gridColumn: '9 / 20',
+    gridRow: '4 / 10',
+  },
+
+  [theme.Breakpoints.down('xs')]: {
+    gridColumn: '2 / 20',
+    gridRow: '3 / 9',
+  },
+
 }));
diff --git a/src/containers/Koel/Showcase/Ribbon/index.tsx b/src/containers/Koel/Showcase/Ribbon/index.tsx
@@ -11,7 +11,7 @@ const RibbonImage = styled(Image)(({ theme }) => ({
   filter: theme.Filters.belowGlass,
 }));
 
-const Filter = styled('div')(({theme}) => ({
+const Filter = styled('div')(({ theme }) => ({
   position: 'absolute',
   height: '100%',
   width: '100%',
@@ -49,4 +49,9 @@ export default styled(Ribbon)(({ theme }) => ({
   gridColumn: '1 / 10',
   gridRow: '1 / 21',
   position: 'relative',
+
+  [theme.breakpoints.down('lg')]: {
+    gridColumn: '1 / 21',
+    gridRow: '1 / 8',
+  }
 }));
diff --git a/src/containers/Koel/Showcase/index.tsx b/src/containers/Koel/Showcase/index.tsx
@@ -31,4 +31,11 @@ export default styled(Showcase)(({ theme }) => ({
   display: 'grid',
   gridTemplateColumns: 'repeat(20, 1fr)',
   gridTemplateRows: 'repeat(20, 1fr)',
+
+  [theme.Breakpoints.down('lg')]: {
+    gridColumn: '1 / 21',
+    gridRow: '1 / 21',
+    width: '100%',
+    height: '100%',
+  }
 }));
diff --git a/src/containers/Koel/index.tsx b/src/containers/Koel/index.tsx
@@ -14,7 +14,9 @@ interface KoelProps {
     sloganHTML?: string;
     descriptionHTML?: string;
     button?: {
-      buttonText: string
+      buttonText: string;
+      link?: string;
+      onClick?: () => void;
     };
   }
 };
@@ -44,5 +46,12 @@ export default styled(Koel)(({ theme, direction = 'ltr' }) => ({
   flexDirection: direction === 'rtl' ? 'row-reverse' : 'row',
   justifyContent: 'space-between',
   alignItems: 'center',
-  flexWrap: 'wrap',
+
+  [theme.Breakpoints.down('lg')]: {
+    display: 'grid',
+    marginTop: theme.Spaces.sm,
+    padding: 0,
+    gridTemplateColumns: 'repeat(20, 1fr)',
+    gridTemplateRows: 'repeat(20, 1fr)',
+  },
 }));
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -37,7 +37,8 @@ const Home: NextPage = () => {
             IMS is developing its’ unique voice AI for making real-time translation possible in all Indian languages. <br />
             This is an Indian family of informational, educational, and entertainment-oriented Television, Applications and Websites offering value to how Education is developed and accessed by the world.`,
             button: {
-              buttonText: 'VIEW MORE'
+              buttonText: 'VIEW MORE',
+              link: '/business/about-us'
             }
           }}
         />

diff --git a/src/theme/Breakpoints/index.tsx b/src/theme/Breakpoints/index.tsx
@@ -1,4 +1,5 @@
 interface Values {
+  xxs: number;
   xs: number;
   sm: number;
   md: number;
@@ -7,7 +8,8 @@ interface Values {
 }
 
 export const values: Values = {
-  xs: 0,
+  xxs: 0,
+  xs: 420,
   sm: 600,
   md: 900,
   lg: 1200,