section title component

src/components/global/SectionTitle.tsx

@@ -3,7 +3,7 @@ import { Link } from "react-router-dom";
 
 // Types
 interface Props {
-  givenClass: string;
+  givenClass?: string;
   title: string;
   linkData?: {
     title: string;
@@ -13,7 +13,7 @@ interface Props {
 
 const SectionTitle: React.FC<Props> = ({ givenClass, title, linkData }) => {
   return (
-    <div className={`${givenClass}-title`}>
+    <div className={`${givenClass ? givenClass + "-title" : ""} section-title`}>
       <h2>{title}</h2>
       {linkData ? <Link to={linkData.link}>{linkData.title}</Link> : null}
     </div>

src/styles/_section-title.scss

@@ -0,0 +1,18 @@
+.section-title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 4rem;
+
+  h2 {
+    font-size: 2.4rem;
+  }
+
+  a {
+    display: block;
+    padding: 1rem;
+    background: $main;
+    color: $white;
+    font-size: 1.6rem;
+  }
+}