@moontra/moonui-pro 2.20.2 → 2.20.3

package/src/components/github-stars/variants.tsx

@@ -1,515 +0,0 @@
-"use client"
-
-import React from "react"
-import { motion } from "framer-motion"
-import { Card, CardContent, CardHeader, CardTitle } from "../ui/card"
-import { Badge } from "../ui/badge"
-import { Button } from "../ui/button"
-import { Progress } from "../ui/progress"
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs"
-import {
-  Star,
-  GitFork,
-  Eye,
-  Users,
-  ExternalLink,
-  Github,
-  TrendingUp,
-  BarChart3,
-  Activity,
-  Code2,
-  Calendar,
-  Package,
-  Download,
-} from "lucide-react"
-import { GitHubRepository, GitHubStats, LanguageStats } from "./types"
-import { formatNumber, formatDate, LANGUAGE_COLORS } from "./github-api"
-import { cn } from "../../lib/utils"
-
-interface BaseVariantProps {
-  repos: GitHubRepository[]
-  stats: GitHubStats | null
-  loading?: boolean
-  className?: string
-  onRepositoryClick?: (repo: GitHubRepository) => void
-}
-
-// Minimal variant - Single line with key stats
-export const MinimalVariant: React.FC<BaseVariantProps> = ({ repos, stats, className }) => {
-  if (!stats) return null
-
-  return (
-    <div className={cn("flex items-center gap-4 text-sm", className)}>
-      <button
-        className="flex items-center gap-2 hover:text-primary transition-colors"
-        onClick={() => repos[0] && window.open(`https://github.com/${repos[0].owner?.login}`, '_blank')}
-      >
-        <Github className="h-4 w-4" />
-        <span className="font-medium">{repos.length} repositories</span>
-      </button>
-      <button
-        className="flex items-center gap-2 hover:text-yellow-600 transition-colors"
-        onClick={() => repos[0] && window.open(`https://github.com/${repos[0].owner?.login}?tab=repositories&q=&type=&language=&sort=stargazers`, '_blank')}
-      >
-        <Star className="h-4 w-4 text-yellow-500" />
-        <span>{formatNumber(stats.totalStars)} stars</span>
-      </button>
-      <button
-        className="flex items-center gap-2 hover:text-blue-600 transition-colors"
-        onClick={() => repos[0] && window.open(`https://github.com/${repos[0].owner?.login}?tab=repositories&q=&type=fork&language=&sort=`, '_blank')}
-      >
-        <GitFork className="h-4 w-4 text-blue-500" />
-        <span>{formatNumber(stats.totalForks)} forks</span>
-      </button>
-    </div>
-  )
-}
-
-// Compact variant - Small card with essential info
-export const CompactVariant: React.FC<BaseVariantProps> = ({
-  repos,
-  stats,
-  className,
-  onRepositoryClick,
-}) => {
-  if (!stats) return null
-
-  const topRepos = repos.slice(0, 3)
-
-  return (
-    <Card className={cn("w-full max-w-sm", className)}>
-      <CardContent className="p-4">
-        <div className="space-y-4">
-          <div className="flex items-center justify-between">
-            <div className="flex items-center gap-2">
-              <Github className="h-5 w-5" />
-              <span className="font-semibold">{repos.length} Repos</span>
-            </div>
-            <div className="flex items-center gap-3 text-sm">
-              <button
-                className="flex items-center gap-1 hover:text-yellow-600 transition-colors cursor-pointer"
-                onClick={() => window.open(`https://github.com/${repos[0]?.owner?.login}/${repos[0]?.name}/stargazers`, '_blank')}
-              >
-                <Star className="h-4 w-4 text-yellow-500" />
-                <span>{formatNumber(stats.totalStars)}</span>
-              </button>
-              <button
-                className="flex items-center gap-1 hover:text-blue-600 transition-colors cursor-pointer"
-                onClick={() => window.open(`https://github.com/${repos[0]?.owner?.login}/${repos[0]?.name}/forks`, '_blank')}
-              >
-                <GitFork className="h-4 w-4 text-blue-500" />
-                <span>{formatNumber(stats.totalForks)}</span>
-              </button>
-            </div>
-          </div>
-
-          <div className="space-y-2">
-            {topRepos.map((repo) => (
-              <div
-                key={repo.id}
-                className="flex items-center justify-between p-2 rounded-md hover:bg-accent cursor-pointer transition-colors"
-                onClick={() => window.open(`https://github.com/${repo.owner?.login}/${repo.name}`, '_blank')}
-              >
-                <div className="flex-1 min-w-0">
-                  <p className="text-sm font-medium truncate">{repo.name}</p>
-                  <div className="flex items-center gap-2 text-xs text-muted-foreground">
-                    {repo.language && (
-                      <div className="flex items-center gap-1">
-                        <div
-                          className="w-2 h-2 rounded-full"
-                          style={{ backgroundColor: LANGUAGE_COLORS[repo.language] || "#6b7280" }}
-                        />
-                        <span>{repo.language}</span>
-                      </div>
-                    )}
-                    <div className="flex items-center gap-1">
-                      <Star className="h-3 w-3" />
-                      <span>{formatNumber(repo.stargazers_count)}</span>
-                    </div>
-                  </div>
-                </div>
-                <ExternalLink className="h-3 w-3 text-muted-foreground" />
-              </div>
-            ))}
-          </div>
-        </div>
-      </CardContent>
-    </Card>
-  )
-}
-
-// Card variant - Medium-sized cards in a grid
-export const CardVariant: React.FC<BaseVariantProps> = ({
-  repos,
-  className,
-  onRepositoryClick,
-}) => {
-  return (
-    <div className={cn("grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4", className)}>
-      {repos.map((repo, index) => (
-        <motion.div
-          key={repo.id}
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ delay: index * 0.05 }}
-        >
-          <Card
-            className="h-full hover:shadow-lg transition-shadow cursor-pointer group"
-            onClick={() => window.open(`https://github.com/${repo.owner?.login}/${repo.name}`, '_blank')}
-          >
-            <CardContent className="p-6">
-              <div className="space-y-4">
-                <div className="flex items-start justify-between">
-                  <div className="flex-1">
-                    <h3 className="font-semibold text-lg mb-1">{repo.name}</h3>
-                    <p className="text-sm text-muted-foreground line-clamp-2">
-                      {repo.description || "No description available"}
-                    </p>
-                  </div>
-                  <ExternalLink className="h-4 w-4 text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity" />
-                </div>
-
-                {repo.topics.length > 0 && (
-                  <div className="flex flex-wrap gap-1">
-                    {repo.topics.slice(0, 3).map((topic) => (
-                      <Badge key={topic} variant="secondary" className="text-xs">
-                        {topic}
-                      </Badge>
-                    ))}
-                  </div>
-                )}
-
-                <div className="flex items-center justify-between text-sm">
-                  <div className="flex items-center gap-3">
-                    {repo.language && (
-                      <div className="flex items-center gap-1">
-                        <div
-                          className="w-3 h-3 rounded-full"
-                          style={{ backgroundColor: LANGUAGE_COLORS[repo.language] || "#6b7280" }}
-                        />
-                        <span>{repo.language}</span>
-                      </div>
-                    )}
-                  </div>
-                  <div className="flex items-center gap-3">
-                    <button
-                      className="flex items-center gap-1 hover:text-yellow-600 transition-colors"
-                      onClick={(e) => {
-                        e.stopPropagation()
-                        window.open(`https://github.com/${repo.owner?.login}/${repo.name}/stargazers`, '_blank')
-                      }}
-                    >
-                      <Star className="h-4 w-4 text-yellow-500" />
-                      <span>{formatNumber(repo.stargazers_count)}</span>
-                    </button>
-                    <button
-                      className="flex items-center gap-1 hover:text-blue-600 transition-colors"
-                      onClick={(e) => {
-                        e.stopPropagation()
-                        window.open(`https://github.com/${repo.owner?.login}/${repo.name}/forks`, '_blank')
-                      }}
-                    >
-                      <GitFork className="h-4 w-4 text-blue-500" />
-                      <span>{formatNumber(repo.forks_count)}</span>
-                    </button>
-                  </div>
-                </div>
-              </div>
-            </CardContent>
-          </Card>
-        </motion.div>
-      ))}
-    </div>
-  )
-}
-
-// Detailed variant - Full information with tabs
-export const DetailedVariant: React.FC<BaseVariantProps & { onExport?: () => void }> = ({
-  repos,
-  stats,
-  className,
-  onRepositoryClick,
-  onExport,
-}) => {
-  if (!stats) return null
-
-  return (
-    <Card className={cn("w-full", className)}>
-      <CardHeader className="pb-4">
-        <div className="flex items-center justify-between">
-          <CardTitle className="flex items-center gap-2">
-            <Github className="h-6 w-6" />
-            GitHub Repository Analytics
-          </CardTitle>
-          <div className="flex items-center gap-2">
-            {repos[0] && (
-              <Button 
-                onClick={() => window.open(`https://github.com/${repos[0].owner?.login}`, '_blank')}
-                variant="outline" 
-                size="sm"
-              >
-                <Github className="h-4 w-4 mr-2" />
-                View Profile
-              </Button>
-            )}
-            {onExport && (
-              <Button onClick={onExport} variant="outline" size="sm">
-                <Download className="h-4 w-4 mr-2" />
-                Export
-              </Button>
-            )}
-          </div>
-        </div>
-      </CardHeader>
-      <CardContent className="pt-0">
-        <Tabs defaultValue="overview" className="w-full mt-4">
-          <TabsList className="grid w-full grid-cols-4 mb-6">
-            <TabsTrigger value="overview">Overview</TabsTrigger>
-            <TabsTrigger value="repositories">Repositories</TabsTrigger>
-            <TabsTrigger value="languages">Languages</TabsTrigger>
-            <TabsTrigger value="activity">Activity</TabsTrigger>
-          </TabsList>
-
-          <TabsContent value="overview" className="space-y-6 mt-6">
-            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
-              <StatCard
-                icon={<Package className="h-4 w-4" />}
-                label="Total Repos"
-                value={repos.length}
-              />
-              <StatCard
-                icon={<Star className="h-4 w-4 text-yellow-500" />}
-                label="Total Stars"
-                value={formatNumber(stats.totalStars)}
-                onClick={() => repos[0] && window.open(`https://github.com/${repos[0].owner?.login}?tab=repositories&q=&type=&language=&sort=stargazers`, '_blank')}
-              />
-              <StatCard
-                icon={<GitFork className="h-4 w-4 text-blue-500" />}
-                label="Total Forks"
-                value={formatNumber(stats.totalForks)}
-              />
-              <StatCard
-                icon={<Eye className="h-4 w-4 text-green-500" />}
-                label="Total Watchers"
-                value={formatNumber(stats.totalWatchers)}
-              />
-            </div>
-
-            {stats.mostStarredRepo && (
-              <Card 
-                className="hover:shadow-md transition-shadow cursor-pointer"
-                onClick={() => stats.mostStarredRepo && window.open(`https://github.com/${stats.mostStarredRepo.owner?.login}/${stats.mostStarredRepo.name}`, '_blank')}
-              >
-                <CardContent className="p-6">
-                  <div className="flex items-center justify-between">
-                    <div>
-                      <p className="text-sm text-muted-foreground mb-2">Most Starred Repository</p>
-                      <h4 className="font-semibold text-lg mb-1">{stats.mostStarredRepo.name}</h4>
-                      <p className="text-sm text-muted-foreground">
-                        {formatNumber(stats.mostStarredRepo.stargazers_count)} stars
-                      </p>
-                    </div>
-                    <div className="flex flex-col items-center gap-2">
-                      <TrendingUp className="h-8 w-8 text-muted-foreground" />
-                      <ExternalLink className="h-4 w-4 text-muted-foreground" />
-                    </div>
-                  </div>
-                </CardContent>
-              </Card>
-            )}
-          </TabsContent>
-
-          <TabsContent value="repositories" className="space-y-4 mt-6">
-            <div className="space-y-3">
-              {repos.map((repo) => (
-                <Card
-                  key={repo.id}
-                  className="hover:shadow-md transition-shadow cursor-pointer group"
-                  onClick={() => window.open(`https://github.com/${repo.owner?.login}/${repo.name}`, '_blank')}
-                >
-                  <CardContent className="p-5">
-                    <div className="flex items-start justify-between">
-                      <div className="flex-1">
-                        <div className="flex items-center gap-2 mb-2">
-                          <h4 className="font-semibold text-base">{repo.name}</h4>
-                          {repo.private && (
-                            <Badge variant="secondary" className="text-xs">Private</Badge>
-                          )}
-                        </div>
-                        <p className="text-sm text-muted-foreground mb-3">
-                          {repo.description || "No description"}
-                        </p>
-                        <div className="flex items-center gap-4 text-sm">
-                          {repo.language && (
-                            <div className="flex items-center gap-1">
-                              <div
-                                className="w-3 h-3 rounded-full"
-                                style={{
-                                  backgroundColor: LANGUAGE_COLORS[repo.language] || "#6b7280",
-                                }}
-                              />
-                              <span>{repo.language}</span>
-                            </div>
-                          )}
-                          <button
-                            className="flex items-center gap-1 hover:text-yellow-600 transition-colors"
-                            onClick={(e) => {
-                              e.stopPropagation()
-                              window.open(`https://github.com/${repo.owner?.login}/${repo.name}/stargazers`, '_blank')
-                            }}
-                          >
-                            <Star className="h-3 w-3" />
-                            <span>{formatNumber(repo.stargazers_count)}</span>
-                          </button>
-                          <button
-                            className="flex items-center gap-1 hover:text-blue-600 transition-colors"
-                            onClick={(e) => {
-                              e.stopPropagation()
-                              window.open(`https://github.com/${repo.owner?.login}/${repo.name}/forks`, '_blank')
-                            }}
-                          >
-                            <GitFork className="h-3 w-3" />
-                            <span>{formatNumber(repo.forks_count)}</span>
-                          </button>
-                          <button
-                            className="flex items-center gap-1 hover:text-purple-600 transition-colors"
-                            onClick={(e) => {
-                              e.stopPropagation()
-                              window.open(`https://github.com/${repo.owner?.login}/${repo.name}/issues`, '_blank')
-                            }}
-                          >
-                            <Users className="h-3 w-3" />
-                            <span>{repo.open_issues_count} issues</span>
-                          </button>
-                          <div className="flex items-center gap-1">
-                            <Calendar className="h-3 w-3" />
-                            <span>{formatDate(repo.updated_at)}</span>
-                          </div>
-                        </div>
-                      </div>
-                      <div className="flex items-center gap-2">
-                        <Button
-                          size="sm"
-                          variant="ghost"
-                          className="opacity-0 group-hover:opacity-100 transition-opacity"
-                          onClick={(e) => {
-                            e.stopPropagation()
-                            window.open(`https://github.com/${repo.owner?.login}/${repo.name}`, '_blank')
-                          }}
-                        >
-                          <ExternalLink className="h-4 w-4" />
-                        </Button>
-                      </div>
-                    </div>
-                  </CardContent>
-                </Card>
-              ))}
-            </div>
-          </TabsContent>
-
-          <TabsContent value="languages" className="space-y-6 mt-6">
-            <div className="space-y-4">
-              {stats.languages.map((lang) => (
-                <div key={lang.language} className="space-y-2">
-                  <div className="flex items-center justify-between text-sm">
-                    <div className="flex items-center gap-2">
-                      <div
-                        className="w-3 h-3 rounded-full shadow-sm"
-                        style={{ backgroundColor: lang.color }}
-                      />
-                      <span className="font-medium">{lang.language}</span>
-                    </div>
-                    <span className="text-muted-foreground">
-                      {lang.count} repos ({lang.percentage.toFixed(1)}%)
-                    </span>
-                  </div>
-                  <div className="px-1">
-                    <Progress value={lang.percentage} className="h-2" />
-                  </div>
-                </div>
-              ))}
-            </div>
-            
-            {repos[0] && (
-              <div className="pt-4 border-t">
-                <Button
-                  variant="outline"
-                  className="w-full"
-                  onClick={() => window.open(`https://github.com/${repos[0].owner?.login}?tab=repositories&q=&type=&language=&sort=`, '_blank')}
-                >
-                  <BarChart3 className="h-4 w-4 mr-2" />
-                  View Language Statistics on GitHub
-                </Button>
-              </div>
-            )}
-          </TabsContent>
-
-          <TabsContent value="activity" className="space-y-4 mt-6">
-            <div className="space-y-3">
-              {stats.recentActivity.map((activity, index) => {
-                const repo = repos.find(r => r.name === activity.repository)
-                return (
-                  <div 
-                    key={index} 
-                    className="flex items-center gap-4 p-4 rounded-lg bg-accent/30 hover:bg-accent/50 transition-colors cursor-pointer"
-                    onClick={() => repo && window.open(`https://github.com/${repo.owner?.login}/${repo.name}`, '_blank')}
-                  >
-                    <Activity className="h-4 w-4 text-muted-foreground flex-shrink-0" />
-                    <div className="flex-1 min-w-0">
-                      <p className="text-sm font-medium">{activity.description}</p>
-                      <p className="text-xs text-muted-foreground mt-1">
-                        {activity.repository} • {formatDate(activity.timestamp)}
-                      </p>
-                    </div>
-                    <ExternalLink className="h-3 w-3 text-muted-foreground flex-shrink-0" />
-                  </div>
-                )
-              })}
-            </div>
-            
-            {repos[0] && (
-              <div className="pt-4 border-t">
-                <Button
-                  variant="outline"
-                  className="w-full"
-                  onClick={() => window.open(`https://github.com/${repos[0].owner?.login}?tab=repositories&q=&type=&language=&sort=updated`, '_blank')}
-                >
-                  <Activity className="h-4 w-4 mr-2" />
-                  View All Activity on GitHub
-                </Button>
-              </div>
-            )}
-          </TabsContent>
-        </Tabs>
-      </CardContent>
-    </Card>
-  )
-}
-
-// Helper component for stat cards
-const StatCard: React.FC<{
-  icon: React.ReactNode
-  label: string
-  value: string | number
-  onClick?: () => void
-}> = ({ icon, label, value, onClick }) => (
-  <Card 
-    className={cn(
-      "transition-all",
-      onClick && "hover:shadow-md cursor-pointer hover:scale-105"
-    )}
-    onClick={onClick}
-  >
-    <CardContent className="p-5">
-      <div className="flex items-center justify-between">
-        <div>
-          <p className="text-sm text-muted-foreground mb-1">{label}</p>
-          <p className="text-2xl font-bold">{value}</p>
-        </div>
-        <div className="text-muted-foreground">
-          {icon}
-        </div>
-      </div>
-    </CardContent>
-  </Card>
-)