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

Update: ltr rtl responsiveness fixed

src/containers/Koel/Content/index.tsx

@@ -4,7 +4,8 @@ import { Box, BoxProps, Divider, Typography, styled } from '@mui/material';
 import Link from 'next/link';
 import React from 'react';
 
-interface KoelShowcaseProps extends BoxProps {
+export interface KoelShowcaseProps extends BoxProps {
+  direction?: 'ltr' | 'rtl';
   title?: string;
   sloganHTML?: string;
   descriptionHTML?: string;
@@ -16,6 +17,7 @@ interface KoelShowcaseProps extends BoxProps {
 };
 
 const Content: React.FC<KoelShowcaseProps> = ({
+  direction,
   title,
   sloganHTML,
   descriptionHTML,
@@ -72,19 +74,23 @@ const Content: React.FC<KoelShowcaseProps> = ({
   )
 };
 
-export default styled(Content)(({ theme }) => ({
+export default styled(Content)(({ theme, direction = 'ltr' }) => ({
   height: 'max-content',
   width: '50%',
   margin: 'auto 0',
 
   [theme.Breakpoints.down('lg')]: {
     width: '100%',
-    gridColumn: '10 / 20',
+    gridColumn: (direction === 'ltr') ? '10 / 20' : '-10 / -20',
     gridRow: '9 / 20',
   },
 
   [theme.Breakpoints.down('md')]: {
     gridColumn: '2 / 20',
+    gridRow: '10 / 19',
+  },
+
+  [theme.Breakpoints.down('xs')]: {
     gridRow: '9 / 21',
   },
 }));

src/containers/Koel/Showcase/Potrait/index.tsx

@@ -10,10 +10,11 @@ const PotraitImage = styled(Image)(({ theme }) => ({
 }));
 
 interface PotraitProps extends BoxProps {
+  direction?: 'ltr' | 'rtl';
   image: ShowcaseImage
 }
 
-const Potrait: React.FC<PotraitProps> = ({ image, ...props }) => {
+const Potrait: React.FC<PotraitProps> = ({ direction, image, ...props }) => {
   return (
     <Box {...props}>
       <PotraitImage
@@ -27,7 +28,7 @@ const Potrait: React.FC<PotraitProps> = ({ image, ...props }) => {
   )
 };
 
-export default styled(Potrait)(({ theme }) => ({
+export default styled(Potrait)(({ theme, direction = 'ltr' }) => ({
   width: '100%',
   height: '100%',
   gridColumn: '6 / 17',
@@ -40,13 +41,13 @@ export default styled(Potrait)(({ theme }) => ({
   overflow: 'hidden',
 
   [theme.Breakpoints.down('lg')]: {
-    gridColumn: '2 / 9',
+    gridColumn: (direction === 'ltr') ? '2 / 9' : '-2 / -9',
     gridRow: '7 / 21',
   },
 
   [theme.Breakpoints.down('md')]: {
     gridColumn: '13 / 20',
-    gridRow: '4 / 13',
+    gridRow: '3 / 12',
     aspectRatio: '1 / 1',
   },
 

src/containers/Koel/Showcase/Ribbon/index.tsx

@@ -22,10 +22,12 @@ const Filter = styled('div')(({ theme }) => ({
 }));
 
 interface RibbonProps extends BoxProps {
+  direction?: 'ltr' | 'rtl';
   image: ShowcaseImage
 }
 
 const Ribbon: React.FC<RibbonProps> = ({
+  direction = 'ltr',
   image,
   ...props
 }) => {
@@ -43,10 +45,10 @@ const Ribbon: React.FC<RibbonProps> = ({
   )
 };
 
-export default styled(Ribbon)(({ theme }) => ({
+export default styled(Ribbon)(({ theme, direction }) => ({
   height: '100%',
   width: '100%',
-  gridColumn: '1 / 10',
+  gridColumn: (direction === 'ltr') ? '1 / 10' : '11 / 21',
   gridRow: '1 / 21',
   position: 'relative',
 

src/containers/Koel/Showcase/index.tsx

@@ -8,20 +8,22 @@ export type ShowcaseImage = {
   alt?: string;
   description?: string;
 }
-interface KoelShowcaseProps extends BoxProps {
+export interface KoelShowcaseProps extends BoxProps {
+  direction?: 'ltr' | 'rtl';
   top: ShowcaseImage,
   bottom: ShowcaseImage
 };
 
 const Showcase: React.FC<KoelShowcaseProps> = ({
+  direction = 'ltr',
   top,
   bottom,
   ...props
 }) => {
   return (
     <Box {...props}>
-      <Ribbon image={bottom} />
-      <Potrait image={top} />
+      <Ribbon image={bottom} direction={direction} />
+      <Potrait image={top} direction={direction} />
     </Box>
   )
 };

src/containers/Koel/index.tsx

@@ -23,14 +23,14 @@ interface KoelProps {
 
 const Koel: React.FC<KoelProps> = ({
   images,
-  direction,
+  direction = 'ltr',
   content,
   ...props
 }) => {
   return (
     <section {...props} >
-      <Showcase {...images} />
-      <Content {...content} />
+      <Showcase {...images} direction={direction} />
+      <Content {...content} direction={direction} />
     </section>
   )
 };
@@ -49,7 +49,6 @@ export default styled(Koel)(({ theme, direction = 'ltr' }) => ({
 
   [theme.Breakpoints.down('lg')]: {
     display: 'grid',
-    marginTop: theme.Spaces.sm,
     padding: 0,
     gridTemplateColumns: 'repeat(20, 1fr)',
     gridTemplateRows: 'repeat(20, 1fr)',

src/pages/index.tsx

@@ -42,6 +42,28 @@ const Home: NextPage = () => {
             }
           }}
         />
+        <Koel
+          direction="rtl"
+          images={{
+            top: {
+              src: '/images/home/container-4/image-top.jpg',
+            },
+            bottom: {
+              src: '/images/home/container-4/image-bottom.jpg',
+            },
+          }}
+          content={{
+            title: 'IMMERSIVE TEACHING',
+            sloganHTML: `A Strategy to <br />
+            Revolutionize Learning`,
+            descriptionHTML: `Grasping attention is easier, keeping learners engaged throughout the process and command action is a different story. We learn much faster visually, and retention is simply great if it is rewarding. In comes the array of Immersive education for new generation of India. <br />
+            Putting our best foot forward, IMS resources are used in teaching the new wave of decision-makers. Integrating with schools and teaching organizations, creating the seamless streaming of knowledge like never before.`,
+            button: {
+              buttonText: 'VIEW MORE',
+              link: '/education-and-teaching/resources'
+            }
+          }}
+        />
       </MainLayout>
     </React.Fragment>
   );