add HighlightedPerson section

milewskibogumil · Oct 17, 2024 · f0ae1a1 · f0ae1a1
1 parent a7555d9
commit f0ae1a1
Show file tree

Hide file tree

Showing 8 changed files with 246 additions and 7 deletions.
diff --git a/apps/astro/src/components/Components.astro b/apps/astro/src/components/Components.astro
@@ -18,6 +18,7 @@ import TwoColumnTextWithTags, { TwoColumnTextWithTags_Query } from '@/components
 import IrregularImagesAndHeader, {
   IrregularImagesAndHeader_Query,
 } from '@/components/global/IrregularImagesAndHeader.astro'
+import HighlightedPerson, { HighlightedPerson_Query } from '@/components/global/HighlightedPerson.astro'
 
 const components = {
   SimpleCtaSection,
@@ -32,6 +33,7 @@ const components = {
   BorderedFullImage,
   TwoColumnTextWithTags,
   IrregularImagesAndHeader,
+  HighlightedPerson,
 }
 
 type ComponentsMap = {
@@ -64,6 +66,7 @@ export const Components_Query = /* groq */ `
     ${BorderedFullImage_Query}
     ${TwoColumnTextWithTags_Query}
     ${IrregularImagesAndHeader_Query}
+    ${HighlightedPerson_Query}
   },
 `
 ---

diff --git a/apps/astro/src/components/global/Footer.astro b/apps/astro/src/components/global/Footer.astro
@@ -160,7 +160,7 @@ const data = await sanityFetch<QueryProps>({
             </path>
           </svg>
           <a href={`tel:${data.tel}`}>{data.tel}</a>
-          <CopyToClipboard copyData={data.tel} />
+          <CopyToClipboard data={data.tel} />
         </p>
         <p class="email">
           <svg xmlns="http://www.w3.org/2000/svg" width="20" height="21" fill="none">
@@ -172,7 +172,7 @@ const data = await sanityFetch<QueryProps>({
             </path>
           </svg>
           <a href={`mailto:${data.email}`}>{data.email}</a>
-          <CopyToClipboard copyData={data.email} />
+          <CopyToClipboard data={data.email} />
         </p>
       </div>
       <div>

diff --git a/apps/astro/src/components/global/HighlightedPerson.astro b/apps/astro/src/components/global/HighlightedPerson.astro
@@ -0,0 +1,155 @@
+---
+import PortableText, { PortableTextQuery, type PortableTextValue } from '@/components/ui/portable-text'
+import Image, { ImageDataQuery, type ImageDataProps } from '@/components/ui/image'
+import CopyToClipboard from '@/components/ui/CopyToClipboard.astro'
+
+export const HighlightedPerson_Query = `
+  _type == "HighlightedPerson" => {
+    ${PortableTextQuery('heading')}
+    ${PortableTextQuery('paragraph')}
+    email,
+    tel,
+    name,
+    position,
+    ${PortableTextQuery('description')}
+    ${PortableTextQuery('descriptionSecondary')}
+    ${ImageDataQuery('img')}
+  },
+`
+
+export type Props = {
+  index: number
+  heading: PortableTextValue
+  paragraph: PortableTextValue
+  email?: string
+  tel?: string
+  name: string
+  position?: string
+  description: PortableTextValue
+  descriptionSecondary: PortableTextValue
+  img: ImageDataProps
+}
+
+const { index, heading, paragraph, email, tel, name, position, description, descriptionSecondary, img } = Astro.props
+---
+
+<section class="HighlightedPerson">
+  <header>
+    <PortableText value={heading} heading={index === 0 ? 'h1' : 'h2'} class="h2" />
+    <PortableText value={paragraph} class="paragraph" />
+    {
+      email && (
+        <p class="email">
+          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="21" fill="none">
+            <path
+              stroke="#374776"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M3.438 5.604 10 9.823l7.031-4.219M4.375 15.754A1.875 1.875 0 0 1 2.5 13.879V6.542c0-1.036.84-1.875 1.875-1.875h11.25c1.035 0 1.875.84 1.875 1.875v7.337c0 1.035-.84 1.875-1.875 1.875H4.375Z"
+            />
+          </svg>
+          <a href={`mailto:${email}`}>{email}</a>
+          <CopyToClipboard data={email} />
+        </p>
+      )
+    }
+    {
+      tel && (
+        <p class="tel">
+          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="21" fill="none">
+            <path
+              stroke="#374776"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M17.22 16.142s-.966.949-1.203 1.227c-.385.411-.84.605-1.435.605-.057 0-.118 0-.176-.003-1.133-.073-2.186-.515-2.976-.892a16.948 16.948 0 0 1-5.633-4.402C4.495 11.11 3.625 9.664 3.049 8.11c-.355-.948-.485-1.687-.428-2.384.039-.446.21-.815.527-1.131L4.45 3.296c.187-.175.386-.27.58-.27.241 0 .436.144.558.266l.011.012c.233.217.454.441.687.681.118.122.24.244.363.37l1.042 1.04c.404.403.404.776 0 1.18-.111.11-.218.221-.329.328-.32.327-.068.076-.4.373-.008.008-.016.011-.02.02-.328.327-.267.647-.198.864l.012.034c.27.655.652 1.272 1.232 2.007l.004.004c1.053 1.295 2.164 2.304 3.389 3.077.156.1.317.18.47.255.137.069.267.134.377.202.015.008.03.02.046.027.13.065.252.095.378.095a.816.816 0 0 0 .58-.263l.748-.746c.13-.13.336-.286.576-.286.237 0 .432.149.55.278l.008.008 2.102 2.098c.393.389.004 1.192.004 1.192Z"
+            />
+          </svg>
+          <a href={`tel:${tel}`}>{tel}</a>
+          <CopyToClipboard data={tel} />
+        </p>
+      )
+    }
+  </header>
+  <div class="description-wrapper">
+    <div class="name">
+      <p>{name}</p>
+      {position && <p class="position">{position}</p>}
+    </div>
+    <PortableText value={description} class="description" />
+  </div>
+  <Image {...img} sizes="(max-width: 44rem) 100vw, (max-width: 82rem) 50vw, 30vw" />
+  <PortableText value={descriptionSecondary} class="descriptionSecondary" />
+</section>
+
+<style lang="scss">
+  .HighlightedPerson {
+    padding: clamp(3rem, calc(4vw / 0.48), 4rem) 0;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+    gap: 1rem;
+    @media (max-width: 82rem) and (min-width: 44rem) {
+      max-width: 43rem;
+      margin: -2rem auto 0;
+      display: block;
+      columns: 2;
+      gap: 1rem;
+      & > * {
+        break-inside: avoid;
+        margin-top: 2rem;
+      }
+    }
+    @media (max-width: 44rem) {
+      grid-template-columns: 1fr;
+      header {
+        margin-bottom: 1rem;
+      }
+    }
+    header {
+      align-self: center;
+      display: grid;
+      gap: 1rem;
+      align-content: flex-start;
+      .paragraph {
+        margin-top: clamp(0.5rem, calc(1vw / 0.48), 1rem);
+      }
+      .tel,
+      .email {
+        font-size: 0.875rem;
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        a {
+          margin: 0 0.5rem 0 0.75rem;
+        }
+        svg {
+          flex-shrink: 0;
+        }
+      }
+    }
+    img {
+      height: 100%;
+    }
+    .description-wrapper {
+      background-color: var(--primary-300, #f4efe8);
+      padding: clamp(1.5rem, calc(2vw / 0.48), 2rem);
+      display: flex;
+      flex-direction: column;
+      .name {
+        margin-bottom: 4rem;
+      }
+      .position {
+        font-size: 0.875rem;
+      }
+      .description {
+        margin-top: auto;
+      }
+    }
+    .descriptionSecondary {
+      display: flex;
+      flex-direction: column;
+      border: 1px solid var(--secondary-200, #c0c7db);
+      padding: clamp(1.5rem, calc(2vw / 0.48), 2rem);
+      justify-content: flex-end;
+    }
+  }
+</style>
diff --git a/apps/astro/src/components/global/IrregularImagesAndHeader.astro b/apps/astro/src/components/global/IrregularImagesAndHeader.astro
@@ -30,7 +30,7 @@ const { index, heading, paragraph, images } = Astro.props
             <Image
               {...img}
               sizes="(max-width: 689px) 50vw, 25vw"
-              {...(i === 1 ? { style: 'animation-delay: 200ms;' } : {})}
+              {...(i === 1 && { style: 'animation-delay: 200ms;' })}
               loading={index === 0 ? 'eager' : 'lazy'}
             />
           ))

diff --git a/apps/astro/src/components/ui/CopyToClipboard.astro b/apps/astro/src/components/ui/CopyToClipboard.astro
@@ -1,15 +1,15 @@
 ---
 type Props = {
-  copyData: string
+  data: string
 }
 
-const { copyData } = Astro.props
+const { data } = Astro.props
 ---
 
-<button class="CopyToClipboard" data-copydata={copyData} data-success={false} aria-label="Skopiuj">
+<button class="CopyToClipboard" data-copydata={data} data-success={false} aria-label="Skopiuj">
   <span>Skopiuj</span>
   <svg xmlns="http://www.w3.org/2000/svg" width="48" height="34" fill="none">
-    <path stroke="#FFFEFD" stroke-linecap="round" stroke-linejoin="round" d="M1 33.5h46.5V1.267L22.5 25.5 20 23"></path>
+    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M1 33.5h46.5V1.267L22.5 25.5 20 23"></path>
   </svg>
 </button>
 

diff --git a/apps/sanity/schema/Components.ts b/apps/sanity/schema/Components.ts
@@ -11,6 +11,7 @@ import IconGridWithCtaSection from "./components/IconGridWithCtaSection";
 import BorderedFullImage from "./components/BorderedFullImage";
 import TwoColumnTextWithTags from "./components/TwoColumnTextWithTags";
 import IrregularImagesAndHeader from "./components/IrregularImagesAndHeader";
+import HighlightedPerson from "./components/HighlightedPerson";
 
 export default defineType({
   name: 'components',
@@ -29,6 +30,7 @@ export default defineType({
     BorderedFullImage,
     TwoColumnTextWithTags,
     IrregularImagesAndHeader,
+    HighlightedPerson,
   ],
   options: {
     insertMenu: {

diff --git a/apps/sanity/schema/components/HighlightedPerson.ts b/apps/sanity/schema/components/HighlightedPerson.ts
@@ -0,0 +1,79 @@
+import { defineField } from 'sanity';
+import { toPlainText } from '../../utils/to-plain-text';
+
+const name = 'HighlightedPerson';
+const title = 'Sekcja z osobą wyróżnioną';
+const icon = () => '👤';
+
+export default defineField({
+  name,
+  type: 'object',
+  title,
+  icon,
+  fields: [
+    defineField({
+      name: 'heading',
+      type: 'Heading',
+      title: 'Nagłówek',
+      validation: Rule => Rule.required(),
+    }),
+    defineField({
+      name: 'paragraph',
+      type: 'PortableText',
+      title: 'Paragraf',
+      validation: Rule => Rule.required(),
+    }),
+    defineField({
+      name: 'email',
+      type: 'string',
+      title: 'Adres email (opcjonalny)',
+      validation: Rule => Rule.email(),
+    }),
+    defineField({
+      name: 'tel',
+      type: 'string',
+      title: 'Numer telefonu (opcjonalny)',
+    }),
+    defineField({
+      name: 'name',
+      type: 'string',
+      title: 'Imię i nazwisko',
+      validation: Rule => Rule.required(),
+    }),
+    defineField({
+      name: 'position',
+      type: 'string',
+      title: 'Stanowisko (opcjonalne)',
+    }),
+    defineField({
+      name: 'description',
+      type: 'PortableText',
+      title: 'Opis',
+      validation: Rule => Rule.required(),
+    }),
+    defineField({
+      name: 'descriptionSecondary',
+      type: 'PortableText',
+      title: 'Drugi opis',
+      validation: Rule => Rule.required(),
+    }),
+    defineField({
+      name: 'img',
+      type: 'image',
+      title: 'Zdjęcie',
+      validation: Rule => Rule.required(),
+    }),
+  ],
+  preview: {
+    select: {
+      heading: 'heading',
+      media: 'img',
+    },
+    prepare: ({ heading, media }) => ({
+      title: title,
+      subtitle: toPlainText(heading),
+      media,
+      icon,
+    }),
+  },
+});
diff --git a/apps/sanity/static/HighlightedPerson.webp b/apps/sanity/static/HighlightedPerson.webp