From 3e50ed26c63cf176e2dd5dfcc3ec519f006e07c4 Mon Sep 17 00:00:00 2001 From: Petter Hohle Date: Thu, 12 Dec 2024 11:51:58 +0100 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Add=20L=C3=86REGLEDE=20section?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/sections/learning/Learning.tsx | 44 +++++++++ .../sections/learning/learning.module.css | 96 +++++++++++++++++++ src/utils/renderSection.tsx | 3 + studio/lib/interfaces/pages.ts | 11 ++- studio/lib/queries/pages.ts | 4 + studio/schemas/documents/pageBuilder.ts | 2 + studio/schemas/objects/sections/learning.ts | 45 +++++++++ 7 files changed, 204 insertions(+), 1 deletion(-) create mode 100644 src/components/sections/learning/Learning.tsx create mode 100644 src/components/sections/learning/learning.module.css create mode 100644 studio/schemas/objects/sections/learning.ts diff --git a/src/components/sections/learning/Learning.tsx b/src/components/sections/learning/Learning.tsx new file mode 100644 index 000000000..8b5e4e255 --- /dev/null +++ b/src/components/sections/learning/Learning.tsx @@ -0,0 +1,44 @@ +import Link from "next/link"; + +import { SanityImage } from "src/components/image/SanityImage"; +import SmileyBox from "src/components/smileyBox/SmileyBox"; +import Text from "src/components/text/Text"; +import { LearningSection } from "studio/lib/interfaces/pages"; + +import styles from "./learning.module.css"; + +export interface LearningProps { + section: LearningSection; +} + +export default function Learning({ section }: LearningProps) { + return ( +
+ + {section.basicTitle} + +
+ +
+ +
+
+
+ + Artikkel · 5 min{" "} + + + + Tidenes beste konferansesesong for Variant + + + + I Variant har vi en veldig uttalt strategi rundt + kompetansebygging. Vi kaller den læreglede. + +
+
+
+
+ ); +} diff --git a/src/components/sections/learning/learning.module.css b/src/components/sections/learning/learning.module.css new file mode 100644 index 000000000..de8ee494b --- /dev/null +++ b/src/components/sections/learning/learning.module.css @@ -0,0 +1,96 @@ +.wrapper { + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-start; + max-width: var(--max-content-width-large); + margin: 5rem auto; + gap: 2rem; +} + +.title { + width: 40rem; + + @media (max-width: 834px) { + width: 25.875rem; + } + + @media (max-width: 425px) { + width: 19.4375rem; + } +} + +.content { + display: flex; + flex-direction: row; + align-items: flex-start; + padding: 0.25rem; + gap: 1rem; + + @media (max-width: 768px) { + display: flex; + flex-direction: column; + padding: 1.5rem; + } +} + +.image { + height: 30rem; + + & img { + border-radius: 6rem 0.375rem 0.375rem 0.375rem; + } + + @media (max-width: 834px) { + height: 26.25rem; + align-self: stretch; + } + + @media (max-width: 425px) { + align-self: stretch; + height: 22.375; + } +} + +.textContainer { + display: flex; + height: 30rem; + min-width: 26.625rem; + max-width: 33.5625rem; + padding: 1.5rem 0.375rem; + flex-direction: column; + align-items: flex-start; + gap: 0.75rem; + background-color: var(--surface-blue); + color: var(--text-primary-light); +} + +.textContent { + display: flex; + max-width: 33.5625rem; + padding: 0rem 1.125rem; + flex-direction: column; + align-items: flex-start; + align-self: stretch; + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 0.75rem; + align-self: stretch; +} + +.textContainer { + color: var(--text-primary-light); +} + +.articleTag { + color: var(--text-primary-light); +} + +.articleTitle { + color: var(--text-primary-light); +} + +.articleSubtitle { + color: var(--text-primary-light); +} diff --git a/src/utils/renderSection.tsx b/src/utils/renderSection.tsx index 98cb0312b..988675ccf 100644 --- a/src/utils/renderSection.tsx +++ b/src/utils/renderSection.tsx @@ -21,6 +21,7 @@ import ImageSplitComponentPreview from "src/components/sections/image-split/Imag import ImageSectionComponent from "src/components/sections/imageSection/ImageSectionComponent"; import ImageSectionComponentPreview from "src/components/sections/imageSection/ImageSectionComponentPreview"; import Jobs from "src/components/sections/jobs/Jobs"; +import Learning from "src/components/sections/learning/Learning"; import { LogoSalad } from "src/components/sections/logoSalad/LogoSalad"; import LogoSaladPreview from "src/components/sections/logoSalad/LogoSaladPreview"; import Openness from "src/components/sections/openness/Openness"; @@ -295,6 +296,8 @@ const SectionRenderer = ({ return ; case "generositySection": return ; + case "learningSection": + return ; default: return null; } diff --git a/studio/lib/interfaces/pages.ts b/studio/lib/interfaces/pages.ts index 4f38fb0cf..13b4f7527 100644 --- a/studio/lib/interfaces/pages.ts +++ b/studio/lib/interfaces/pages.ts @@ -178,6 +178,14 @@ export interface OpennessSection { description: string; } +export interface LearningSection { + _type: "learningSection"; + _key: string; + basicTitle: string; + image: IImage; + description: string; +} + export type Section = | HeroSection | LogoSaladSection @@ -196,7 +204,8 @@ export type Section = | CompensationCalculatorSection | JobsSection | OpennessSection - | GenerositySection; + | GenerositySection + | LearningSection; export interface PageBuilder { _createdAt: string; diff --git a/studio/lib/queries/pages.ts b/studio/lib/queries/pages.ts index d82e5f90c..fae13c682 100644 --- a/studio/lib/queries/pages.ts +++ b/studio/lib/queries/pages.ts @@ -118,6 +118,10 @@ const SECTIONS_FRAGMENT = groq` ${TRANSLATED_LINK_FRAGMENT} } } + }, + _type == "learningSection" => { + "basicTitle": ${translatedFieldFragment("basicTitle")}, + "description": ${translatedFieldFragment("description")}, } } `; diff --git a/studio/schemas/documents/pageBuilder.ts b/studio/schemas/documents/pageBuilder.ts index b64aa33ab..a367d18bc 100644 --- a/studio/schemas/documents/pageBuilder.ts +++ b/studio/schemas/documents/pageBuilder.ts @@ -13,6 +13,7 @@ import hero from "studio/schemas/objects/sections/hero"; import imageSection from "studio/schemas/objects/sections/image"; import imageSplitSection from "studio/schemas/objects/sections/imagesplit"; import { jobs } from "studio/schemas/objects/sections/jobs"; +import { learningSection } from "studio/schemas/objects/sections/learning"; import logoSalad from "studio/schemas/objects/sections/logoSalad"; import { opennessSection } from "studio/schemas/objects/sections/openness"; import seo from "studio/schemas/objects/seo"; @@ -61,6 +62,7 @@ const pageBuilder = defineType({ compensationCalculator, opennessSection, generositySection, + learningSection, ], }), ], diff --git a/studio/schemas/objects/sections/learning.ts b/studio/schemas/objects/sections/learning.ts new file mode 100644 index 000000000..2248238ad --- /dev/null +++ b/studio/schemas/objects/sections/learning.ts @@ -0,0 +1,45 @@ +import { defineField } from "sanity"; + +import { titleID } from "studio/schemas/fields/text"; +export const learningID = "learningSection"; + +export const learningSection = defineField({ + name: learningID, + title: "Learning", + type: "object", + fields: [ + { + name: titleID.basic, + title: "Title", + description: + "Enter the primary title that will be displayed at the top of the section.", + type: "internationalizedArrayString", + validation: (rule) => rule.required(), + }, + { + name: "image", + type: "image", + title: "Image", + description: "An image of the learning", + options: { + hotspot: true, + }, + validation: (rule) => rule.required(), + }, + { + name: "description", + title: "Description", + description: + "Enter the description that will be displayed in the smiley block.", + type: "internationalizedArrayString", + validation: (rule) => rule.required(), + }, + ], + preview: { + prepare() { + return { + title: "Learning Section", + }; + }, + }, +});