93:I[903690,["/chat-static/_next/static/chunks/350425sq4h0_m.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/19ru4sx2xipbx.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/2b2k-zf-b56kd.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/0tnuf2s5s5v2b.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/2j46pilgqkinh.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/3wiwg53adn758.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/3_e1le12ldpqs.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/095lel5ufcr08.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/15arfkcfit5sz.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/1qn4-ha2vsd-p.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/0ij3lwrjqs3o9.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/3rqx7sbpqnwga.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/1r8nmvs6_rpja.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/1n89ydk8ccom8.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/2ynu6mgagwdj1.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/2cv_oykzmlqpk.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/1bxdx5g1i2u3_.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/35cffbjvsl8sh.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/3ekidzlkpx_x-.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/3c0qka1hg-iqt.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/3kttbsa09z94i.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/2eq_3tgsc9fan.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/2s6vyh6zt9utn.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/395vtu34--uvp.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/105h5cas-3jdf.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/0kwqxvdt6a1ea.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/1rz_9ckgsy-eb.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/3nl30ufs08xyt.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/0xt2xmw3qhxnw.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/194j0nolabgr9.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/26i06jc5kvmaj.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/04dkbwvbkscb6.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/11e80b-y89mrs.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/1nv4rik4luyt3.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/0rr17y2zzppmc.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/37xbvek5lee4t.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/42qj3jlkt-gsv.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/3w1s5uwmgh04y.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/3eky-7-iak2ku.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/1ks0r-j8ozfdw.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/0d2lsedvss_wq.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/1yj2qc3b88ry8.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/3x_wkg7f9hipy.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw"],"ExplicitChatIdProvider"] 94:I[838238,["/chat-static/_next/static/chunks/350425sq4h0_m.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/19ru4sx2xipbx.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/2b2k-zf-b56kd.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/0tnuf2s5s5v2b.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/2j46pilgqkinh.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/3wiwg53adn758.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/3_e1le12ldpqs.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/095lel5ufcr08.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/15arfkcfit5sz.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/1qn4-ha2vsd-p.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/0ij3lwrjqs3o9.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/3rqx7sbpqnwga.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/1r8nmvs6_rpja.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/1n89ydk8ccom8.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/2ynu6mgagwdj1.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/2cv_oykzmlqpk.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/1bxdx5g1i2u3_.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/35cffbjvsl8sh.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/3ekidzlkpx_x-.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/3c0qka1hg-iqt.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/3kttbsa09z94i.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/2eq_3tgsc9fan.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/2s6vyh6zt9utn.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/395vtu34--uvp.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/105h5cas-3jdf.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/0kwqxvdt6a1ea.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/1rz_9ckgsy-eb.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/3nl30ufs08xyt.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/0xt2xmw3qhxnw.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/194j0nolabgr9.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/26i06jc5kvmaj.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/04dkbwvbkscb6.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/11e80b-y89mrs.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/1nv4rik4luyt3.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/0rr17y2zzppmc.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/37xbvek5lee4t.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/42qj3jlkt-gsv.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/3w1s5uwmgh04y.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/3eky-7-iak2ku.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/1ks0r-j8ozfdw.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/0d2lsedvss_wq.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/1yj2qc3b88ry8.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw","/chat-static/_next/static/chunks/3x_wkg7f9hipy.js?dpl=dpl_C2DHey2EVD6rsprJGmUZQHQj4mbw"],"SWRDataProvider"] 95:T25fa,[V0_FILE]typescriptreact:file="tailwind.config.js" isMerged="true" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: 0 }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: 0 }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } [V0_FILE]typescriptreact:file="og-card.tsx" isEdit="true" isQuickEdit="true" "use client" import { useState } from "react" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Textarea } from "@/components/ui/textarea" import { Switch } from "@/components/ui/switch" import { Slider } from "@/components/ui/slider" export default function OGCard() { const [title, setTitle] = useState("Modern Design System") const [subtitle, setSubtitle] = useState("Building beautiful interfaces with ease") const [category, setCategory] = useState("Design") const [author, setAuthor] = useState("Alex Morgan") const [date, setDate] = useState("March 5, 2024") const [showImage, setShowImage] = useState(true) const [gradientIntensity, setGradientIntensity] = useState(50) const [gradientColor, setGradientColor] = useState("blue") return (

OpenGraph Card Generator

Customize your dark-themed OpenGraph card for social media and blog posts

{/* Preview Card */}

{/* Decorative elements */}

{showImage && (

)} {/* Content */}

{/* Category badge */}

{category || "Design"}

{title || "Modern Design System"}

{subtitle || "Building beautiful interfaces with ease"}

{/* Author and date */}

{author || "Alex Morgan"} • {date || "March 5, 2024"}

{/* Bottom bar */}

Title setTitle(e.target.value)} placeholder="Enter title" />

Subtitle

setSubtitle(e.target.value)}
              placeholder="Enter subtitle"
              rows={2}
            />
          </div>

