8e:I[903690,["/chat-static/_next/static/chunks/435czfth5g2--.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/2_n93kjda_fdl.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/0sex0gcwdsmjy.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/30o49bxvrjjd6.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/2lvmzw_lbp-jf.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/2gyzl_dalq47j.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/1sq2o-tfpylmv.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/42mjea_hxrwdp.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/2o82vp45o81e5.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/1j5k8gvtw8gdc.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/3zzkx917psnab.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/0it1pzxkmrfao.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/0a4mwgsvj_bqu.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/3atxap5dfgc15.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/0h9h3jzy0z9y4.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/3-pn4n4eze_76.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/05vo5x924wz4s.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/1ggzqs8-kdl22.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/2-ecu9qsl6kfh.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/2gph80-et4xlm.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/29nl-qtda_xxs.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/1ovy71-w2povn.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/217iosoo3xo9p.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/332d35_pah0kr.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/34gqg8-10x0ii.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/1e0kro_qu46oe.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/3-9165k65ag24.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/37rh4z4c9595s.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/1477qb8awntub.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/2nl7z8xw_3un6.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/1idcvvlvpraly.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/3uqcu8e1bha9q.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/1j9njtdk43kba.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/0xl0120nvocrt.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/1-appp6o5mjft.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/326ugcf3n9jpc.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/0wq4l2acmg8jm.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/2tb4isnwy1ped.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/1x-_zdr_qor_a.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/02buq-_-_ooco.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/2-zrgd218l_od.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/3wbcbeex0k_cg.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/2tdl36x_a1l97.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt"],"ExplicitChatIdProvider"] 8f:I[838238,["/chat-static/_next/static/chunks/435czfth5g2--.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/2_n93kjda_fdl.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/0sex0gcwdsmjy.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/30o49bxvrjjd6.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/2lvmzw_lbp-jf.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/2gyzl_dalq47j.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/1sq2o-tfpylmv.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/42mjea_hxrwdp.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/2o82vp45o81e5.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/1j5k8gvtw8gdc.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/3zzkx917psnab.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/0it1pzxkmrfao.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/0a4mwgsvj_bqu.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/3atxap5dfgc15.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/0h9h3jzy0z9y4.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/3-pn4n4eze_76.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/05vo5x924wz4s.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/1ggzqs8-kdl22.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/2-ecu9qsl6kfh.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/2gph80-et4xlm.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/29nl-qtda_xxs.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/1ovy71-w2povn.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/217iosoo3xo9p.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/332d35_pah0kr.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/34gqg8-10x0ii.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/1e0kro_qu46oe.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/3-9165k65ag24.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/37rh4z4c9595s.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/1477qb8awntub.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/2nl7z8xw_3un6.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/1idcvvlvpraly.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/3uqcu8e1bha9q.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/1j9njtdk43kba.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/0xl0120nvocrt.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/1-appp6o5mjft.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/326ugcf3n9jpc.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/0wq4l2acmg8jm.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/2tb4isnwy1ped.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/1x-_zdr_qor_a.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/02buq-_-_ooco.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/2-zrgd218l_od.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/3wbcbeex0k_cg.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt","/chat-static/_next/static/chunks/2tdl36x_a1l97.js?dpl=dpl_EfX3PBq1pSVLwsUSQBodg2gWhmDt"],"SWRDataProvider"] 90: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"
  }
}
85:["$","$L8e",null,{"chatId":"Vg7N3lfDoUW","children":["$","$L8f",null,{"data":{"@\"active-block\",\"Vg7N3lfDoUW\",":{"id":"b_1H873apmEzN","messageId":"Xaxc8CC2Ddy2IfYZ0pL4wKUP1jfnU387","source":"$90","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":"$L91"}]}]
</article></body></html>

About

Tags

Share

About

Tags

Share

More from code-wrangler

More Templates Like This