How to create a teaser with styled-components and react
Published: 2022-03-07 08:21:18

In my last article, I showed how to extend a button, modify it and use it anywhere on your app. In case you missed it, use the menu above and go to the previous article.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ov5gtq3k32bm782ojyam.png)
 

In this article, I will show you how to build a teaser from scratch, let's go!

##Create the files
To give more structure to our code, we'll create two folders inside of each other:
components -> teaser
Inside the teaser folder, create a subfolder called **teaser.js** file.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mnyl3z65vyp9gu4ygbom.png)
 
## Creating a basic component.
Inside the _teaser.js_ create a basic component and export it.

```
import React from "react";

function Teaser() {
  return <div>teaser</div>;
}

export default Teaser;

```
Inside the file _index.js_, import the teaser and display it.
```
import styled from "styled-components";
import Teaser from "../src/components/teaser/teaser";

export const Box = styled.div`
  display: grid;
  grid-template-columns: 1fr;
  width: 500px;
  gap: 20px;
  margin-top: 100px;
  align-items: center;
`;

export default function Home() {
  return (
    <Box>
      <Teaser />
    </Box>
  );
}
```
If you run the website you should see the word "teaser" on the home page in your browser.

_Open the VScode terminal and type `yarn dev` and go to the following URL "http://localhost:3000" on your browser._

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kfxxkqcq7sd14ica2fpj.png)
 



## Building the teaser

To improve the readability of the code we will have our components separated from the styles files.
Inside the _styles.js_ file import styled from style-components `import styled from "styled-components";`

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6m2caz6lqfh0mx6go3n3.png)
 
Create two style components, called **TeaserContainer** and **TextContainer**.
Import both of them into the _teaser.js_ file.

```
export const TeaserContainer = styled.div``;
```

and

```
export const TextContainer = styled.div``;
```

Instead of importing each styled component separately from the styles file, we can import all the components simultaneously with a single import.

`import {TeaserContainer,TextContainer} from "./styles";`

Call the styled components `TeaserContainer` and `TextContainer` inside our component change the basic component we created earlier to the code below.
```
function Teaser() {
  return (
    <TeaserContainer>
      <TextContainer>
       Placeholder text
      </TextContainer>
    </TeaserContainer>
  );
}
```

We won't see any changes yet as we just created the shell for our components, let's start styling it.

We will be using Grid ([How to use grid](https://css-tricks.com/snippets/css/complete-guide-grid/)) to positioning. The TeaserContainer will have this CSS
```
  display: grid;
  grid-template-columns: 1fr;
  box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
```

 While in the TextContainer will have this CSS:
```
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 20px;

```
Now you should see something like this on your browser.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g1mconajyc4k8z5od6kz.png)

Our teaser will have a title and descriptions as well, let's add it!

In the _styles.js_ file creates another two styled components, one called "Title" that will extend an `h2` and the other called "Description" that will extend a `p` tag.

Inside each new styled component, you can add the following styles.

```
export const Title = styled.h2`
  margin: 0;
  color: #5cc9e2;
`;
```

We won't add any styles in the description now, it will change later when we make it responsive.

```
export const Description = styled.p``;
```

Import the 2 newly created components above to the index.js file.

```
import {
  TeaserContainer,
  TextContainer,
  Title,
  Description,
} from "./styles";
```

Call each one inside our main component, as seen below, and change the title and the description for something that you want.
```
return (
    <TeaserContainer>
      <TextContainer>
        <Title>This is my first Teaser</Title>
        <Description>
          I just built this nice teaser dor the first time ;)
        </Description>
      </TextContainer>
    </TeaserContainer>
  );
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pk7ljqjf8yrdo5qdyu4v.png)


Now we just need to add the image.

## Adding Image

For the image, we will use the Image component from next.js, first we will import it.

`import Image from "next/image";`

Find an image that you would like to use and add it to the public folder, import it in the _teaser.js_ file. I called my image `city.jpeg`.

`import city from "../../../public/city.jpeg";`

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t1fd1p6hemlgynaytzpo.png)

 Next we call the component just above the TextContainer component.
` <Image alt="city" src={city} layout="intrinsic" responsive />`
**What it is**:
_intrinsic_: Scale down to fit width of container, up to image size.
_Responsive_: Scale to fit the width of the container

You can check out other next.js image properties [here](https://nextjs.org/docs/api-reference/next/image#layout)

That is it, we have our teaser.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lnxstu3o2u35n1aeidga.png)
 
## Making the teaser responsive.
 
We are going to use media queries to work with the responsiveness of our teaser.

To make our teaser 50% image and 50% text we need to make the grid two columns and also add a gap so it does not stick together.

In the styled component _TeaserContainer_ add the following just below the `background: #fff;`
```
 @media (min-width: 700px) {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
```
We are saying to the browser to render those two properties when the screen has a minimum width of `700px`, so the browser will ignore those previous styles for the same two properties(If there is any) and will use the new ones set inside the media query.

You should see your image on the left-hand side and the text on the right-hand side.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mu5qpcwaqolyqll5igpg.png)

And we are all done, we have a Teaser responsive for 2 breakpoints, one from 0 to 700px and another from 701px to infinite.

There are some tweaks we can do to make it better, like adding more breakpoints and adding a maximum height to the image, the latter is not recommended as it could break the teaser, for instance, if you have a long description.
There are some other technics that we can use to prevent this issue from happening but it is out of the scope of this article.


### Tip: 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/byr0qveh5z0ykwbcqqfg.png)
 
 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/brg4fygaobiq6ztz8h42.png)


I hope these articles can help you build your next app.

"This" is my teaser 😁 {% spotify spotify:track:4ewITE1jhakdoKhXQiSX5z %}

Have a great day 😉