refactor(SalaryAndBenefits): inline Benefit.tsx in SalaryAndBenefits.tsx

src/salaryAndBenefits/SalaryAndBenefits.tsx

@@ -1,23 +1,26 @@
 import styles from "./salaryAndBenefits.module.css";
 import Text from "src/components/text/Text";
-import {SalaryAndBenefits as SalaryAndBenefitsPayload} from "studio/lib/payloads/salaryAndBenefits";
-import Benefit from './components/benefit/Benefit';
+import { SalaryAndBenefits as SalaryAndBenefitsPayload } from "studio/lib/payloads/salaryAndBenefits";
+import { RichText } from "src/components/richText/RichText";
 
 interface SalaryAndBenefitsProps {
-  salaryAndBenefits: SalaryAndBenefitsPayload
+  salaryAndBenefits: SalaryAndBenefitsPayload;
 }
 
-const SalaryAndBenefits = ({salaryAndBenefits}: SalaryAndBenefitsProps) => {
+const SalaryAndBenefits = ({ salaryAndBenefits }: SalaryAndBenefitsProps) => {
   return (
     <div className={styles.wrapper}>
       <Text type="h1">{salaryAndBenefits.basicTitle}</Text>
       <div className={styles.benefits}>
         {salaryAndBenefits.benefits.map((benefit) => (
-          <Benefit key={benefit._key} benefit={benefit} />
+          <div key={benefit._key} className={styles.benefitWrapper}>
+            <Text type="h2">{benefit.basicTitle}</Text>
+            <RichText value={benefit.richText} />
+          </div>
         ))}
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default SalaryAndBenefits;
+export default SalaryAndBenefits;

src/salaryAndBenefits/salaryAndBenefits.module.css

@@ -10,4 +10,10 @@
     flex-direction: column;
     gap: 5rem;
     max-width: var(--max-content-width-medium);
+}
+
+.benefitWrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
 }