blocks-dusted 0.1.10 → 0.1.12

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

@@ -0,0 +1,250 @@
+'use client'
+
+import React from 'react'
+import Link from 'next/link'
+import { motion, type Variants } from 'framer-motion'
+import { cn } from '@/utilities/ui'
+
+export interface Chip {
+  label: string
+  icon?: string
+  customBackgroundColor?: string
+  customTextColor?: string
+  customBorderColor?: string
+  link?: string
+  id?: string
+}
+
+export interface ChipBlockProps {
+  blockName?: string
+  blockType?: 'chipBlock'
+  layout?: 'row' | 'column' | 'row-wrap'
+  size?: 'small' | 'medium' | 'large'
+  gap?: 'none' | 'small' | 'medium' | 'large'
+  alignment?: 'start' | 'center' | 'end' | 'space-between'
+  backgroundColor?: string
+  textColor?: string
+  borderColor?: string
+  borderWidth?: '0' | '1' | '2' | '3' | '4'
+  borderRadius?: 'none' | 'sm' | 'md' | 'lg' | 'full'
+  hoverEffect?: boolean
+  chips?: Chip[]
+  customClassName?: string
+  animate?: boolean
+  maxWidth?: string
+  padding?: 'none' | 'small' | 'medium' | 'large'
+}
+
+export const ChipBlockComponent: React.FC<ChipBlockProps> = ({
+  layout = 'row',
+  gap = 'medium',
+  alignment = 'center',
+  backgroundColor,
+  textColor,
+  borderColor,
+  hoverEffect = true,
+  chips = [],
+  customClassName,
+  animate = false,
+  maxWidth,
+  padding = 'none',
+}) => {
+  // Gap mappings
+  const gapClasses = {
+    none: 'gap-0',
+    small: 'gap-2',
+    medium: 'gap-3',
+    large: 'gap-4',
+  }
+
+  // Layout mappings
+  const layoutClasses = {
+    row: 'flex-row flex-nowrap overflow-x-auto',
+    column: 'flex-col',
+    'row-wrap': 'flex-row flex-wrap',
+  }
+
+  // Alignment mappings
+  const alignmentClasses = {
+    start: 'justify-start',
+    center: 'justify-center',
+    end: 'justify-end',
+    'space-between': 'justify-between',
+  }
+
+  // Padding mappings
+  const paddingClasses = {
+    none: '',
+    small: 'p-2',
+    medium: 'p-4',
+    large: 'p-6',
+  }
+
+  // Helper to determine if a color is a Tailwind class or CSS color
+  const isColorValue = (color?: string): boolean => {
+    if (!color) return false
+    return color.startsWith('#') || color.startsWith('rgb') || color.startsWith('hsl')
+  }
+
+  // Generate chip styles
+  const getChipStyles = (chip: Chip) => {
+    const bgColor = chip.customBackgroundColor || backgroundColor
+    const txtColor = chip.customTextColor || textColor
+    const bdrColor = chip.customBorderColor || borderColor
+
+    const styles: React.CSSProperties = {}
+
+    if (bgColor && isColorValue(bgColor)) {
+      styles.backgroundColor = bgColor
+    }
+    if (txtColor && isColorValue(txtColor)) {
+      styles.color = txtColor
+    }
+    if (bdrColor && isColorValue(bdrColor)) {
+      styles.borderColor = bdrColor
+    }
+
+    return styles
+  }
+
+  // Generate chip classes
+  const getChipClasses = (chip: Chip) => {
+    const bgColor = chip.customBackgroundColor || backgroundColor
+    const txtColor = chip.customTextColor || textColor
+    const bdrColor = chip.customBorderColor || borderColor
+
+    const classes = []
+
+    if (bgColor && !isColorValue(bgColor)) {
+      classes.push(bgColor)
+    }
+    if (txtColor && !isColorValue(txtColor)) {
+      classes.push(txtColor)
+    }
+    if (bdrColor && !isColorValue(bdrColor)) {
+      classes.push(bdrColor)
+    }
+
+    return classes.join(' ')
+  }
+
+  // Container styles
+  const containerStyles: React.CSSProperties = maxWidth ? { maxWidth } : {}
+
+  // Animation variants
+  const containerVariants: Variants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.1,
+      },
+    },
+  }
+
+  const chipVariants: Variants = {
+    hidden: { opacity: 0, y: 20 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: {
+        duration: 0.4,
+        ease: 'easeOut',
+      },
+    },
+  }
+
+  const ChipElement = ({ chip, index }: { chip: Chip; index: number }): React.ReactElement => {
+    const chipContent = (
+      <>
+        <div className="absolute inset-0 left-0 right-0 mx-auto h-full w-full mix-blend-hard-light">
+          <div className="absolute inset-0 mx-auto flex items-center justify-center overflow-hidden rounded-full border-y border-white/10 bg-white/[0.05] text-[18px] font-bold tracking-[1px] text-white shadow-[0_15px_35px_rgba(255,255,255,0.15)] backdrop-blur-[15px] transition-all duration-500 before:absolute before:left-0 before:top-0 before:h-full before:w-1/2 before:skew-x-[45deg] before:bg-[linear-gradient(to_left,rgba(255,255,255,0.22),transparent)] before:transition-transform before:duration-700 after:absolute after:inset-[-0.5px] after:rounded-full after:border after:border-white/10 after:shadow-[inset_0_1px_0_rgba(255,255,255,0.45),inset_0_-8px_18px_rgba(0,0,0,0.25)] group-hover:tracking-[2px] group-hover:before:translate-x-[220%]" />
+          <div className="absolute left-1/2 top-[-3px] h-[4px] w-[30px] -translate-x-1/2 rounded-full bg-[#ba55d3] shadow-[0_0_5px_#663399,0_0_15px_#ba55d3,0_0_30px_#663399,0_0_60px_#ff00ff] transition-all duration-500 group-hover:top-0 group-hover:h-full group-hover:w-[80%] group-hover:rounded-full group-hover:bg-[#ba55d355] group-hover:mix-blend-color-dodge group-hover:delay-300" />
+          <div className="absolute bottom-[-3px] left-1/2 h-[4px] w-[30px] -translate-x-1/2 rounded-full bg-[#ba55d3] shadow-[0_0_5px_#663399,0_0_15px_#ba55d3,0_0_30px_#663399,0_0_60px_#ff00ff] transition-all duration-500 group-hover:bottom-0 group-hover:h-full group-hover:w-[80%] group-hover:rounded-full group-hover:bg-[#ba55d399] group-hover:mix-blend-screen group-hover:delay-300 select-none" />
+        </div>
+        <span className="relative z-10 mx-auto flex max-w-md items-center bg-gradient-to-r from-transparent via-white/80 via-50% to-transparent bg-clip-text bg-no-repeat text-neutral-400/70 [background-position:0_0] [background-size:var(--shiny-width)_100%] [--shiny-width:100px] select-none">
+          <span className="flex items-center text-white">
+            {/* {chip.icon && (
+              <span className="chip-icon mr-2 inline-flex h-3.5 w-3.5 items-center justify-center text-xs leading-none">
+                {chip.icon}
+              </span>
+            )} */}
+            <span className="chip-label inline-block select-none">{chip.label}</span>
+          </span>
+        </span>
+      </>
+    )
+
+    const chipClasses = cn(
+      'badge-chip group relative inline-flex items-center justify-center overflow-hidden rounded-full border !border-lime-500 bg-black/80 px-4 py-1.5 text-xs font-semibold text-foreground backdrop-blur-md transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+      '[&[href]]:cursor-pointer [&[href]]:no-underline',
+      hoverEffect &&
+        'hover:-translate-y-0.5 hover:shadow-[0_0_26px_rgba(186,85,211,0.35)] active:translate-y-0',
+      getChipClasses(chip),
+    )
+
+    const chipElement = chip.link ? (
+      <Link
+        href={chip.link}
+        className={chipClasses}
+        style={getChipStyles(chip)}
+        aria-label={chip.label}
+      >
+        {chipContent}
+      </Link>
+    ) : (
+      <span className={chipClasses} style={getChipStyles(chip)}>
+        {chipContent}
+      </span>
+    )
+
+    if (animate) {
+      return (
+        <motion.div key={chip.id || index} variants={chipVariants} className="inline-flex">
+          {chipElement}
+        </motion.div>
+      )
+    }
+
+    return <React.Fragment key={chip.id || index}>{chipElement}</React.Fragment>
+  }
+
+  const containerClasses = cn(
+    'chip-block-container',
+    'flex w-full items-center justify-center',
+    layoutClasses[layout],
+    gapClasses[gap],
+    alignmentClasses[alignment],
+    paddingClasses[padding],
+    customClassName,
+  )
+
+  if (animate) {
+    return (
+      <motion.div
+        className={containerClasses}
+        style={containerStyles}
+        initial="hidden"
+        whileInView="visible"
+        viewport={{ once: true, margin: '-100px' }}
+        variants={containerVariants}
+      >
+        {chips.map((chip, index) => (
+          <ChipElement key={chip.id || index} chip={chip} index={index} />
+        ))}
+      </motion.div>
+    )
+  }
+
+  return (
+    <div className={containerClasses} style={containerStyles}>
+      {chips.map((chip, index) => (
+        <ChipElement key={chip.id || index} chip={chip} index={index} />
+      ))}
+    </div>
+  )
+}
+
+export default ChipBlockComponent
+
+export const DDChip = ChipBlockComponent

