add section preview in sanity studio

milewskibogumil · Oct 24, 2024 · e2757b7 · e2757b7
1 parent 85badf7
commit e2757b7
Show file tree

Hide file tree

Showing 18 changed files with 76 additions and 43 deletions.
diff --git a/apps/sanity/schema/Components.ts b/apps/sanity/schema/Components.ts
@@ -14,6 +14,7 @@ import IrregularImagesAndHeader from "./components/IrregularImagesAndHeader";
 import HighlightedPerson from "./components/HighlightedPerson";
 import PeopleShowcase from "./components/PeopleShowcase";
 import ImagesMarquee from "./components/ImagesMarquee";
+import TextBlockCtaAndImage from "./components/TextBlockCtaAndImage";
 
 export default defineType({
   name: 'components',
@@ -35,6 +36,7 @@ export default defineType({
     HighlightedPerson,
     PeopleShowcase,
     ImagesMarquee,
+    TextBlockCtaAndImage,
   ],
   options: {
     insertMenu: {

diff --git a/apps/sanity/schema/components/BorderedFullImage.ts b/apps/sanity/schema/components/BorderedFullImage.ts
@@ -1,5 +1,6 @@
 import { defineField } from 'sanity';
 import { toPlainText } from '../../utils/to-plain-text';
+import { sectionPreview } from '../../utils/section-preview';
 
 const name = 'BorderedFullImage';
 const title = 'Sekcja z pełnym obrazem i ramką';
@@ -33,13 +34,11 @@ export default defineField({
   preview: {
     select: {
       heading: 'heading',
-      media: 'img',
     },
-    prepare: ({ heading, media }) => ({
+    prepare: ({ heading }) => ({
       title: title,
       subtitle: toPlainText(heading),
-      media,
-      icon,
+      ...sectionPreview({ name, icon: icon() }),
     }),
   },
 });
diff --git a/apps/sanity/schema/components/CtaSectionWithShapedImage.ts b/apps/sanity/schema/components/CtaSectionWithShapedImage.ts
@@ -1,5 +1,6 @@
 import { defineField } from 'sanity';
 import { toPlainText } from '../../utils/to-plain-text';
+import { sectionPreview } from '../../utils/section-preview';
 
 const name = 'CtaSectionWithShapedImage';
 const title = 'Sekcja CTA z dużym zdjęciem';
@@ -46,13 +47,11 @@ export default defineField({
   preview: {
     select: {
       heading: 'heading',
-      media: 'img',
     },
-    prepare: ({ heading, media }) => ({
+    prepare: ({ heading }) => ({
       title: title,
       subtitle: toPlainText(heading),
-      media,
-      icon,
+      ...sectionPreview({ name, icon: icon() }),
     }),
   },
 });
diff --git a/apps/sanity/schema/components/Faq.ts b/apps/sanity/schema/components/Faq.ts
@@ -1,5 +1,6 @@
 import { defineField } from 'sanity';
 import { toPlainText } from '../../utils/to-plain-text';
+import { sectionPreview } from '../../utils/section-preview';
 
 const name = 'Faq';
 const title = 'Sekcja FAQ';
@@ -64,12 +65,11 @@ export default defineField({
   preview: {
     select: {
       heading: 'heading',
-      media: 'img',
     },
-    prepare: ({ heading, media }) => ({
+    prepare: ({ heading }) => ({
       title: title,
       subtitle: toPlainText(heading),
-      media: media || icon,
+      ...sectionPreview({ name, icon: icon() }),
     }),
   },
 });
diff --git a/apps/sanity/schema/components/FeatureAccordionSection.ts b/apps/sanity/schema/components/FeatureAccordionSection.ts
@@ -1,5 +1,6 @@
 import { defineField } from 'sanity';
 import { toPlainText } from '../../utils/to-plain-text';
+import { sectionPreview } from '../../utils/section-preview';
 
 const name = 'FeatureAccordionSection';
 const title = 'Sekcja z akordeonem cech';
@@ -63,13 +64,11 @@ export default defineField({
   preview: {
     select: {
       heading: 'heading',
-      media: 'img',
     },
-    prepare: ({ heading, media }) => ({
+    prepare: ({ heading }) => ({
       title: title,
       subtitle: toPlainText(heading),
-      media,
-      icon,
+      ...sectionPreview({ name, icon: icon() }),
     }),
   },
 });
diff --git a/apps/sanity/schema/components/HighlightedPerson.ts b/apps/sanity/schema/components/HighlightedPerson.ts
@@ -1,5 +1,6 @@
 import { defineField } from 'sanity';
 import { toPlainText } from '../../utils/to-plain-text';
+import { sectionPreview } from '../../utils/section-preview';
 
 const name = 'HighlightedPerson';
 const title = 'Sekcja z osobą wyróżnioną';
@@ -67,13 +68,11 @@ export default defineField({
   preview: {
     select: {
       heading: 'heading',
-      media: 'img',
     },
-    prepare: ({ heading, media }) => ({
+    prepare: ({ heading }) => ({
       title: title,
       subtitle: toPlainText(heading),
-      media,
-      icon,
+      ...sectionPreview({ name, icon: icon() }),
     }),
   },
 });
diff --git a/apps/sanity/schema/components/IconGridWithCtaSection.ts b/apps/sanity/schema/components/IconGridWithCtaSection.ts
@@ -1,5 +1,6 @@
 import { defineField } from 'sanity';
 import { toPlainText } from '../../utils/to-plain-text';
+import { sectionPreview } from '../../utils/section-preview';
 
 const name = 'IconGridWithCtaSection';
 const title = 'Sekcja z siatką ikon i CTA';
@@ -73,7 +74,7 @@ export default defineField({
     prepare: ({ heading }) => ({
       title: title,
       subtitle: toPlainText(heading),
-      icon,
+      ...sectionPreview({ name, icon: icon() }),
     }),
   },
 });
diff --git a/apps/sanity/schema/components/ImagesMarquee.ts b/apps/sanity/schema/components/ImagesMarquee.ts
@@ -1,5 +1,6 @@
 import { defineField } from 'sanity';
 import { toPlainText } from '../../utils/to-plain-text';
+import { sectionPreview } from '../../utils/section-preview';
 
 const name = 'ImagesMarquee';
 const title = 'Sekcja z przewijającymi się zdjęciami';
@@ -41,13 +42,11 @@ export default defineField({
   preview: {
     select: {
       heading: 'heading',
-      media: 'img',
     },
-    prepare: ({ heading, media }) => ({
+    prepare: ({ heading }) => ({
       title: title,
       subtitle: toPlainText(heading),
-      media,
-      icon,
+      ...sectionPreview({ name, icon: icon() }),
     }),
   },
 });
diff --git a/apps/sanity/schema/components/IrregularImagesAndHeader.ts b/apps/sanity/schema/components/IrregularImagesAndHeader.ts
@@ -1,5 +1,6 @@
 import { defineField } from 'sanity';
 import { toPlainText } from '../../utils/to-plain-text';
+import { sectionPreview } from '../../utils/section-preview';
 
 const name = 'IrregularImagesAndHeader';
 const title = 'Sekcja z nieregularnymi zdjęciami i nagłówkiem';
@@ -45,7 +46,7 @@ export default defineField({
     prepare: ({ heading }) => ({
       title: title,
       subtitle: toPlainText(heading),
-      icon,
+      ...sectionPreview({ name, icon: icon() }),
     }),
   },
 });
diff --git a/apps/sanity/schema/components/MetricsSection.ts b/apps/sanity/schema/components/MetricsSection.ts
@@ -1,5 +1,6 @@
 import { defineField } from 'sanity';
 import { toPlainText } from '../../utils/to-plain-text';
+import { sectionPreview } from '../../utils/section-preview';
 
 const name = 'MetricsSection';
 const title = 'Sekcja z metrykami';
@@ -84,7 +85,7 @@ export default defineField({
     prepare: ({ heading }) => ({
       title: title,
       subtitle: toPlainText(heading),
-      icon,
+      ...sectionPreview({ name, icon: icon() }),
     }),
   },
 });
diff --git a/apps/sanity/schema/components/PeopleShowcase.ts b/apps/sanity/schema/components/PeopleShowcase.ts
@@ -1,5 +1,6 @@
 import { defineField } from 'sanity';
 import { toPlainText } from '../../utils/to-plain-text';
+import { sectionPreview } from '../../utils/section-preview';
 
 const name = 'PeopleShowcase';
 const title = 'Sekcja z osobami';
@@ -84,7 +85,7 @@ export default defineField({
     prepare: ({ heading }) => ({
       title: title,
       subtitle: toPlainText(heading),
-      icon,
+      ...sectionPreview({ name, icon: icon() }),
     }),
   },
 });
diff --git a/apps/sanity/schema/components/ServicesOverview.ts b/apps/sanity/schema/components/ServicesOverview.ts
@@ -1,5 +1,6 @@
 import { defineField } from 'sanity';
 import { toPlainText } from '../../utils/to-plain-text';
+import { sectionPreview } from '../../utils/section-preview';
 
 const name = 'ServicesOverview';
 const title = 'Sekcja z przeglądem usług';
@@ -126,7 +127,7 @@ export default defineField({
     prepare: ({ heading }) => ({
       title: title,
       subtitle: toPlainText(heading),
-      icon,
+      ...sectionPreview({ name, icon: icon() }),
     }),
   },
 });
diff --git a/apps/sanity/schema/components/SimpleCtaSection.ts b/apps/sanity/schema/components/SimpleCtaSection.ts
@@ -1,5 +1,6 @@
 import { defineField } from 'sanity';
 import { toPlainText } from '../../utils/to-plain-text';
+import { sectionPreview } from '../../utils/section-preview';
 
 const name = 'SimpleCtaSection';
 const title = 'Prosta sekcja z CTA';
@@ -32,14 +33,12 @@ export default defineField({
   ],
   preview: {
     select: {
-      heading: 'heading',
-      media: 'list.0.img',
+      name: 'name',
     },
-    prepare: ({ heading, media }) => ({
+    prepare: ({ name }) => ({
       title: title,
-      subtitle: toPlainText(heading),
-      media,
-      icon,
+      subtitle: toPlainText(name),
+      ...sectionPreview({ name, icon: icon() }),
     }),
   },
 });
diff --git a/apps/sanity/schema/components/SimpleHeadingFullImage.ts b/apps/sanity/schema/components/SimpleHeadingFullImage.ts
@@ -1,5 +1,6 @@
 import { defineField } from 'sanity';
 import { toPlainText } from '../../utils/to-plain-text';
+import { sectionPreview } from '../../utils/section-preview';
 
 const name = 'SimpleHeadingFullImage';
 const title = 'Prosty nagłówek z pełnym obrazem';
@@ -39,13 +40,11 @@ export default defineField({
   preview: {
     select: {
       heading: 'heading',
-      media: 'image',
     },
-    prepare: ({ heading, media }) => ({
+    prepare: ({ heading }) => ({
       title: title,
       subtitle: toPlainText(heading),
-      media,
-      icon,
+      ...sectionPreview({ name, icon: icon() }),
     }),
   },
 });
diff --git a/apps/sanity/schema/components/SplitContentImageGrid.ts b/apps/sanity/schema/components/SplitContentImageGrid.ts
@@ -1,5 +1,6 @@
 import { defineField } from 'sanity';
 import { toPlainText } from '../../utils/to-plain-text';
+import { sectionPreview } from '../../utils/section-preview';
 
 const name = 'SplitContentImageGrid';
 const title = 'Sekcja z treścią i siatką obrazów';
@@ -44,7 +45,7 @@ export default defineField({
     prepare: ({ heading }) => ({
       title,
       subtitle: toPlainText(heading),
-      icon,
+      ...sectionPreview({ name, icon: icon() }),
     }),
   },
 });
diff --git a/apps/sanity/schema/components/TwoColumnTextWithTags.ts b/apps/sanity/schema/components/TwoColumnTextWithTags.ts
@@ -1,5 +1,6 @@
 import { defineField } from 'sanity';
 import { toPlainText } from '../../utils/to-plain-text';
+import { sectionPreview } from '../../utils/section-preview';
 
 const name = 'TwoColumnTextWithTags';
 const title = 'Sekcja Kolumnowa z Tagami';
@@ -46,13 +47,11 @@ export default defineField({
   preview: {
     select: {
       heading: 'heading',
-      media: 'img',
     },
-    prepare: ({ heading, media }) => ({
+    prepare: ({ heading }) => ({
       title: title,
       subtitle: toPlainText(heading),
-      media,
-      icon,
+      ...sectionPreview({ name, icon: icon() }),
     }),
   },
 });
diff --git a/apps/sanity/static/TextBlockCtaAndImage.webp b/apps/sanity/static/TextBlockCtaAndImage.webp
diff --git a/apps/sanity/utils/section-preview.tsx b/apps/sanity/utils/section-preview.tsx
@@ -0,0 +1,33 @@
+import { Box, Text, Tooltip } from '@sanity/ui';
+
+export const sectionPreview = ({ name, icon, label }: { name: string; icon: string; label?: string }) => ({
+  media: () => (
+    <Tooltip
+      animate
+      placement="top"
+      portal
+      content={
+        <Box padding={2}>
+          <img src={`/static/${name}.webp`} width={610} alt="" style={{ maxWidth: '100%' }} />
+          {label && (
+            <Text
+              style={{
+                fontSize: '0.875rem',
+                padding: '1rem',
+                display: 'block',
+                textAlign: 'center',
+                borderTop: '1px solid rgba(255,255,255,0.13)',
+                textTransform: 'uppercase',
+                fontWeight: '600',
+              }}
+            >
+              {label}
+            </Text>
+          )}
+        </Box>
+      }
+    >
+      <span>{icon}</span>
+    </Tooltip>
+  ),
+});