tbg-corp-web/src/sections/gallery.js

/** @jsxRuntime classic */
/** @jsx jsx */
import { jsx, Box, Container } from 'theme-ui';
import Masonry from 'react-masonry-component';
import SectionHeading from 'components/section-heading';
import BlogPost from 'components/cards/blog-post';
import thumb1 from 'assets/images/blog/1.jpg';
import thumb2 from 'assets/images/blog/2.jpg';
import thumb3 from 'assets/images/blog/3.jpg';
import thumb4 from 'assets/images/blog/4.jpg';
import thumb5 from 'assets/images/blog/5.jpg';
import thumb6 from 'assets/images/blog/6.jpg';
import thumb7 from 'assets/images/blog/7.jpg';
import thumb8 from 'assets/images/blog/8.jpg';
import thumb9 from 'assets/images/blog/9.jpg';

const data = [
  {
    id: 1,
    slug: '#how-to',
    thumbnail: thumb1,
    showDescription: true,
    // title: `How to work with prototype design with adobe xd featuring tools`,
    // description: `The 2019 Innovation by Design Awards honor the designers and businesses solving the problems of today and tomorrow. It is one of the most sought-after design`,
  },
  {
    id: 1,
    slug: '#how-to',
    thumbnail: thumb2,
    showDescription: true,
    // title: `How to work with prototype design with adobe xd featuring tools`,
    // description: `The 2019 Innovation by Design Awards honor the designers and businesses solving the problems of today and tomorrow. It is one of the most sought-after design`,
  },
  {
    id: 1,
    slug: '#how-to',
    thumbnail: thumb3,
    showDescription: true,
    // title: `How to work with prototype design with adobe xd featuring tools`,
    // description: `The 2019 Innovation by Design Awards honor the designers and businesses solving the problems of today and tomorrow. It is one of the most sought-after design`,
  },
  {
    id: 1,
    slug: '#how-to',
    thumbnail: thumb4,
    showDescription: true,
    // title: `How to work with prototype design with adobe xd featuring tools`,
    // description: `The 2019 Innovation by Design Awards honor the designers and businesses solving the problems of today and tomorrow. It is one of the most sought-after design`,
  },
  {
    id: 1,
    slug: '#how-to',
    thumbnail: thumb5,
    showDescription: true,
    // title: `How to work with prototype design with adobe xd featuring tools`,
    // description: `The 2019 Innovation by Design Awards honor the designers and businesses solving the problems of today and tomorrow. It is one of the most sought-after design`,
  },
  {
    id: 1,
    slug: '#how-to',
    thumbnail: thumb6,
    showDescription: true,
    // title: `How to work with prototype design with adobe xd featuring tools`,
    // description: `The 2019 Innovation by Design Awards honor the designers and businesses solving the problems of today and tomorrow. It is one of the most sought-after design`,
  },
  {
    id: 1,
    slug: '#how-to',
    thumbnail: thumb7,
    showDescription: true,
    // title: `How to work with prototype design with adobe xd featuring tools`,
    // description: `The 2019 Innovation by Design Awards honor the designers and businesses solving the problems of today and tomorrow. It is one of the most sought-after design`,
  },
  {
    id: 1,
    slug: '#how-to',
    thumbnail: thumb8,
    showDescription: true,
    // title: `How to work with prototype design with adobe xd featuring tools`,
    // description: `The 2019 Innovation by Design Awards honor the designers and businesses solving the problems of today and tomorrow. It is one of the most sought-after design`,
  },
  {
    id: 1,
    slug: '#how-to',
    thumbnail: thumb9,
    showDescription: true,
    // title: `How to work with prototype design with adobe xd featuring tools`,
    // description: `The 2019 Innovation by Design Awards honor the designers and businesses solving the problems of today and tomorrow. It is one of the most sought-after design`,
  },
  // {
  //   id: 2,
  //   slug: '#how-to',
  //   thumbnail: null,
  //   showDescription: false,
  //   title: `Anti bias receives honorable gift mention at Fast Company’s most Innovation by Design Awards`,
  //   description: `The 2019 Innovation by Design Awards honor the designers and businesses solving the problems of today and tomorrow. It is one of the most sought-after design`,
  // },
  // {
  //   id: 3,
  //   slug: '#how-to',
  //   thumbnail: thumb3,
  //   showDescription: false,
  //   title: `Multiple task wireframing with team management perform better`,
  //   description: `The 2019 Innovation by Design Awards honor the designers and businesses solving the problems of today and tomorrow. It is one of the most sought-after design`,
  // },
  // {
  //   id: 4,
  //   slug: '#how-to',
  //   thumbnail: thumb2,
  //   showDescription: true,
  //   title: `Multiple art board prototype with Figma`,
  //   description: `Beyond launched anti bias, a Chrome extension that replaces LinkedIn profile photos`,
  // },
  // {
  //   id: 5,
  //   slug: '#how-to',
  //   thumbnail: thumb4,
  //   showDescription: false,
  //   title: `Team presentation with latest user interface & experience reach more`,
  //   description: `The 2019 Innovation by Design Awards honor the designers and businesses solving the problems of today and tomorrow. It is one of the most sought-after design`,
  // },
];

const masonryOptions = { originTop: true };

const Blog = () => {
  return (
    <Box as="section" id="blog" sx={styles.section}>
      <Container>
        <SectionHeading
          sx={styles.heading}
          title="Thamrin Group Gallery"
        />
        <Masonry options={masonryOptions} sx={styles.postContainer}>
          {data?.map((post) => (
            <BlogPost key={post.id} post={post} />
          ))}
        </Masonry>
      </Container>
    </Box>
  );
};

export default Blog;

const styles = {
  section: {
    pt: [8, null, null, 9, null, 11],
    pb: [8, null, null, 9, null, 11],
    position: 'relative',
  },
  heading: {
    mb: [6, 6, 7, 11],
  },
};