import saasData from "~/data/saas-launch-platforms.json"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { Textarea } from "@/components/ui/textarea"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; import { Badge } from "@/components/ui/badge"; import { Plus, ExternalLink, X, Download, Edit } from "lucide-react"; export function SaasDatasetManager() { const { data, updateData } = useData(saasData); const [isAddingNew, setIsAddingNew] = React.useState(false); const [searchTerm, setSearchTerm] = React.useState(""); const [categoryFilter, setCategoryFilter] = React.useState("all"); const [difficultyFilter, setDifficultyFilter] = React.useState("all"); const [effectivenessFilter, setEffectivenessFilter] = React.useState("all"); const [expandedDescriptions, setExpandedDescriptions] = React.useState(new Set()); const [newPlatform, setNewPlatform] = React.useState({ name: "", url: "", description: "", category: "Community Platform", pricing: "Free", monthlyVisitors: "", audienceType: "", difficulty: "Easy", effectiveness: "Medium", requirements: "", tags: [] }); const platforms = data.platforms || []; const getCategoryColor = (category) => { const colors = { "Community Platform": 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200', "Social Media": 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200', "Tech Community": 'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200', "Professional Network": 'bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200', "Beta Platform": 'bg-teal-100 text-teal-800 dark:bg-teal-900 dark:text-teal-200', "Developer Community": 'bg-indigo-100 text-indigo-800 dark:bg-indigo-900 dark:text-indigo-200', }; return colors[category] || 'bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200'; }; const getEffectivenessColor = (effectiveness) => { const colors = { "Very High": 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200', "High": 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200', "Medium": 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200', "Low": 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200', }; return colors[effectiveness] || 'bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200'; }; const getDifficultyColor = (difficulty) => { const colors = { "Easy": 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200', "Medium": 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200', "Hard": 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200', }; return colors[difficulty] || 'bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200'; }; const filteredPlatforms = platforms.filter(platform => { const matchesSearch = platform.name.toLowerCase().includes(searchTerm.toLowerCase()) || platform.description.toLowerCase().includes(searchTerm.toLowerCase()) || platform.audienceType.toLowerCase().includes(searchTerm.toLowerCase()); const matchesCategory = categoryFilter === "all" || platform.category === categoryFilter; const matchesDifficulty = difficultyFilter === "all" || platform.difficulty === difficultyFilter; const matchesEffectiveness = effectivenessFilter === "all" || platform.effectiveness === effectivenessFilter; return matchesSearch && matchesCategory && matchesDifficulty && matchesEffectiveness; }); const uniqueCategories = [...new Set(platforms.map(p => p.category))]; const uniqueDifficulties = [...new Set(platforms.map(p => p.difficulty))]; const uniqueEffectiveness = [...new Set(platforms.map(p => p.effectiveness))]; const handleAddPlatform = () => { if (!newPlatform.name || !newPlatform.url || !newPlatform.description) return; const platform = { ...newPlatform, id: data.nextId || 1, tags: newPlatform.tags.length > 0 ? newPlatform.tags : ["new"], dateAdded: new Date().toISOString().split('T')[0] }; updateData({ ...data, platforms: [...platforms, platform], nextId: (data.nextId || 1) + 1, lastUpdated: new Date().toISOString().split('T')[0] }); setNewPlatform({ name: "", url: "", description: "", category: "Community Platform", pricing: "Free", monthlyVisitors: "", audienceType: "", difficulty: "Easy", effectiveness: "Medium", requirements: "", tags: [] }); setIsAddingNew(false); }; const toggleDescriptionExpansion = (index) => { const newExpanded = new Set(expandedDescriptions); if (newExpanded.has(index)) { newExpanded.delete(index); } else { newExpanded.add(index); } setExpandedDescriptions(newExpanded); }; const downloadCSV = () => { const headers = ['Name', 'URL', 'Category', 'Description', 'Pricing', 'Monthly Visitors', 'Audience Type', 'Difficulty', 'Effectiveness', 'Requirements', 'Tags']; const csvData = [ headers.join(','), ...filteredPlatforms.map(platform => [ `"${platform.name.replace(/"/g, '""')}"`, platform.url, platform.category, `"${platform.description.replace(/"/g, '""')}"`, platform.pricing, platform.monthlyVisitors, `"${platform.audienceType.replace(/"/g, '""')}"`, platform.difficulty, platform.effectiveness, `"${platform.requirements.replace(/"/g, '""')}"`, `"${platform.tags.join(', ')}"` ].join(',')) ].join('\n'); const blob = new Blob([csvData], { type: 'text/csv;charset=utf-8;' }); const link = document.createElement('a'); const url = URL.createObjectURL(blob); link.setAttribute('href', url); link.setAttribute('download', `saas-launch-platforms-${new Date().toISOString().split('T')[0]}.csv`); link.style.visibility = 'hidden'; document.body.appendChild(link); link.click(); document.body.removeChild(link); }; return (

SaaS Launch Platforms Dataset

Total platforms: {platforms.length} | Showing: {filteredPlatforms.length} | Last updated: {data.lastUpdated}

{isAddingNew && (

Add New Platform

setNewPlatform({...newPlatform, name: e.target.value})} /> setNewPlatform({...newPlatform, url: e.target.value})} /> setNewPlatform({...newPlatform, monthlyVisitors: e.target.value})} /> setNewPlatform({...newPlatform, audienceType: e.target.value})} />

setNewPlatform({...newPlatform, description: e.target.value})} />
          <Input placeholder="Requirements" value={newPlatform.requirements} onChange={(e) => setNewPlatform({...newPlatform, requirements: e.target.value})} />
          <div className="flex gap-2">
            <Button onClick={handleAddPlatform}>Add Platform</Button>
            <Button variant="outline" onClick={() => setIsAddingNew(false)}>Cancel</Button>
          </div>
        </div>
      )}

