How to use this style in a correct way | Next.js | Page 1

#

help me regarding this style, I exported this from figma

here is the raw CSS from figma itself

/* Application-controls/Active */

/* Auto layout */
display: flex;
flex-direction: row;
align-items: flex-start;
padding: 0px;
gap: 8px;

width: 46px;
height: 10px;


/* Inside auto layout */
flex: none;
order: 0;
flex-grow: 0;


/* Red */

width: 10px;
height: 10px;

/* Light/System/Red */
background: #FF3B30;
/* Shadows/Inner */
box-shadow: inset 0px 0px 5px 2px rgba(0, 0, 0, 0.05);

/* Inside auto layout */
flex: none;
order: 0;
flex-grow: 0;


/* Yellow */

width: 10px;
height: 10px;

/* Light/System/Yellow */
background: #FFCC00;
/* Shadows/Inner */
box-shadow: inset 0px 0px 5px 2px rgba(0, 0, 0, 0.05);

/* Inside auto layout */
flex: none;
order: 1;
flex-grow: 0;


/* Green */

width: 10px;
height: 10px;

/* Light/System/Green */
background: #34C759;
/* Shadows/Inner */
box-shadow: inset 0px 0px 5px 2px rgba(0, 0, 0, 0.05);

/* Inside auto layout */
flex: none;
order: 2;
flex-grow: 0;

it is like this

and I created a Titlebar.js in components folder
and wrote this

import styles from "../styles/Titlebar.module.css";
const Titlebar = () => {
  return (
    <div className={styles.div}>
      <div className="red"></div>
      <div className="yellow"></div>
      <div className="green"></div>
    </div>
  );
};

export default Titlebar;

#

and here is the css

#

/* Application-controls/Active */
/* Auto layout */
.div {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 0px;
  gap: 8px;
  width: 46px;
  height: 10px;
  flex: none;
  order: 0;
  flex-grow: 0;
}
/* Red */
.red {
  width: 10px;
  height: 10px;
  /* Light/System/Red */
  background: #ff3b30;
  /* Shadows/Inner */
  box-shadow: inset 0px 0px 5px 2px rgba(0, 0, 0, 0.05);
  /* Inside auto layout */
  flex: none;
  order: 0;
  flex-grow: 0;
}
.yellow {
  /* Yellow */
  width: 10px;
  height: 10px;
  /* Light/System/Yellow */
  background: #ffcc00;
  /* Shadows/Inner */
  box-shadow: inset 0px 0px 5px 2px rgba(0, 0, 0, 0.05);
  /* Inside auto layout */
  flex: none;
  order: 1;
  flex-grow: 0;
}
.green {
  /* Green */
  width: 10px;
  height: 10px;
  /* Light/System/Green */
  background: #34c759;
  /* Shadows/Inner */
  box-shadow: inset 0px 0px 5px 2px rgba(0, 0, 0, 0.05);
  /* Inside auto layout */
  flex: none;
  order: 2;
  flex-grow: 0;
}

#

how do I actually use it

#

and I actually imported the Titlebar.jsx in a component called Layout.jsx

this is Layout.jsx

import Titlebar from "./Titlebar.jsx";
const Layout = ({ children }) => {
  return (
    <div>
      <Titlebar />
      {children}
    </div>
  );
};

export default Layout;

#How to use this style in a correct way