refactor: replace Row and Col - wip

Iteam1337 · Dec 8, 2022 · 2e6cc3d · 2e6cc3d
1 parent 8eaf20a
commit 2e6cc3d
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 28 deletions.
diff --git a/client/src/components/Carousel/Carousel.js b/client/src/components/Carousel/Carousel.js
@@ -2,7 +2,6 @@ import React, { useEffect, useState } from 'react'
 import Image from 'next/image'
 import { useNextSanityImage } from 'next-sanity-image'
 import styled from 'styled-components'
-import { Row, Col } from 'react-bootstrap'
 import Gravatar from 'react-gravatar'
 import Slider from 'react-slick'
 import { rgba } from 'polished'
@@ -308,20 +307,16 @@ export const Carousel = ({ content, coworker = false }) => {
   }
   return (
     <Container>
-      <Row className="justify-content-center">
-        <Col lg="12" xl="11">
-          <SliderStyled {...slickSettings} activeSlide={activeSlide}>
-            {content.map((person, i) => {
-              const active = activeSlide === i
-              return coworker ? (
-                <Coworker item={person} key={i} active={active} />
-              ) : (
-                <Client item={person} key={i} active={active} />
-              )
-            })}
-          </SliderStyled>
-        </Col>
-      </Row>
+      <SliderStyled {...slickSettings} activeSlide={activeSlide}>
+        {content.map((person, i) => {
+          const active = activeSlide === i
+          return coworker ? (
+            <Coworker item={person} key={i} active={active} />
+          ) : (
+            <Client item={person} key={i} active={active} />
+          )
+        })}
+      </SliderStyled>
     </Container>
   )
 }
diff --git a/client/src/components/Layout/Flex.js b/client/src/components/Layout/Flex.js
@@ -0,0 +1,20 @@
+import clsx from 'clsx'
+import React from 'react'
+
+export const Flex = ({ col, children, className }) => {
+  return (
+    <div
+      className={clsx(
+        className,
+        col === 2
+          ? 'lg:tw-gap-20 [&>*]:tw-w-full lg:[&>*]:tw-w-1/2'
+          : col === 3
+          ? '[&>*]:tw-w-full lg:[&>*]:tw-w-1/3'
+          : '[&>*]:tw-w-full',
+        'tw-flex tw-flex-col tw-gap-8 lg:tw-flex-row [&>*]:tw-w-full'
+      )}
+    >
+      {children}
+    </div>
+  )
+}
diff --git a/client/src/components/Layout/index.js b/client/src/components/Layout/index.js
@@ -1,2 +1,3 @@
 export { Container } from './Container'
 export { Layout } from './Layout'
+export { Flex } from './Flex'
diff --git a/client/src/pages/book.js b/client/src/pages/book.js
@@ -1,6 +1,5 @@
 import React, { useEffect } from 'react'
 import { NextSeo } from 'next-seo'
-import { Row, Col } from 'react-bootstrap'
 import { groq } from 'next-sanity'
 
 import {
@@ -16,7 +15,7 @@ import { Hero } from '../features/Hero'
 import { usePreviewSubscription } from '../lib/sanity'
 import { getClient } from '../lib/sanity.server'
 import { HubspotForm } from '../features/HubspotForm'
-import { Container } from '../components/Layout'
+import { Container, Flex } from '../components/Layout'
 
 const Book = ({ data, preview = false }) => {
   const { data: previewData } = usePreviewSubscription(data?.bookPageQuery, {
@@ -76,14 +75,14 @@ const Book = ({ data, preview = false }) => {
         )}
         <Section>
           <Container>
-            <Row>
-              <Col lg={6}>
+            <Flex col={2}>
+              <div>
                 <HubspotForm
                   value="contact1"
                   title="Boka ett möte i kalendern"
                 />
-              </Col>
-              <Col lg={5} className="offset-lg-1 order-lg-2 mt-lg-0">
+              </div>
+              <div>
                 <Box className="tw-mb-6">
                   <Typography.H2>
                     {page?.call?.title && page.call.title}
@@ -135,8 +134,8 @@ const Book = ({ data, preview = false }) => {
                       />
                     </Box>
                   ))}
-              </Col>
-            </Row>
+              </div>
+            </Flex>
           </Container>
         </Section>
       </PageWrapper>

diff --git a/client/src/pages/open-source-skolan/[slug].js b/client/src/pages/open-source-skolan/[slug].js
@@ -12,7 +12,7 @@ import { getClient } from '../../lib/sanity.server'
 import { filterDataToSingleItem } from '../../utils/helpers'
 import { BlogList } from '../../features/Aktuellt'
 import { ExitPreviewLink } from '../../components/ExitPreviewLink'
-import { Container } from '../../components/Layout'
+import { Container, Flex } from '../../components/Layout'
 
 const VideoContainer = styled.div`
   position: relative;
@@ -127,13 +127,13 @@ const LessonDetails = ({ data, preview = false }) => {
             <Section className="pb-0">
               <div className="pt-5"></div>
               <Container>
-                <Row className="justify-content-center text-center">
-                  <Col lg="12">
+                <Flex className="justify-content-center text-center">
+                  <div>
                     <Typography.H2>
                       Se fler lektioner i Open Source skolan
                     </Typography.H2>
-                  </Col>
-                </Row>
+                  </div>
+                </Flex>
               </Container>
             </Section>
             <BlogList posts={data.lessons} />