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

Update: add Malkoha
Brahmware · Sep 13, 2023 · 603c920 · 603c920
2 parents 334eb3f + 550454f
commit 603c920
Show file tree

Hide file tree

Showing 5 changed files with 119 additions and 13 deletions.
diff --git a/src/containers/Koel/Content/index.tsx b/src/containers/Koel/Content/index.tsx
@@ -87,11 +87,10 @@ export default styled(Content)(({ theme, direction = 'ltr' }) => ({
 
   [theme.Breakpoints.down('md')]: {
     gridColumn: '2 / 20',
-    gridRow: '10 / 19',
+    gridRow: '9 / 21',
   },
 
   [theme.Breakpoints.down('xs')]: {
-    gridRow: '9 / 21',
     display: 'flex',
     flexDirection: 'column',
     justifyContent: 'center',

diff --git a/src/containers/Koel/index.tsx b/src/containers/Koel/index.tsx
@@ -1,5 +1,5 @@
-import { Box, styled } from '@mui/material';
 import React from 'react';
+import { styled } from '@mui/material';
 import Showcase, { ShowcaseImage } from './Showcase';
 import Content from './Content';
 

diff --git a/src/containers/Malkoha/index.tsx b/src/containers/Malkoha/index.tsx
@@ -0,0 +1,107 @@
+import React from 'react';
+import { Typography, styled, useTheme } from '@mui/material';
+import { ContentTitleDivider } from '@components/Dividers';
+import ContainedButton from '@components/Button/ContainedButton';
+import Link from 'next/link';
+
+interface MalkohaProps {
+  content: {
+    title?: string;
+    sloganHTML?: string;
+    descriptionHTML?: string;
+    button?: {
+      buttonText: string;
+      link?: string;
+      onClick?: () => void;
+    };
+  }
+};
+
+const Malkoha: React.FC<MalkohaProps> = ({
+  content: {
+    title,
+    sloganHTML,
+    descriptionHTML,
+    button,
+  },
+  ...props
+}) => {
+  return (
+    <section {...props}>
+      <Typography
+        variant="body2"
+        component='h3'
+        sx={{ my: 2 }}
+      >
+        {title}
+      </Typography>
+      <Typography
+        variant="h2"
+        component='h2'
+        dangerouslySetInnerHTML={{ __html: sloganHTML || '' }}
+        />
+      <ContentTitleDivider sx={{ my: 3 }} />
+      <Typography
+        variant="body1"
+        component='p'
+        sx={{ maxWidth: useTheme().Breakpoints.values.md }}
+        dangerouslySetInnerHTML={{ __html: descriptionHTML || '' }}
+      />
+      {
+        button && (
+          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>
+          )
+        )
+      }
+    </section>
+  )
+};
+
+export default styled(Malkoha)(({ theme }) => ({
+  height: '100%',
+  width: '100%',
+  maxWidth: theme.Breakpoints.values.xl,
+  margin: '0 auto',
+  padding: theme.Spaces.xxl + ' ' + theme.Spaces.md,
+
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center',
+
+  '& > *': {
+    textAlign: 'center',
+  },
+
+  '& hr': {
+    alignSelf: 'center',
+  },
+
+  '& br': {
+    display: 'none'
+  },
+
+  '& p > br': {
+    display: 'block'
+  }
+}));
diff --git a/src/icons/utility/SunIcon.tsx b/src/icons/utility/SunIcon.tsx
@@ -19,18 +19,10 @@ const SunIcon = ({ hovered, active, ...props }: UtilityIconProps) => {
       viewBox='0 0 18.16863 18.16863'
       {...props}
     >
-      <path id='star' d='M13.30957,9.08432A4.22526,4.22526,0,1,1,9.08429,4.85905h0A4.22529,4.22529,0,0,1,13.30957,9.08432Z' />
+      <path id='star' d="M14.15737,10A4.15739,4.15739,0,1,1,10,5.8426,4.15742,4.15742,0,0,1,14.15737,10Z" />
       <path 
         id='glare' 
-        d='M9.08429,0a.63379.63379,0,0,1,.63379.63379v1.6901a.63379.63379,0,0,1-1.26758,0V.63379A.63381.63381,0,0,1,9.08429,0ZM2.04389,
-        2.084a.63378.63378,0,0,1,.8954-.04008L4.817,3.76069a.63378.63378,0,1,1-.85533.93549h0L2.084,2.97939A.6338.6338,0,0,1,2.04388,
-        2.084h0Zm14.08089,0a.63379.63379,0,0,1-.04014.89542h0L14.20693,4.69618a.6338.6338,0,0,1-.85536-.9355l1.87779-1.7168A.6338.6338,
-        0,0,1,16.12478,2.084ZM0,9.08432a.63381.63381,0,0,1,.63379-.6338h1.6901A.63379.63379,0,0,1,2.32412,9.7181H.63379A.63379.63379,0,
-        0,1,0,9.08432Zm15.21094,0a.63381.63381,0,0,1,.63379-.63379h1.69011a.63379.63379,0,0,1,.00023,1.26758H15.84473A.63381.63381,0,0,
-        1,15.21094,9.08432Zm-1.87982,4.24656a.63382.63382,0,0,1,.89635,0l1.87771,1.878a.63378.63378,0,0,
-        1-.89546.89715h0l-.00089-.00089-1.87771-1.878a.63372.63372,0,0,1,0-.89621ZM4.83764,13.331a.63383.63383,0,0,1,0,.89635l-1.8779,
-        1.87788a.63377.63377,0,0,1-.89631-.89627h0l1.8779-1.878a.63377.63377,0,0,1,.8963,0Zm4.24665,1.88a.63381.63381,0,0,1,
-        .63379.63379v1.69011a.63379.63379,0,0,1-1.26758,0V15.84473A.63381.63381,0,0,1,9.08429,15.21094Z'
+        d="M6.03338,5.12586a.74833.74833,0,1,1-.74833-.74833A.74833.74833,0,0,1,6.03338,5.12586ZM3.97178,10a.74833.74833,0,1,1-.74833-.74832A.74833.74833,0,0,1,3.97178,10ZM6.0321,14.71741a.74833.74833,0,1,1-.74833-.74833A.74833.74833,0,0,1,6.0321,14.71741Zm4.71621-11.494A.74833.74833,0,1,1,10,2.47512.74833.74833,0,0,1,10.74831,3.22345Zm0,13.55307A.74833.74833,0,1,1,10,16.02819.74832.74832,0,0,1,10.74831,16.77652Zm4.69593-2.05778a.74833.74833,0,1,1-.74833-.74833A.74833.74833,0,0,1,15.44424,14.71874ZM17.52484,10a.74833.74833,0,1,1-.74832-.74833A.74831.74831,0,0,1,17.52484,10Zm-2.0695-4.87413a.74833.74833,0,1,1-.74833-.74833A.74833.74833,0,0,1,15.45534,5.12586Z"
       />
       {system && light && !active && (
         <circle

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -5,6 +5,7 @@ import MainLayout from "@layouts/MainLayout";
 import Carousel from "@components/Carousel";
 import Koel from "@containers/Koel";
 import { Box } from "@mui/material";
+import Malkoha from "@containers/Malkoha";
 
 const MetaData: React.FC = () => {
   return (
@@ -42,6 +43,13 @@ const Home: NextPage = () => {
             }
           }}
         />
+        <Malkoha 
+          content={{
+            title: 'OUR MISSION',
+            sloganHTML: `Lead the Indian Infotainment Media Revolution`,
+            descriptionHTML: `By making every Information, every Discovery, every Invention, every Human Challenge accessible to every person starting with the Indian pacific Region. We'll Disrupt conventional Indian Media System, consumption and value by providing open platform to millions of minds with their theories about existence.`,
+          }}
+        />
         <Koel
           direction="rtl"
           images={{