<div className="space-y-2">
            <Label htmlFor="category">Category</Label>
            <Input
              id="category"
              value={category}
              onChange={(e) => setCategory(e.target.value)}
              placeholder="Enter category"
            />
          </div>

<div className="space-y-2">
            <Label htmlFor="author">Author</Label>
            <Input
              id="author"
              value={author}
              onChange={(e) => setAuthor(e.target.value)}
              placeholder="Enter author name"
            />
          </div>

<div className="space-y-2">
            <Label htmlFor="date">Date</Label>
            <Input id="date" value={date} onChange={(e) => setDate(e.target.value)} placeholder="Enter date" />
          </div>

<div className="space-y-4">
            <Label>Gradient Color</Label>
            <div className="grid grid-cols-4 gap-2">
              {["blue", "purple", "cyan", "emerald"].map((color) => (
                <button
                  key={color}
                  onClick={() => setGradientColor(color)}
                  className={`h-8 rounded-md transition-all ${
                    gradientColor === color
                      ? "ring-2 ring-primary ring-offset-2 ring-offset-background"
                      : "opacity-70 hover:opacity-100"
                  }`}
                >
                  <div className={`h-full w-full rounded-md ${getColorSwatch(color)}`} />
                </button>
              ))}
            </div>
          </div>

<div className="space-y-2">
            <div className="flex items-center justify-between">
              <Label htmlFor="gradient-intensity">Gradient Intensity</Label>
              <span className="text-sm text-muted-foreground">{gradientIntensity}%</span>
            </div>
            <Slider
              id="gradient-intensity"
              min={0}
              max={100}
              step={5}
              value={[gradientIntensity]}
              onValueChange={(value) => setGradientIntensity(value[0])}
            />
          </div>

<div className="flex items-center space-x-2">
            <Switch id="show-image" checked={showImage} onCheckedChange={setShowImage} />
            <Label htmlFor="show-image">Show Image</Label>
          </div>
        </div>
      </div>
    </div>
  )
}

function getGradientClass(color: string, intensity: number) {
  const opacity = Math.round(intensity / 10) / 10

switch (color) {
    case "purple":
      return `from-purple-950 via-purple-900/80 to-black/90`
    case "cyan":
      return `from-cyan-950 via-cyan-900/80 to-black/90`
    case "emerald":
      return `from-emerald-950 via-emerald-900/80 to-black/90`
    case "blue":
    default:
      return `from-blue-950 via-blue-900/80 to-black/90`
  }
}

function getColorSwatch(color: string) {
  switch (color) {
    case "purple":
      return "bg-gradient-to-br from-purple-700 to-purple-900"
    case "cyan":
      return "bg-gradient-to-br from-cyan-700 to-cyan-900"
    case "emerald":
      return "bg-gradient-to-br from-emerald-700 to-emerald-900"
    case "blue":
    default:
      return "bg-gradient-to-br from-blue-700 to-blue-900"
  }
}
8a:["$","$L93",null,{"chatId":"Vg7N3lfDoUW","children":["$","$L94",null,{"data":{"@\"active-block\",\"Vg7N3lfDoUW\",":{"id":"b_1H873apmEzN","messageId":"Xaxc8CC2Ddy2IfYZ0pL4wKUP1jfnU387","source":"$95","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"og-card","type":"code-project","project":"og-card"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"Vg7N3lfDoUW\",":false,"":null},"children":"$L96"}]}]
</article></body></html>

About

Tags

Share

About

Tags

Share

More from code-wrangler

More Templates Like This