<div className="flex flex-col sm:flex-row gap-3">
        <Input
          placeholder="Search platforms, descriptions, audience..."
          value={searchTerm}
          onChange={(e) => setSearchTerm(e.target.value)}
          className="flex-1"
        />
        <div className="flex gap-2">
          <Select value={categoryFilter} onValueChange={setCategoryFilter}>
            <SelectTrigger className="w-40">
              <SelectValue placeholder="Category" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">All categories</SelectItem>
              {uniqueCategories.map(category => (
                <SelectItem key={category} value={category}>{category}</SelectItem>
              ))}
            </SelectContent>
          </Select>
          <Select value={difficultyFilter} onValueChange={setDifficultyFilter}>
            <SelectTrigger className="w-32">
              <SelectValue placeholder="Difficulty" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">All levels</SelectItem>
              {uniqueDifficulties.map(difficulty => (
                <SelectItem key={difficulty} value={difficulty}>{difficulty}</SelectItem>
              ))}
            </SelectContent>
          </Select>
          <Select value={effectivenessFilter} onValueChange={setEffectivenessFilter}>
            <SelectTrigger className="w-36">
              <SelectValue placeholder="Effectiveness" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">All levels</SelectItem>
              {uniqueEffectiveness.map(effectiveness => (
                <SelectItem key={effectiveness} value={effectiveness}>{effectiveness}</SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>
      </div>

<div className="border rounded-lg">
        {/* Desktop Header - Hidden on mobile */}
        <div className="hidden md:grid grid-cols-12 gap-4 p-3 border-b bg-muted/50 text-xs font-medium text-muted-foreground">
          <div className="col-span-3">Platform</div>
          <div className="col-span-3">Description</div>
          <div className="col-span-2">Audience</div>
          <div className="col-span-1">Visitors</div>
          <div className="col-span-1">Difficulty</div>
          <div className="col-span-1">Effect.</div>
          <div className="col-span-1">Link</div>
        </div>
        
        {/* Mobile Header - Visible only on mobile */}
        <div className="md:hidden grid grid-cols-4 gap-2 p-3 border-b bg-muted/50 text-xs font-medium text-muted-foreground">
          <div>Platform</div>
          <div>Visitors</div>
          <div>Difficulty</div>
          <div>Effect.</div>
        </div>
        
        {filteredPlatforms.map((platform, index) => {
          const isDescriptionExpanded = expandedDescriptions.has(index);
          const needsDescriptionTruncation = platform.description.length > 120;
          
          return (
            <div key={platform.id}>
              {/* Desktop Layout - Hidden on mobile */}
              <div className="hidden md:grid grid-cols-12 gap-4 p-3 border-b last:border-b-0 hover:bg-muted/30 text-sm">
                <div className="col-span-3">
                  <div className="font-medium mb-1">{platform.name}</div>
                  <div className="flex flex-wrap gap-1 mb-1">
                    <Badge className={`text-xs ${getCategoryColor(platform.category)}`}>
                      {platform.category}
                    </Badge>
                  </div>
                  <div className="text-xs text-muted-foreground">{platform.pricing}</div>
                </div>
                <div className="col-span-3 text-muted-foreground">
                  <div 
                    className={`${!isDescriptionExpanded && needsDescriptionTruncation ? 'line-clamp-3' : ''} ${needsDescriptionTruncation ? 'cursor-pointer hover:text-foreground' : ''}`}
                    onClick={needsDescriptionTruncation ? () => toggleDescriptionExpansion(index) : undefined}
                    title={needsDescriptionTruncation ? (isDescriptionExpanded ? 'Click to collapse' : 'Click to expand') : undefined}
                  >
                    {isDescriptionExpanded || !needsDescriptionTruncation 
                      ? platform.description 
                      : platform.description.substring(0, 120) + '...'
                    }
                  </div>
                  {platform.requirements && (
                    <div className="text-xs text-muted-foreground mt-1 italic">
                      Req: {platform.requirements}
                    </div>
                  )}
                </div>
                <div className="col-span-2 text-sm">
                  {platform.audienceType}
                </div>
                <div className="col-span-1 text-xs font-medium">
                  {platform.monthlyVisitors}
                </div>
                <div className="col-span-1">
                  <Badge className={`text-xs ${getDifficultyColor(platform.difficulty)}`}>
                    {platform.difficulty}
                  </Badge>
                </div>
                <div className="col-span-1">
                  <Badge className={`text-xs ${getEffectivenessColor(platform.effectiveness)}`}>
                    {platform.effectiveness}
                  </Badge>
                </div>
                <div className="col-span-1">
                  <a 
                    href={platform.url} 
                    target="_blank" 
                    rel="noopener noreferrer"
                    className="text-primary hover:text-primary/80 transition-colors"
                  >
                    <ExternalLink className="w-4 h-4" />
                  </a>
                </div>
              </div>

{/* Mobile Layout - Visible only on mobile */}
              <div className="md:hidden grid grid-cols-4 gap-2 p-3 border-b last:border-b-0 hover:bg-muted/30 text-sm">
                <div>
                  <div className="font-medium text-xs">{platform.name}</div>
                  <div className="flex flex-wrap gap-1 mt-1">
                    <Badge className={`text-xs ${getCategoryColor(platform.category)}`}>
                      {platform.category}
                    </Badge>
                  </div>
                </div>
                <div className="text-xs font-medium">
                  {platform.monthlyVisitors}
                </div>
                <div>
                  <Badge className={`text-xs ${getDifficultyColor(platform.difficulty)}`}>
                    {platform.difficulty}
                  </Badge>
                </div>
                <div>
                  <Badge className={`text-xs ${getEffectivenessColor(platform.effectiveness)}`}>
                    {platform.effectiveness}
                  </Badge>
                </div>
              </div>
            </div>
          );
        })}
      </div>

<div className="text-sm text-muted-foreground">
        Showing {filteredPlatforms.length} of {platforms.length} platforms
      </div>
    </div>
  );
}