package/templates/blocks/DD-Chip/EXAMPLES.md

@@ -0,0 +1,313 @@
+# ChipBlock Usage Examples
+
+## Example 1: Technology Stack Tags
+
+**Configuration:**
+
+```yaml
+Layout: Row Wrap
+Size: Small
+Gap: Medium
+Background Color: #e0e7ff (indigo-100)
+Text Color: #3730a3 (indigo-800)
+Border Width: 1px
+Border Color: #c7d2fe (indigo-300)
+Border Radius: Full
+Hover Effect: Yes
+```
+
+**Chips:**
+
+- React
+- Next.js
+- TypeScript
+- Tailwind CSS
+- Payload CMS
+- Framer Motion
+
+**Result:** Clean, pill-shaped tags that represent your tech stack.
+
+---
+
+## Example 2: Feature Checklist
+
+**Configuration:**
+
+```yaml
+Layout: Column
+Size: Medium
+Gap: Small
+Alignment: Start
+Background Color: #dcfce7 (green-100)
+Text Color: #14532d (green-900)
+Border Width: 2px
+Border Color: #86efac (green-300)
+Border Radius: Medium
+Animate: Yes
+```
+
+**Chips:**
+
+- ✓ Lightning Fast Performance
+- ✓ SEO Optimized
+- ✓ Mobile Responsive
+- ✓ Fully Accessible
+- ✓ Type Safe
+
+**Result:** Vertical list with checkmarks, great for feature highlights.
+
+---
+
+## Example 3: Status Badges
+
+**Configuration:**
+
+```yaml
+Layout: Row
+Size: Medium
+Gap: Large
+Border Radius: Small
+Hover Effect: Yes
+```
+
+**Chips with Individual Colors:**
+
+1. **Active**
+   - Background: #10b981 (green-500)
+   - Text: #ffffff (white)
+   - Border: None
+
+2. **Pending**
+   - Background: #f59e0b (amber-500)
+   - Text: #ffffff (white)
+   - Border: None
+
+3. **Completed**
+   - Background: #3b82f6 (blue-500)
+   - Text: #ffffff (white)
+   - Border: None
+
+**Result:** Color-coded status indicators with vibrant colors.
+
+---
+
+## Example 4: Skill Levels with Links
+
+**Configuration:**
+
+```yaml
+Layout: Row Wrap
+Size: Large
+Gap: Large
+Background Color: transparent
+Text Color: #1f2937 (gray-800)
+Border Width: 3px
+Border Color: #9ca3af (gray-400)
+Border Radius: Large
+Hover Effect: Yes
+Max Width: 800px
+```
+
+**Chips with Links:**
+
+- JavaScript (Expert) → /skills/javascript
+- Python (Advanced) → /skills/python
+- Design (Intermediate) → /skills/design
+- DevOps (Learning) → /skills/devops
+
+**Result:** Outlined chips that act as navigation links.
+
+---
+
+## Example 5: Category Tags with Icons
+
+**Configuration:**
+
+```yaml
+Layout: Row Wrap
+Size: Small
+Gap: Small
+Alignment: Center
+Background: Custom gradient
+Custom Class: gradient-chips
+Animate: Yes
+```
+
+**Custom CSS:**
+
+```css
+.gradient-chips .chip-item {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  border: none;
+  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
+}
+```
+
+**Chips:**
+
+- 🎨 Design
+- 💻 Development
+- 📱 Mobile
+- 🚀 Performance
+- 🔒 Security
+
+**Result:** Gradient background chips with emoji icons.
+
+---
+
+## Example 6: Pricing Features
+
+**Configuration:**
+
+```yaml
+Layout: Column
+Size: Medium
+Gap: Medium
+Background Color: #ffffff (white)
+Text Color: #111827 (gray-900)
+Border Width: 1px
+Border Color: #e5e7eb (gray-200)
+Border Radius: Medium
+Padding: Medium
+Max Width: 400px
+```
+
+**Chips:**
+
+- ⚡ Unlimited projects
+- 👥 Up to 10 team members
+- 📊 Advanced analytics
+- 🔧 Priority support
+- 🌐 Custom domain
+
+**Result:** Clean feature list for pricing cards.
+
+---
+
+## Example 7: Social Media Links
+
+**Configuration:**
+
+```yaml
+Layout: Row
+Size: Large
+Gap: Large
+Alignment: Center
+Background Color: #f3f4f6 (gray-100)
+Border Radius: Full
+Hover Effect: Yes
+```
+
+**Chips with Links:**
+
+- 🐦 Twitter → https://twitter.com/username
+- 📷 Instagram → https://instagram.com/username
+- 💼 LinkedIn → https://linkedin.com/in/username
+- 🎨 Dribbble → https://dribbble.com/username
+
+**Result:** Social media buttons with hover effects.
+
+---
+
+## Example 8: Time-based Tags
+
+**Configuration:**
+
+```yaml
+Layout: Row Wrap
+Size: Small
+Gap: Small
+```
+
+**Chips with Time-based Colors:**
+
+1. **Today** (Background: #ef4444 - red-500, Text: white)
+2. **This Week** (Background: #f59e0b - amber-500, Text: white)
+3. **This Month** (Background: #3b82f6 - blue-500, Text: white)
+4. **Older** (Background: #6b7280 - gray-500, Text: white)
+
+**Result:** Time-based categorization with color coding.
+
+---
+
+## Pro Tips
+
+### 1. Gradient Backgrounds
+
+Use Tailwind gradient classes:
+
+```
+Background: bg-gradient-to-r from-purple-500 to-pink-500
+Text Color: text-white
+```
+
+### 2. Outline Style
+
+For minimal look:
+
+```
+Background: transparent
+Border Width: 2px
+Border Color: Current color
+```
+
+### 3. Glossy Effect
+
+Add custom CSS:
+
+```css
+.glossy-chips .chip-item {
+  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
+  backdrop-filter: blur(10px);
+}
+```
+
+### 4. Stagger Animation
+
+Enable animation for smooth entrance:
+
+```
+Animate: Yes
+Layout: Row Wrap or Column
+```
+
+### 5. Responsive Design
+
+- Use Row Wrap for tags that should wrap on smaller screens
+- Use Column for mobile-friendly vertical lists
+- Set Max Width to prevent chips from being too wide
+
+---
+
+## Color Combinations
+
+### Professional Blue
+
+- Background: `#dbeafe` (blue-50)
+- Text: `#1e3a8a` (blue-900)
+- Border: `#93c5fd` (blue-300)
+
+### Success Green
+
+- Background: `#dcfce7` (green-100)
+- Text: `#14532d` (green-900)
+- Border: `#86efac` (green-300)
+
+### Warning Yellow
+
+- Background: `#fef3c7` (amber-100)
+- Text: `#78350f` (amber-900)
+- Border: `#fcd34d` (amber-300)
+
+### Error Red
+
+- Background: `#fee2e2` (red-100)
+- Text: `#7f1d1d` (red-900)
+- Border: `#fca5a5` (red-300)
+
+### Dark Mode
+
+- Background: `#374151` (gray-700)
+- Text: `#f3f4f6` (gray-100)
+- Border: `#4b5563` (gray-600)