Social-to-Code Converter

Here is the production-ready React component styled with Tailwind CSS, including interactive state for engagement actions and dark-mode slate accents.

Interactive React Component (XPostCard.jsx)

import React, { useState } from 'react';
import { Heart, Repeat2, Bookmark, Share, CheckCircle2, MessageCircle } from 'lucide-react';

export default function XPostCard() {
  const [liked, setLiked] = useState(false);
  const [likeCount, setLikeCount] = useState(142);
  const [bookmarked, setBookmarked] = useState(false);

  const handleLike = () => {
    setLiked(!liked);
    setLikeCount(liked ? likeCount - 1 : likeCount + 1);
  };

  return (
    <div className="max-w-xl mx-auto my-6 bg-slate-900 text-slate-100 border border-slate-800 rounded-2xl p-4 shadow-xl transition-all">
      {/* Header Section */}
      <div className="flex items-center justify-between mb-3">
        <div className="flex items-center gap-3">
          <div className="w-10 h-10 rounded-full bg-gradient-to-tr from-indigo-500 to-purple-500 flex items-center justify-center font-bold text-white text-sm">
            AZ
          </div>
          <div>
            <div className="flex items-center gap-1.5">
              <span className="font-semibold text-white hover:underline cursor-pointer">AlphaZolo</span>
              <CheckCircle2 className="w-4 h-4 text-sky-400 fill-sky-400/20"/>
            </div>
            <span className="text-xs text-slate-400">@alphazolo_dev · 2h</span>
          </div>
        </div>
        <button className="text-slate-400 hover:text-white transition-colors">
          <span className="sr-only">More options</span>
          •••
        </button>
      </div>

      {/* Tweet Content */}
      <p className="text-sm text-slate-200 leading-relaxed mb-3">
        Just dropped the new <span className="text-sky-400 font-medium">#SocialToCode</span> pipeline for Agensi. Turn any UI context or social post directly into structured Tailwind CSS components instantly. 🚀
      </p>

      {/* Embedded Code Snippet Card */}
      <div className="my-3 rounded-xl border border-slate-800 bg-slate-950/80 p-3.5 font-mono text-xs overflow-x-auto">
        <div className="flex items-center justify-between pb-2 mb-2 border-b border-slate-800/60 text-slate-500">
          <span>Terminal</span>
          <span>bash</span>
        </div>
        <p className="text-emerald-400">$ agensi run social-to-code --target=react</p>
        <p className="text-slate-400 mt-1">✔ Component compiled in 120ms</p>
      </div>

      {/* Action Metrics Bar */}
      <div className="flex items-center justify-between pt-2 text-slate-400 text-xs border-t border-slate-800/50 mt-4">
        <button className="flex items-center gap-2 hover:text-sky-400 transition-colors group">
          <div className="p-1.5 rounded-full group-hover:bg-sky-500/10">
            <MessageCircle className="w-4 h-4"/>
          </div>
          <span>28</span>
        </button>

        <button className="flex items-center gap-2 hover:text-emerald-400 transition-colors group">
          <div className="p-1.5 rounded-full group-hover:bg-emerald-500/10">
            <Repeat2 className="w-4 h-4"/>
          </div>
          <span>45</span>
        </button>

        <button 
          onClick={handleLike}
          className={`flex items-center gap-2 transition-colors group ${liked ? 'text-rose-500' : 'hover:text-rose-500'}`}
        >
          <div className="p-1.5 rounded-full group-hover:bg-rose-500/10">
            <Heart ${liked ''}`} 'fill-rose-500' : ? className="{`w-4" h-4/>
          </div>
          <span>{likeCount}</span>
        </button>

        <button 
          onClick={() => setBookmarked(!bookmarked)}
          className={`flex items-center gap-2 transition-colors group ${bookmarked ? 'text-amber-400' : 'hover:text-amber-400'}`}
        >
          <div className="p-1.5 rounded-full group-hover:bg-amber-500/10">
            <Bookmark ${bookmarked ''}`} 'fill-amber-400' : ? className="{`w-4" h-4/>
          </div>
        </button>

        <button className="flex items-center gap-2 hover:text-sky-400 transition-colors group">
          <div className="p-1.5 rounded-full group-hover:bg-sky-500/10">
            <Share className="w-4 h-4"/>
          </div>
        </button>
      </div>
    </div>
  );
}

Next Steps & Deployment

1. Ensure lucide-react is installed in your project (npm i lucide-react).
2. Copy the code block above directly into components/XPostCard.jsx.
3. Import and render within your application.