blocks-dusted 0.1.9 → 0.1.11

package/templates/blocks/DD-Testimonials/Component.tsx

@@ -1,147 +1,147 @@
-"use client";
-
-import React from "react";
-import Image from "next/image";
-import { Star } from "lucide-react";
-import { motion, type Variants } from "framer-motion";
-export type DDTestimonialsProps = Record<string, any>;
-type Media = { url?: string | null };
-type Testimonial = {
-  id?: string | null;
-  title?: string | null;
-  content?: unknown;
-  designation?: unknown;
-  companyLogo?: Media | string | null;
-  fallbackAvatarUrl?: string | null;
-  rating?: number | null;
-};
-
-function isLocalImageSrc(src?: string | null): src is string {
-  return typeof src === "string" && src.startsWith("/api/media/file/");
-}
-
-const containerVariants: Variants = {
-  hidden: {},
-  show: { transition: { staggerChildren: 0.12, delayChildren: 0.05 } },
-};
-
-const cardVariants: Variants = {
-  hidden: { opacity: 0, y: 24 },
-  show: { opacity: 1, y: 0, transition: { duration: 0.5, ease: "easeOut" } },
-};
-
-export const DDTestimonials: React.FC<DDTestimonialsProps> = ({
-  eyebrow,
-  headline,
-  testimonials,
-  sectionId,
-  customCSS,
-}) => {
-  const populated = ((testimonials ?? []) as unknown[]).filter(
-    (t): t is Testimonial => typeof t === "object" && t !== null,
-  );
-
-  return (
-    <>
-      {customCSS && <style dangerouslySetInnerHTML={{ __html: customCSS }} />}
-
-      <div id={sectionId ?? "testimonials"} className="py-24">
-        <div className="max-w-6xl lg:max-w-7xl mx-auto px-4 md:px-6">
-          {/* Header */}#BlockName-DDTestimonials
-          <div className="text-center max-w-xl mx-auto mb-14">
-            {eyebrow && (
-              <p className="text-[11.5px] font-semibold text-stone-400 tracking-widest uppercase mb-3 top-caption">
-                {eyebrow}
-              </p>
-            )}
-            <h2 className="text-3xl font-semibold text-stone-900 dark:text-stone-50 leading-tight">
-              {headline}
-            </h2>
-          </div>
-          {/* Testimonials */}
-          {populated.length > 0 && (
-            <motion.div
-              className="grid grid-cols-1 md:grid-cols-3 gap-6"
-              variants={containerVariants}
-              initial="hidden"
-              whileInView="show"
-              viewport={{ once: false, amount: 0.15 }}
-            >
-              {populated.map((t, i) => {
-                const avatarUrl =
-                  typeof t.companyLogo === "object" &&
-                  t.companyLogo !== null &&
-                  "url" in t.companyLogo
-                    ? t.companyLogo.url
-                    : (t.fallbackAvatarUrl ?? null);
-                const safeAvatarUrl = isLocalImageSrc(avatarUrl)
-                  ? avatarUrl
-                  : null;
-
-                const stars = Math.min(5, Math.max(1, t.rating ?? 5));
-
-                return (
-                  <motion.div
-                    key={t.id ?? i}
-                    className="rounded-2xl bg-stone-100 dark:bg-stone-900 border border-stone-100 dark:border-stone-800 p-8 flex flex-col"
-                    variants={cardVariants}
-                    style={{ cornerShape: "squircle" } as React.CSSProperties}
-                  >
-                    {/* Stars */}
-                    <div className="flex items-center gap-1 mb-5">
-                      {Array.from({ length: stars }).map((_, si) => (
-                        <Star
-                          key={si}
-                          size={14}
-                          className="text-amber-400"
-                          fill="currentColor"
-                        />
-                      ))}
-                    </div>
-
-                    {/* Quote */}
-                    {t.content ? (
-                      <div className="text-sm text-stone-400 leading-relaxed flex-1 mb-6">
-                        {/* TODO: Reconnect this project's RichText renderer for testimonial content. */}
-                        <span>
-                          Reconnect this project's RichText renderer for
-                          testimonial content.
-                        </span>
-                      </div>
-                    ) : null}
-
-                    {/* Author / Company */}
-                    <div className="flex items-center gap-3 pt-5 border-t border-stone-800">
-                      {safeAvatarUrl && (
-                        <div className="w-10 h-10 rounded-full overflow-hidden shrink-0 relative">
-                          <Image
-                            src={safeAvatarUrl}
-                            alt={t.title ?? ""}
-                            fill
-                            sizes="40px"
-                            className="object-cover object-top"
-                          />
-                        </div>
-                      )}
-                      <div>
-                        <div className="text-sm font-semibold text-stone-800 dark:text-stone-50">
-                          {t.title}
-                        </div>
-                        {t.designation ? (
-                          <div className="text-xs text-stone-300">
-                            {/* TODO: Reconnect RichText for designation if needed. */}
-                            <span>Reconnect RichText for designation</span>
-                          </div>
-                        ) : null}
-                      </div>
-                    </div>
-                  </motion.div>
-                );
-              })}
-            </motion.div>
-          )}
-        </div>
-      </div>
-    </>
-  );
-};
+"use client";
+
+import React from "react";
+import Image from "next/image";
+import { Star } from "lucide-react";
+import { motion, type Variants } from "framer-motion";
+export type DDTestimonialsProps = Record<string, any>;
+type Media = { url?: string | null };
+type Testimonial = {
+  id?: string | null;
+  title?: string | null;
+  content?: unknown;
+  designation?: unknown;
+  companyLogo?: Media | string | null;
+  fallbackAvatarUrl?: string | null;
+  rating?: number | null;
+};
+
+function isLocalImageSrc(src?: string | null): src is string {
+  return typeof src === "string" && src.startsWith("/api/media/file/");
+}
+
+const containerVariants: Variants = {
+  hidden: {},
+  show: { transition: { staggerChildren: 0.12, delayChildren: 0.05 } },
+};
+
+const cardVariants: Variants = {
+  hidden: { opacity: 0, y: 24 },
+  show: { opacity: 1, y: 0, transition: { duration: 0.5, ease: "easeOut" } },
+};
+
+export const DDTestimonials: React.FC<DDTestimonialsProps> = ({
+  eyebrow,
+  headline,
+  testimonials,
+  sectionId,
+  customCSS,
+}) => {
+  const populated = ((testimonials ?? []) as unknown[]).filter(
+    (t): t is Testimonial => typeof t === "object" && t !== null,
+  );
+
+  return (
+    <>
+      {customCSS && <style dangerouslySetInnerHTML={{ __html: customCSS }} />}
+
+      <div id={sectionId ?? "testimonials"} className="py-24">
+        <div className="max-w-6xl lg:max-w-7xl mx-auto px-4 md:px-6">
+          {/* Header */}
+          <div className="text-center max-w-xl mx-auto mb-14">
+            {eyebrow && (
+              <p className="text-[11.5px] font-semibold text-stone-400 tracking-widest uppercase mb-3 top-caption">
+                {eyebrow}
+              </p>
+            )}
+            <h2 className="text-3xl font-semibold text-stone-900 dark:text-stone-50 leading-tight">
+              {headline}
+            </h2>
+          </div>
+          {/* Testimonials */}
+          {populated.length > 0 && (
+            <motion.div
+              className="grid grid-cols-1 md:grid-cols-3 gap-6"
+              variants={containerVariants}
+              initial="hidden"
+              whileInView="show"
+              viewport={{ once: false, amount: 0.15 }}
+            >
+              {populated.map((t, i) => {
+                const avatarUrl =
+                  typeof t.companyLogo === "object" &&
+                  t.companyLogo !== null &&
+                  "url" in t.companyLogo
+                    ? t.companyLogo.url
+                    : (t.fallbackAvatarUrl ?? null);
+                const safeAvatarUrl = isLocalImageSrc(avatarUrl)
+                  ? avatarUrl
+                  : null;
+
+                const stars = Math.min(5, Math.max(1, t.rating ?? 5));
+
+                return (
+                  <motion.div
+                    key={t.id ?? i}
+                    className="rounded-2xl bg-stone-100 dark:bg-stone-900 border border-stone-100 dark:border-stone-800 p-8 flex flex-col"
+                    variants={cardVariants}
+                    style={{ cornerShape: "squircle" } as React.CSSProperties}
+                  >
+                    {/* Stars */}
+                    <div className="flex items-center gap-1 mb-5">
+                      {Array.from({ length: stars }).map((_, si) => (
+                        <Star
+                          key={si}
+                          size={14}
+                          className="text-amber-400"
+                          fill="currentColor"
+                        />
+                      ))}
+                    </div>
+
+                    {/* Quote */}
+                    {t.content ? (
+                      <div className="text-sm text-stone-400 leading-relaxed flex-1 mb-6">
+                        {/* TODO: Reconnect this project's RichText renderer for testimonial content. */}
+                        <span>
+                          Reconnect this project's RichText renderer for
+                          testimonial content.
+                        </span>
+                      </div>
+                    ) : null}
+
+                    {/* Author / Company */}
+                    <div className="flex items-center gap-3 pt-5 border-t border-stone-800">
+                      {safeAvatarUrl && (
+                        <div className="w-10 h-10 rounded-full overflow-hidden shrink-0 relative">
+                          <Image
+                            src={safeAvatarUrl}
+                            alt={t.title ?? ""}
+                            fill
+                            sizes="40px"
+                            className="object-cover object-top"
+                          />
+                        </div>
+                      )}
+                      <div>
+                        <div className="text-sm font-semibold text-stone-800 dark:text-stone-50">
+                          {t.title}
+                        </div>
+                        {t.designation ? (
+                          <div className="text-xs text-stone-300">
+                            {/* TODO: Reconnect RichText for designation if needed. */}
+                            <span>Reconnect RichText for designation</span>
+                          </div>
+                        ) : null}
+                      </div>
+                    </div>
+                  </motion.div>
+                );
+              })}
+            </motion.div>
+          )}
+        </div>
+      </div>
+    </>
+  );
+};

