import { useState, useEffect } from “react”;
import { Input } from “@/components/ui/input”;
import { Card, CardContent } from “@/components/ui/card”;
import { ScrollArea } from “@/components/ui/scroll-area”;
import { Tabs, TabsList, TabsTrigger } from “@/components/ui/tabs”;
import { Play, Image, FileText, Video, Wallet } from “lucide-react”;
import axios from “axios”;
const contentTypes = [
{ type: “text”, icon: , sources: [“Facebook”, “Twitter”, “LinkedIn”] },
{ type: “image”, icon: , sources: [“Instagram”, “X.com”] },
{ type: “audio”, icon: , sources: [“Spotify”, “SoundCloud”, “Apple Music”] },
{ type: “video”, icon: , sources: [“YouTube”, “Rumble”] },
{ type: “nft”, icon: , sources: [“SolSea”, “XRPcafe”] },
];
export default function ContentBrowser() {
const [search, setSearch] = useState(“”);
const [activeTab, setActiveTab] = useState(“text”);
const [results, setResults] = useState({});
useEffect(() => {
if (search) {
fetchResults();
}
}, [search, activeTab]);
const fetchResults = async () => {
const fetchedResults = {};
for (const content of contentTypes) {
fetchedResults[content.type] = [];
for (const source of content.sources) {
try {
const response = await axios.get(`/api/${source.toLowerCase()}?query=${search}`);
fetchedResults[content.type].push({ source, data: response.data });
} catch (error) {
console.error(`Error fetching from ${source}:`, error);
}
}
}
setResults(fetchedResults);
};
return (
{contentTypes.map((tab) => (
{tab.icon} {tab.type.charAt(0).toUpperCase() + tab.type.slice(1)}
))}
);
}
Content
setSearch(e.target.value)} className=”mb-4 w-full p-2 rounded-md border border-gray-600 bg-gray-800 text-white” />
{contentTypes.map((content) => (
{item.source}
))}
))}
{content.icon} {content.type.charAt(0).toUpperCase() + content.type.slice(1)}
{results[content.type]?.map((item) => ({JSON.stringify(item.data)}