V3 refactor project info (#909)

* Add badge component

* Update customlink styles and fonts

* Update break points

* Update customlink style

* Refactor and update styling to projectinfo section in customer case

src/components/badge/Badge.tsx

@@ -0,0 +1,27 @@
+import Text from "src/components/text/Text";
+
+import styles from "./badge.module.css";
+
+interface IBadge {
+  children: React.ReactNode;
+  badgeColor?: string;
+  textColor?: string;
+}
+
+const Badge = ({
+  children,
+  badgeColor = "#EAEAEA",
+  textColor = "#222424",
+}: IBadge) => {
+  const badgeColors = {
+    backgroundColor: badgeColor,
+    color: textColor,
+  };
+  return (
+    <div className={styles.badgeWrapper} style={badgeColors}>
+      <Text type="bodySmall">{children}</Text>
+    </div>
+  );
+};
+
+export default Badge;

src/components/badge/badge.module.css

@@ -0,0 +1,9 @@
+.badgeWrapper {
+  display: inline-flex;
+  height: 1.5rem;
+  padding: 0.375rem 0.75rem;
+  align-items: center;
+  gap: 0.5rem;
+  flex-shrink: 0;
+  border-radius: 624.9375rem;
+}

src/components/customerCases/customerCase/CustomerCase.tsx

@@ -1,16 +1,12 @@
-import { getTranslations } from "next-intl/server";
-
 import { SanitySharedImage } from "src/components/image/SanityImage";
 import Text from "src/components/text/Text";
 import { fetchEmployeesByEmails } from "src/utils/employees";
-import {
-  CustomerCase as CustomerCaseDocument,
-  CustomerSector,
-} from "studioShared/lib/interfaces/customerCases";
+import { CustomerCase as CustomerCaseDocument } from "studioShared/lib/interfaces/customerCases";
 
 import ContactInformation from "./contactInformation/ContactInformation";
 import styles from "./customerCase.module.css";
 import FeaturedCases from "./featuredCases/FeaturedCases";
+import CustomerCaseProjectInfo from "./projectInfo/CustomerCaseProjectInfo";
 import CustomerCaseConsultants from "./sections/customerCaseConsultants/CustomerCaseConsultants";
 import { CustomerCaseSection } from "./sections/CustomerCaseSection";
 
@@ -27,153 +23,21 @@ export default async function CustomerCase({
     customerCase.projectInfo.consultants,
   );
 
-  const t = await getTranslations("customer_case");
-
   return (
     <div className={styles.wrapper}>
       <div className={styles.content}>
         <Text type={"h1"} className={styles.mainTitle}>
           {customerCase.basicTitle}
         </Text>
         <hr className={styles.divider} />
-        <div className={styles.projectInfo}>
-          <div className={styles.projectInfoInner}>
-            {customerCase.projectInfo.customerSectors && (
-              <div>
-                <Text className={styles.title} type="labelRegular">
-                  {t("customer").toUpperCase()}
-                </Text>
-                <div className={styles.projectInfoItem}>
-                  {customerCase.projectInfo.customerSectors.map(
-                    (sector: CustomerSector) => (
-                      <Text
-                        key={sector.key}
-                        type="bodyNormal"
-                        className={styles.dotSeperator}
-                      >
-                        {sector.customerSector}
-                      </Text>
-                    ),
-                  )}
-                </div>
-              </div>
-            )}
-            {consultantsResult.ok && (
-              <div>
-                <Text className={styles.title} type="labelRegular">
-                  {t("variants").toUpperCase()}
-                </Text>
-                <div className={styles.varianter}>
-                  <Text>【</Text>
-                  {consultantsResult.value.map((c) => (
-                    <Text
-                      key={c.name}
-                      type="bodyNormal"
-                      className={styles.dotSeperatorVarianter}
-                    >
-                      {c.name}
-                    </Text>
-                  ))}
-                  <Text>】</Text>
-                </div>
-              </div>
-            )}
-            {customerCase.projectInfo.collaborators && (
-              <div>
-                <Text className={styles.title} type="labelRegular">
-                  {t("collaborators").toUpperCase()}
-                </Text>
-                <div className={styles.projectInfoItem}>
-                  {customerCase.projectInfo.collaborators.map(
-                    (collaborator) => (
-                      <Text
-                        type="bodyNormal"
-                        key={collaborator}
-                        className={styles.dotSeperator}
-                      >
-                        {collaborator}
-                      </Text>
-                    ),
-                  )}
-                </div>
-              </div>
-            )}
-            {customerCase.projectInfo.url && (
-              <div>
-                <Text className={styles.title} type="labelRegular">
-                  {t("url").toUpperCase()}
-                </Text>
-                <Text type="bodyNormal">{customerCase.projectInfo.url}</Text>
-              </div>
-            )}
-          </div>
-          <div>
-            {customerCase.projectInfo.deliveries && (
-              <div className={styles.deliveries}>
-                {customerCase.projectInfo.deliveries["projectManagement"] && (
-                  <div>
-                    <Text className={styles.title} type="labelRegular">
-                      {t("project_management").toUpperCase()}
-                    </Text>
-                    <div className={styles.projectInfoItem}>
-                      {customerCase.projectInfo.deliveries[
-                        "projectManagement"
-                      ].map((projectManagement) => (
-                        <Text
-                          type="bodyNormal"
-                          key={projectManagement.key}
-                          className={styles.dotSeperator}
-                        >
-                          {projectManagement.projectManagementDelivery}
-                        </Text>
-                      ))}
-                    </div>
-                  </div>
-                )}
-                {customerCase.projectInfo.deliveries["design"] && (
-                  <div>
-                    <Text className={styles.title} type="labelRegular">
-                      {t("design").toUpperCase()}
-                    </Text>
-                    <div className={styles.projectInfoItem}>
-                      {customerCase.projectInfo.deliveries["design"].map(
-                        (design) => (
-                          <Text
-                            key={design.key}
-                            type="bodyNormal"
-                            className={styles.dotSeperator}
-                          >
-                            {design.designDelivery}
-                          </Text>
-                        ),
-                      )}
-                    </div>
-                  </div>
-                )}
-                {customerCase.projectInfo.deliveries["development"] && (
-                  <div>
-                    <Text className={styles.title} type="labelRegular">
-                      {t("development").toUpperCase()}
-                    </Text>
-                    <div className={styles.projectInfoItem}>
-                      {customerCase.projectInfo.deliveries["development"].map(
-                        (development) => (
-                          <Text
-                            key={development.key}
-                            type="bodyNormal"
-                            className={styles.dotSeperator}
-                          >
-                            {development.developmentDelivery}
-                          </Text>
-                        ),
-                      )}
-                    </div>
-                  </div>
-                )}
-              </div>
-            )}
+        {consultantsResult.ok && (
+          <div className={styles.projectInfoWrapper}>
+            <CustomerCaseProjectInfo
+              projectInfo={customerCase.projectInfo}
+              consultantsInProject={consultantsResult.value}
+            />
           </div>
-        </div>
+        )}
         <div className={styles.mainImageWrapper}>
           <SanitySharedImage image={customerCase.image} />
         </div>

src/components/customerCases/customerCase/customerCase.module.css

@@ -50,61 +50,12 @@
   margin: 1rem 0;
 }
 
-.projectInfo {
-  display: flex;
-  flex-direction: row;
-  gap: 1rem;
-}
-
-.projectInfoInner {
-  width: 537px;
-  max-width: 537px;
-  gap: 1.5rem;
-  display: flex;
-  flex-direction: column;
-  flex-wrap: wrap;
-}
-
-.dotSeperator::after {
-  content: "·";
-  margin: 0 0.5rem;
-}
-
-.dotSeperator:last-child:after {
-  content: "";
-  margin: 0;
-}
-
-.varianter {
-  max-width: 537px;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-}
-
-.dotSeperatorVarianter::after {
-  content: "·";
-  margin: 0 0.5rem;
-}
-
-.dotSeperatorVarianter:nth-last-child(2)::after {
-  content: "";
-  margin: 0rem;
-}
-
-.projectInfoItem {
-  display: flex;
-  flex-direction: row;
-}
-
-.title {
-  color: var(--text-tertiary);
-}
-
-.deliveries {
+.projectInfoWrapper {
   display: flex;
   flex-direction: column;
-  gap: 1.5rem;
+  align-self: center;
+  width: 100%;
+  max-width: 960px;
 }
 
 .sectionsWrapper {