package/templates/blocks/DD-Testimonials/config.ts

@@ -1,120 +1,120 @@
-import type { Block } from 'payload'
-
-export const DDTestimonials: Block = {
-  slug: 'DD-Testimonials',
-  interfaceName: 'DDTestimonials',
-  labels: {
-    singular: 'Studio Testimonials',
-    plural: 'Studio Testimonials Sections'
-  },
-  fields: [
-    {
-      type: 'tabs',
-      tabs: [
-        {
-          label: 'Header',
-          fields: [
-            {
-              name: 'eyebrow',
-              type: 'text',
-              label: 'Eyebrow Label',
-              defaultValue: 'Client Stories'
-            },
-            {
-              name: 'headline',
-              type: 'text',
-              label: 'Headline',
-              required: true,
-              defaultValue: "Don't take our word for it"
-            }
-          ]
-        },
-        {
-          label: 'Testimonials',
-          fields: [
-            // Reconnect option:
-            // If the target project has a Testimonials collection, replace the standalone
-            // array below with this relationship field.
-            // {
-            //   name: 'testimonials',
-            //   type: 'relationship',
-            //   relationTo: 'testimonials',
-            //   hasMany: true,
-            //   label: 'Select Testimonials',
-            //   admin: {
-            //     description:
-            //       'Pick from the Testimonials collection. Fields used: quote, author, role, avatar, fallbackAvatarUrl, rating.'
-            //   }
-            // },
-            {
-              name: 'testimonials',
-              type: 'array',
-              label: 'Testimonials',
-              fields: [
-                {
-                  name: 'title',
-                  type: 'text',
-                  label: 'Author',
-                  required: true
-                },
-                {
-                  name: 'content',
-                  type: 'richText',
-                  label: 'Quote'
-                },
-                {
-                  name: 'designation',
-                  type: 'richText',
-                  label: 'Designation'
-                },
-                {
-                  name: 'companyLogo',
-                  type: 'upload',
-                  relationTo: 'media',
-                  label: 'Avatar / Logo'
-                },
-                {
-                  name: 'fallbackAvatarUrl',
-                  type: 'text',
-                  label: 'Fallback Avatar URL'
-                },
-                {
-                  name: 'rating',
-                  type: 'number',
-                  label: 'Rating',
-                  defaultValue: 5,
-                  min: 1,
-                  max: 5
-                }
-              ],
-              defaultValue: [
-                {
-                  title: 'DesignsDusted Client',
-                  fallbackAvatarUrl: '',
-                  rating: 5
-                }
-              ]
-            }
-          ]
-        },
-        {
-          label: 'Settings',
-          fields: [
-            {
-              name: 'sectionId',
-              type: 'text',
-              label: 'Section ID',
-              defaultValue: 'testimonials'
-            },
-            {
-              name: 'customCSS',
-              type: 'code',
-              label: 'Custom CSS',
-              admin: { language: 'css' }
-            }
-          ]
-        }
-      ]
-    }
-  ]
-}
+import type { Block } from 'payload'
+
+export const DDTestimonials: Block = {
+  slug: 'DD-Testimonials',
+  interfaceName: 'DDTestimonials',
+  labels: {
+    singular: 'Studio Testimonials',
+    plural: 'Studio Testimonials Sections'
+  },
+  fields: [
+    {
+      type: 'tabs',
+      tabs: [
+        {
+          label: 'Header',
+          fields: [
+            {
+              name: 'eyebrow',
+              type: 'text',
+              label: 'Eyebrow Label',
+              defaultValue: 'Client Stories'
+            },
+            {
+              name: 'headline',
+              type: 'text',
+              label: 'Headline',
+              required: true,
+              defaultValue: "Don't take our word for it"
+            }
+          ]
+        },
+        {
+          label: 'Testimonials',
+          fields: [
+            // Reconnect option:
+            // If the target project has a Testimonials collection, replace the standalone
+            // array below with this relationship field.
+            // {
+            //   name: 'testimonials',
+            //   type: 'relationship',
+            //   relationTo: 'testimonials',
+            //   hasMany: true,
+            //   label: 'Select Testimonials',
+            //   admin: {
+            //     description:
+            //       'Pick from the Testimonials collection. Fields used: quote, author, role, avatar, fallbackAvatarUrl, rating.'
+            //   }
+            // },
+            {
+              name: 'testimonials',
+              type: 'array',
+              label: 'Testimonials',
+              fields: [
+                {
+                  name: 'title',
+                  type: 'text',
+                  label: 'Author',
+                  required: true
+                },
+                {
+                  name: 'content',
+                  type: 'richText',
+                  label: 'Quote'
+                },
+                {
+                  name: 'designation',
+                  type: 'richText',
+                  label: 'Designation'
+                },
+                {
+                  name: 'companyLogo',
+                  type: 'upload',
+                  relationTo: 'media',
+                  label: 'Avatar / Logo'
+                },
+                {
+                  name: 'fallbackAvatarUrl',
+                  type: 'text',
+                  label: 'Fallback Avatar URL'
+                },
+                {
+                  name: 'rating',
+                  type: 'number',
+                  label: 'Rating',
+                  defaultValue: 5,
+                  min: 1,
+                  max: 5
+                }
+              ],
+              defaultValue: [
+                {
+                  title: 'DesignsDusted Client',
+                  fallbackAvatarUrl: '',
+                  rating: 5
+                }
+              ]
+            }
+          ]
+        },
+        {
+          label: 'Settings',
+          fields: [
+            {
+              name: 'sectionId',
+              type: 'text',
+              label: 'Section ID',
+              defaultValue: 'testimonials'
+            },
+            {
+              name: 'customCSS',
+              type: 'code',
+              label: 'Custom CSS',
+              admin: { language: 'css' }
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}