e1:"ExplicitChatIdProvider" e2:I[903690,["$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$64","$65","$66","$67","$68"],"$e1"] e3:I[838238,["$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$64","$65","$66","$67","$68"],"SWRDataProvider"] e4: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"
  }
}
db:["$","$Le2",null,{"chatId":"Vg7N3lfDoUW","children":["$","$Le3",null,{"data":{"@\"active-block\",\"Vg7N3lfDoUW\",":{"id":"b_1H873apmEzN","messageId":"Xaxc8CC2Ddy2IfYZ0pL4wKUP1jfnU387","source":"$e4","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},"children":"$Le5"}]}]
</article></body></html>

About

Tags

Share

About

Tags

Share

More from codewithveek

More Templates Like This

More from codewithveek

More Templates Like This