blocks-dusted 0.1.9 → 0.1.11

package/templates/blocks/DDHG-TeamCards/Component.tsx

@@ -0,0 +1,131 @@
+'use client'
+
+import { useEffect, useRef } from 'react'
+import Image from 'next/image'
+import Link from 'next/link'
+import { Globe, Briefcase, Camera } from 'lucide-react'
+import { cn } from '@/utilities/ui'
+import { getMediaUrl } from '@/utilities/getMediaUrl'
+
+type MediaDoc = {
+  url?: string | null
+  alt?: string | null
+}
+
+type TeamMember = {
+  name?: string | null
+  role?: string | null
+  bio?: string | null
+  image?: number | MediaDoc | null
+  priority?: boolean | null
+  facebookUrl?: string | null
+  linkedinUrl?: string | null
+  instagramUrl?: string | null
+  id?: string | null
+}
+
+export type DDHGTeamCardsProps = {
+  sectionId?: string | null
+  customClassName?: string | null
+  customCSS?: string | null
+  members?: TeamMember[] | null
+}
+
+function getMediaDoc(img?: number | MediaDoc | null): MediaDoc | null {
+  if (!img || typeof img === 'number') return null
+  return img
+}
+
+export const DDHGTeamCards: React.FC<DDHGTeamCardsProps> = ({
+  sectionId,
+  customClassName,
+  customCSS,
+  members,
+}) => {
+  const ref = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            entry.target.querySelectorAll<HTMLElement>('.reveal').forEach((el, i) => {
+              setTimeout(() => {
+                el.style.opacity = '1'
+                el.style.transform = 'translateY(0)'
+              }, i * 100)
+            })
+            observer.unobserve(entry.target)
+          }
+        })
+      },
+      { threshold: 0.1 },
+    )
+    if (ref.current) observer.observe(ref.current)
+    return () => observer.disconnect()
+  }, [])
+
+  return (
+    <div id={sectionId ?? undefined} className={cn('px-5 md:px-8 py-8', customClassName)} ref={ref}>
+      {customCSS && <style dangerouslySetInnerHTML={{ __html: customCSS }} />}
+      <div className="max-w-7xl mx-auto">
+        {members && members.length > 0 && (
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5 md:gap-6">
+            {members.map((member, i) => {
+              const imageDoc = getMediaDoc(member.image)
+              const imageUrl = getMediaUrl(imageDoc?.url)
+              const socials = [
+                { Icon: Globe, url: member.facebookUrl, label: 'Facebook' },
+                { Icon: Briefcase, url: member.linkedinUrl, label: 'LinkedIn' },
+                { Icon: Camera, url: member.instagramUrl, label: 'Instagram' },
+              ].filter((s) => !!s.url)
+
+              return (
+                <div
+                  key={member.id != null ? `id-${member.id}` : `idx-${i}`}
+                  className="reveal group relative overflow-hidden cursor-pointer bg-transparent h-[28rem] md:h-[32rem]"
+                  style={{ opacity: 0, transform: 'translateY(20px)', transition: `opacity 0.9s ease ${i * 0.1}s, transform 0.9s ease ${i * 0.1}s` }}
+                >
+                  {imageDoc && imageUrl && (
+                    <div className="relative w-full h-full overflow-hidden brightness-100 group-hover:brightness-50">
+                      <Image
+                        src={imageUrl}
+                        alt={imageDoc.alt ?? member.name ?? ''}
+                        fill
+                        sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
+                        priority={Boolean(member.priority)}
+                        className="team-member object-cover object-top brightness-100 group-hover:brightness-50 group-hover:scale-110 transition-transform duration-500 ease-out"
+                      />
+                    </div>
+                  )}
+                  <div className="pattern-overlay absolute inset-0 opacity-[0.03] pointer-events-none" style={{ backgroundImage: 'repeating-linear-gradient(90deg, #000 0px, #000 1px, transparent 1px, transparent 20px)' }} />
+                  <div className="gradient-overlay absolute inset-0 bg-gradient-to-t from-black/80 via-black/80 to-transparent group-hover:from-black/90 transition-all duration-300 group-hover:backdrop-brightness-50" />
+                  <div className="content-card absolute inset-0 flex flex-col justify-end p-3 text-white">
+                    <div className="z-10 text-center mb-3">
+                      {member.name && <h3 className="text-xl md:text-2xl font-bold mb-1 text-white drop-shadow-lg" style={{ fontFamily: 'Outfit, sans-serif', fontWeight: 700 }}>{member.name}</h3>}
+                      {member.role && <p className="text-xs md:text-sm font-medium uppercase tracking-wider text-stone-200 dark:text-stone-200 drop-shadow-md" style={{ fontFamily: "'Inter', sans-serif", fontWeight: 500 }}>{member.role}</p>}
+                    </div>
+                    <div className="hover-panel transform translate-y-full group-hover:translate-y-0 transition-transform duration-300 ease-out p-4" style={{ background: 'rgba(0,0,0,0.4)', backdropFilter: 'blur(8px)' }}>
+                      {member.bio && <p className="text-[13px] text-white/70 leading-relaxed mb-4 opacity-0 group-hover:opacity-100 transition-opacity duration-300 delay-100">{member.bio}</p>}
+                      {socials.length > 0 && (
+                        <div className="socials-map flex gap-3 justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 delay-200">
+                          {socials.map(({ Icon, url, label }) => (
+                            <Link key={label} href={url!} target="_blank" rel="noopener noreferrer" aria-label={`${member.name} on ${label}`} className="text-white/70 hover:text-white hover:scale-110 transition-all duration-200 p-2 rounded-full bg-white/10 hover:bg-white/20 backdrop-blur-sm">
+                              <Icon size={14} />
+                            </Link>
+                          ))}
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                </div>
+              )
+            })}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default DDHGTeamCards

package/templates/blocks/DDHG-TeamCards/config.ts

@@ -0,0 +1,48 @@
+import type { Block } from 'payload'
+
+export const DDHGTeamCards: Block = {
+  slug: 'DDHG-TeamCards',
+  interfaceName: 'DDHGTeamCards',
+  labels: { singular: 'Team Cards', plural: 'Team Cards' },
+  fields: [
+    {
+      type: 'tabs',
+      tabs: [
+        {
+          label: 'Team Members',
+          fields: [
+            {
+              name: 'members',
+              type: 'array',
+              label: 'Team Members',
+              fields: [
+                { type: 'row', fields: [
+                  { name: 'name', type: 'text', label: 'Name', required: true, admin: { width: '50%' } },
+                  { name: 'role', type: 'text', label: 'Role / Title', admin: { width: '50%' } },
+                ] },
+                { name: 'bio', type: 'textarea', label: 'Bio (shown on hover)' },
+                { name: 'image', type: 'upload', relationTo: 'media', label: 'Photo' },
+                { name: 'priority', type: 'checkbox', label: 'High Priority', defaultValue: false, admin: { description: 'Enable for above-the-fold media.' } },
+                { type: 'row', fields: [
+                  { name: 'linkedinUrl', type: 'text', label: 'LinkedIn URL', admin: { width: '33%' } },
+                  { name: 'instagramUrl', type: 'text', label: 'Instagram URL', admin: { width: '33%' } },
+                  { name: 'facebookUrl', type: 'text', label: 'Facebook URL', admin: { width: '33%' } },
+                ] },
+              ],
+            },
+          ],
+        },
+        {
+          label: 'Advanced',
+          fields: [
+            { type: 'row', fields: [
+              { name: 'sectionId', type: 'text', label: 'Section ID', admin: { width: '50%', description: 'Optional anchor ID' } },
+              { name: 'customClassName', type: 'text', label: 'Custom CSS Classes', admin: { width: '50%' } },
+            ] },
+            { name: 'customCSS', type: 'code', label: 'Custom CSS', admin: { language: 'css', description: 'Injected as a <style> tag. Use with caution.' } },
+          ],
+        },
+      ],
+    },
+  ],
+}

package/templates/blocks/DDHG-TeamCards/manifest.json

@@ -0,0 +1,29 @@
+{
+  "type": "block",
+  "name": "DDHG-TeamCards",
+  "label": "Team Cards",
+  "sourceName": "TeamCards",
+  "portableName": "DDHG-TeamCards",
+  "slug": "DDHG-TeamCards",
+  "version": "0.0.1",
+  "source": { "repo": "Hadizainal/HeatherGrey2025", "originalPath": "src/blocks/TeamCards", "originalSlug": "teamCards", "originalConfigExport": "TeamCards", "originalComponentExport": "TeamCardsBlock", "originalInterfaceName": "TeamCardsBlockProps" },
+  "files": [
+    { "from": "Component.tsx", "to": "src/blocks/DDHG-TeamCards/Component.tsx" },
+    { "from": "config.ts", "to": "src/blocks/DDHG-TeamCards/config.ts" }
+  ],
+  "dependencies": [{ "name": "lucide-react" }],
+  "sharedFiles": [],
+  "requiredProjectFiles": [
+    { "path": "src/utilities/ui.ts", "reason": "Component uses the cn utility." },
+    { "path": "src/utilities/getMediaUrl.ts", "reason": "Component resolves media URLs through getMediaUrl." }
+  ],
+  "optionalProjectFiles": [],
+  "collectionRegistration": { "enabled": true, "collections": ["Pages", "Posts"] },
+  "renderBlocksRegistration": { "enabled": true },
+  "renderBlocksBehavior": { "wrapperless": false },
+  "pageRouteIntegration": { "required": false, "manualSteps": [] },
+  "manualSteps": ["Run payload generate:types after schema changes."],
+  "notes": ["Converted from HeatherGrey2025 TeamCards.", "Generated Payload media type dependency replaced with a local structural type.", "Priority loading now follows each member row's priority field.", "Installer must not overwrite existing target files."],
+  "exportName": "DDHGTeamCards",
+  "interfaceName": "DDHGTeamCards"
+}