import React, { useState } from “react”;
const initialMicroApps = [
{
id: “1”,
author: “VibeBot”,
createdAt: new Date().toISOString(),
likes: 12,
liked: false,
saved: false,
shareSlug: “ocean-focus-mode”,
vibeCode: {
emoji: “🌊”,
title: “Ocean Focus Mode”,
message: “30 minutes of deep, distraction-free work. Phone on DND.”,
moodColor: “#2563eb”,
intensity: 0.8,
tag: “focus”
}
},
{
id: “2”,
author: “VibeBot”,
createdAt: new Date().toISOString(),
likes: 7,
liked: false,
saved: false,
shareSlug: “midnight-soft-reset”,
vibeCode: {
emoji: “🌙”,
title: “Midnight Soft Reset”,
message: “Short walk, stretch, and 10 minutes of journaling.”,
moodColor: “#4b5563”,
intensity: 0.5,
tag: “reset”
}
},
{
id: “3”,
author: “VibeBot”,
createdAt: new Date().toISOString(),
likes: 20,
liked: false,
saved: false,
shareSlug: “chaotic-good-energy”,
vibeCode: {
emoji: “⚡️”,
title: “Chaotic Good Energy”,
message: “Put on a hype playlist, ship something small, post it.”,
moodColor: “#f97316”,
intensity: 1,
tag: “energy”
}
}
];
const tabs = [
{ id: “feed”, label: “Feed” },
{ id: “saved”, label: “Saved” },
{ id: “mine”, label: “My Creations” }
];
function App() {
const [microApps, setMicroApps] = useState(initialMicroApps);
const [activeTab, setActiveTab] = useState(“feed”);
const [showCreator, setShowCreator] = useState(false);
const [filterText, setFilterText] = useState(“”);
const [newVibe, setNewVibe] = useState({
emoji: “✨”,
title: “”,
message: “”,
moodColor: “#6366f1”,
intensity: 0.7,
tag: “custom”
});
const myAuthorName = “You”; // in a real app this would be the logged in user
const handleToggleLike = (id) => {
setMicroApps((prev) =>
prev.map((m) => {
if (m.id !== id) return m;
const liked = !m.liked;
const likes = liked ? m.likes + 1 : m.likes – 1;
return { …m, liked, likes: Math.max(0, likes) };
})
);
};
const handleToggleSave = (id) => {
setMicroApps((prev) =>
prev.map((m) => (m.id === id ? { …m, saved: !m.saved } : m))
);
};
const handleShare = async (microApp) => {
const shareUrl = `${window.location.origin}/vibe/${microApp.shareSlug || microApp.id}`;
const shareText = `${microApp.vibeCode.title} – a micro vibe from ${microApp.author}`;
if (navigator.share) {
try {
await navigator.share({
title: microApp.vibeCode.title,
text: shareText,
url: shareUrl
});
} catch (err) {
console.log(“Share cancelled or failed”, err);
}
} else if (navigator.clipboard) {
try {
await navigator.clipboard.writeText(shareUrl);
alert(“Link copied to clipboard!”);
} catch (err) {
console.log(“Clipboard failed”, err);
}
} else {
alert(`Share this link:\n\n${shareUrl}`);
}
};
const handleNewVibeChange = (field, value) => {
setNewVibe((prev) => ({ …prev, [field]: value }));
};
const handleCreateMicroApp = (e) => {
e.preventDefault();
if (!newVibe.title.trim() || !newVibe.message.trim()) {
alert(“Title and message are required to set the vibe.”);
return;
}
const id = Date.now().toString();
const shareSlug = newVibe.title
.toLowerCase()
.replace(/[^\w]+/g, “-“)
.replace(/^-+|-+$/g, “”) || id;
const microApp = {
id,
author: myAuthorName,
createdAt: new Date().toISOString(),
likes: 0,
liked: false,
saved: true, // auto-save your own creation
shareSlug,
vibeCode: { …newVibe }
};
setMicroApps((prev) => [microApp, …prev]);
setShowCreator(false);
setNewVibe({
emoji: “✨”,
title: “”,
message: “”,
moodColor: “#6366f1”,
intensity: 0.7,
tag: “custom”
});
setActiveTab(“mine”);
};
const visibleMicroApps = microApps.filter((m) => {
if (activeTab === “saved” && !m.saved) return false;
if (activeTab === “mine” && m.author !== myAuthorName) return false;
if (!filterText.trim()) return true;
const q = filterText.toLowerCase();
const v = m.vibeCode;
return (
v.title.toLowerCase().includes(q) ||
v.message.toLowerCase().includes(q) ||
(v.tag && v.tag.toLowerCase().includes(q)) ||
m.author.toLowerCase().includes(q)
);
});
return (
))}
setFilterText(e.target.value)}
style={styles.searchInput}
/>
{visibleMicroApps.length === 0 ? (
) : (
visibleMicroApps.map((m) => (
))
)}
{showCreator && (
)}
);
}
function MicroAppCard({ microApp, onToggleLike, onToggleSave, onShare }) {
const { vibeCode } = microApp;
const borderColor = withAlpha(vibeCode.moodColor, 0.35);
const bgGradient = `linear-gradient(135deg, ${withAlpha(
vibeCode.moodColor,
0.12
)}, rgba(15,23,42,0.9))`;
return (
{vibeCode.title}
•
{vibeCode.tag}
intensity {Math.round(vibeCode.intensity * 100)}%
{vibeCode.message}
);
}
function Modal({ children, onClose }) {
return (
);
}
function VibeCreatorForm({ newVibe, onChange, onSubmit }) {
return (