feat: add label for images

freedomzzj · Jun 24, 2023 · 6632e3b · 6632e3b
1 parent d3c545b
commit 6632e3b
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 16 deletions.
diff --git a/components/portable-text/PortableTextImage.tsx b/components/portable-text/PortableTextImage.tsx
@@ -2,6 +2,7 @@
 
 import { type PortableTextComponentProps } from '@portabletext/react'
 import * as Dialog from '@radix-ui/react-dialog'
+import { clsxm } from '@zolplay/utils'
 import { AnimatePresence, motion } from 'framer-motion'
 import Image from 'next/image'
 import React from 'react'
@@ -19,8 +20,14 @@ export function PortableTextImage({
  height: number
  }
  lqip?: string
+ label?: string
+ alt?: string
 }>) {
  const [isZoomed, setIsZoomed] = React.useState(false)
+ const hasLabel = React.useMemo(
+ () => typeof value.label === 'string' && value.label.length > 0,
+ [value.label]
+ )
 
  return (
  <div data-blockid={value._key} className="group relative pr-3 md:pr-0">
@@ -41,20 +48,34 @@ export function PortableTextImage({
 
  <AnimatePresence>
  {!isZoomed && (
- <motion.div className="relative" layoutId={`image_${value._key}`}>
- <Dialog.Trigger>
- <Image
- src={value.url}
- width={value.dimensions.width}
- height={value.dimensions.height}
- placeholder={value.lqip ? 'blur' : 'empty'}
- blurDataURL={value.lqip}
- className="relative z-20 cursor-zoom-in rounded-xl dark:brightness-75 dark:transition-[filter] dark:hover:brightness-100 md:rounded-3xl"
- alt=""
- fetchPriority="high"
- />
- </Dialog.Trigger>
- </motion.div>
+ <div
+ className={clsxm(
+ hasLabel ? 'rounded-2xl bg-zinc-100 p-2 dark:bg-zinc-800' : ''
+ )}
+ >
+ <motion.div className="relative" layoutId={`image_${value._key}`}>
+ <Dialog.Trigger>
+ <Image
+ src={value.url}
+ width={value.dimensions.width}
+ height={value.dimensions.height}
+ placeholder={value.lqip ? 'blur' : 'empty'}
+ blurDataURL={value.lqip}
+ className={clsxm(
+ 'relative z-20 cursor-zoom-in dark:brightness-75 dark:transition-[filter] dark:hover:brightness-100',
+ hasLabel ? 'rounded-xl' : 'rounded-xl md:rounded-3xl'
+ )}
+ alt={value.alt || ''}
+ fetchPriority="high"
+ />
+ </Dialog.Trigger>
+ </motion.div>
+ {hasLabel && (
+ <span className="flex w-full items-center justify-center text-center text-sm font-medium text-zinc-500 dark:text-zinc-400">
+ {value.label}
+ </span>
+ )}
+ </div>
  )}
  </AnimatePresence>
 
@@ -92,7 +113,7 @@ export function PortableTextImage({
  placeholder={value.lqip ? 'blur' : 'empty'}
  blurDataURL={value.lqip}
  className="mx-auto h-full overflow-hidden object-contain"
- alt=""
+ alt={value.alt || ''}
  unoptimized
  />
  </motion.div>

diff --git a/sanity/queries.ts b/sanity/queries.ts
@@ -65,7 +65,8 @@ export const getBlogPostQuery = groq`
  _type == "image" => {
  "url": asset->url,
  "lqip": asset->metadata.lqip,
- "dimensions": asset->metadata.dimensions
+ "dimensions": asset->metadata.dimensions,
+ ...
  }
  },
  "headings": body[length(style) == 2 && string::startsWith(style, "h")],

diff --git a/sanity/schemas/blockContent.ts b/sanity/schemas/blockContent.ts
@@ -77,6 +77,11 @@ export default defineType({
  type: 'string',
  title: 'Alternative Text',
  },
+ {
+ name: 'label',
+ type: 'string',
+ title: 'Label',
+ },
  ],
  }),
  defineArrayMember({