@armoyu/ui 1.0.0 → 1.0.2

package/src/components/Button.tsx

@@ -1,41 +0,0 @@
-import * as React from "react"
-
-export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?: 'primary' | 'secondary' | 'danger' | 'ghost';
-  isLoading?: boolean;
-}
-
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className = '', variant = 'primary', isLoading, children, ...props }, ref) => {
-    
-    // Core aesthetic premium styling (Glassmorphism & Modern UI)
-    const baseStyles = "inline-flex items-center justify-center rounded-lg text-sm font-medium transition-all duration-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 disabled:pointer-events-none disabled:opacity-50 h-10 px-4 py-2 cursor-pointer";
-    
-    const variants = {
-      primary: "bg-blue-600 text-white hover:bg-blue-700 hover:shadow-[0_0_15px_rgba(37,99,235,0.5)] border border-transparent",
-      secondary: "bg-white/5 text-white hover:bg-white/10 backdrop-blur-md border border-white/10 hover:border-white/20 shadow-[0_4px_30px_rgba(0,0,0,0.1)]",
-      danger: "bg-red-500/80 text-white hover:bg-red-600 border border-red-500/50 hover:shadow-[0_0_15px_rgba(239,68,68,0.5)]",
-      ghost: "hover:bg-white/10 hover:text-white text-gray-300"
-    };
-
-    return (
-      <button
-        ref={ref}
-        className={`${baseStyles} ${variants[variant]} ${className}`}
-        disabled={isLoading || props.disabled}
-        {...props}
-      >
-        {isLoading ? (
-            <span className="mr-2 relative flex h-4 w-4">
-              <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-white opacity-75"></span>
-              <span className="relative inline-flex rounded-full h-4 w-4 bg-white/50 border-2 border-white border-t-transparent animate-spin"></span>
-            </span>
-        ) : null}
-        {children}
-      </button>
-    )
-  }
-)
-Button.displayName = "Button"
-
-export { Button }

package/src/components/GenderStatsBar.tsx

@@ -1,66 +0,0 @@
-import React from 'react';
-
-export interface GenderStatsBarProps {
-  maleCount: number;
-  femaleCount: number;
-}
-
-export function GenderStatsBar({ maleCount = 50, femaleCount = 50 }: GenderStatsBarProps) {
-  const total = maleCount + femaleCount;
-  const malePercentage = total > 0 ? Math.round((maleCount / total) * 100) : 0;
-  const femalePercentage = total > 0 ? 100 - malePercentage : 0;
-
-  return (
-    <div className="w-full space-y-3">
-      {/* Etiketler ve İkonlar */}
-      <div className="flex justify-between items-end px-1">
-        
-        {/* Erkek */}
-        <div className="flex items-center gap-2 text-blue-400">
-          <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" className="drop-shadow-[0_0_8px_rgba(59,130,246,0.6)]">
-            <circle cx="10" cy="14" r="5" />
-            <line x1="13.5" y1="10.5" x2="19" y2="5" />
-            <polyline points="14 5 19 5 19 10" />
-          </svg>
-          <span className="font-extrabold text-xl tracking-tight">{malePercentage}%</span>
-          <span className="text-gray-400 text-sm hidden sm:inline border-l border-white/10 pl-2 ml-1">
-            Erkek Üyeler ({maleCount.toLocaleString('tr-TR')})
-          </span>
-        </div>
-
-        {/* Kadın */}
-        <div className="flex items-center gap-2 text-pink-400">
-          <span className="text-gray-400 text-sm hidden sm:inline border-r border-white/10 pr-2 mr-1 text-right">
-            Kadın Üyeler ({femaleCount.toLocaleString('tr-TR')})
-          </span>
-          <span className="font-extrabold text-xl tracking-tight">{femalePercentage}%</span>
-          <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" className="drop-shadow-[0_0_8px_rgba(236,72,153,0.6)]">
-            <circle cx="12" cy="10" r="5" />
-            <line x1="12" y1="15" x2="12" y2="22" />
-            <line x1="9" y1="19" x2="15" y2="19" />
-          </svg>
-        </div>
-
-      </div>
-
-      {/* Progress Bar Container */}
-      <div className="w-full h-5 rounded-full bg-white/5 border border-white/10 flex overflow-hidden shadow-inner p-0.5 relative">
-        <div className="absolute inset-0 bg-gradient-to-r from-blue-500/20 to-pink-500/20 blur-xl"></div>
-        
-        {/* Erkek Bar */}
-        <div 
-          className="h-full bg-gradient-to-r from-blue-600 to-blue-400 shadow-[0_0_15px_rgba(59,130,246,0.8)] transition-all duration-[1500ms] cubic-bezier(0.4, 0, 0.2, 1) rounded-full z-10" 
-          style={{ width: `${malePercentage}%` }}
-          title={`Erkek: ${malePercentage}%`}
-        />
-        
-        {/* Kadın Bar */}
-        <div 
-          className="h-full bg-gradient-to-r from-pink-400 to-pink-600 shadow-[0_0_15px_rgba(236,72,153,0.8)] transition-all duration-[1500ms] cubic-bezier(0.4, 0, 0.2, 1) rounded-full ml-1 z-10" 
-          style={{ width: `calc(${femalePercentage}% - 4px)` }}
-          title={`Kadın: ${femalePercentage}%`}
-        />
-      </div>
-    </div>
-  );
-}

package/src/components/RollingNumber.tsx

@@ -1,50 +0,0 @@
-'use client';
-
-import React, { useEffect, useState } from 'react';
-
-interface RollingNumberProps {
-  value: number | string;
-  className?: string;
-}
-
-export function RollingNumber({ value, className = "" }: RollingNumberProps) {
-  const [digits, setDigits] = useState<string[]>([]);
-
-  useEffect(() => {
-    setDigits(value.toString().split(''));
-  }, [value]);
-
-  return (
-    <div className={`flex items-center overflow-hidden h-[1.2em] leading-[1.2em] ${className}`}>
-      {digits.map((digit, idx) => (
-        <Digit key={`${idx}-${digit}`} char={digit} />
-      ))}
-    </div>
-  );
-}
-
-function Digit({ char }: { char: string }) {
-  const isNumber = !isNaN(parseInt(char));
-  const [offset, setOffset] = useState(0);
-
-  useEffect(() => {
-    if (isNumber) {
-      setOffset(parseInt(char) * 100);
-    }
-  }, [char, isNumber]);
-
-  if (!isNumber) {
-    return <span className="inline-block transition-all duration-500">{char}</span>;
-  }
-
-  return (
-    <div className="relative w-[0.6em] h-[1.2em] flex flex-col transition-transform duration-500 ease-out" 
-         style={{ transform: `translateY(-${offset}%)` }}>
-      {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((n) => (
-        <span key={n} className="h-[1.2em] flex items-center justify-center shrink-0">
-          {n}
-        </span>
-      ))}
-    </div>
-  );
-}

package/src/components/Slider.tsx

@@ -1,114 +0,0 @@
-'use client';
-
-import React, { useState, useEffect } from 'react';
-
-export interface SlideItem {
-  wallpaper: string;
-  content: React.ReactNode;
-}
-
-export interface SliderProps {
-  slides?: SlideItem[];
-  durationTime?: number; // In milliseconds
-}
-
-const defaultSlides: SlideItem[] = [
-  {
-    wallpaper: 'https://images.unsplash.com/photo-1542751371-adc38448a05e?q=80&w=2070&auto=format&fit=crop',
-    content: (
-      <div className="space-y-4">
-        <h2 className="text-4xl md:text-6xl font-black text-white drop-shadow-lg">E-Spor Turnuvaları</h2>
-        <p className="text-lg md:text-xl text-gray-200 drop-shadow-md font-medium">Yeteneklerini göster ve devasa ödül havuzundan payını al.</p>
-      </div>
-    )
-  },
-  {
-    wallpaper: 'https://images.unsplash.com/photo-1511512578047-dfb367046420?q=80&w=2071&auto=format&fit=crop',
-    content: (
-      <div className="space-y-4">
-        <h2 className="text-4xl md:text-6xl font-black text-white drop-shadow-lg">ARMOYU Minecraft</h2>
-        <p className="text-lg md:text-xl text-gray-200 drop-shadow-md font-medium">Gelişmiş eklentiler ve bitmeyen aksiyon mc.armoyu.com'da.</p>
-      </div>
-    )
-  },
-  {
-    wallpaper: 'https://images.unsplash.com/photo-1552820728-8b83bb6b773f?q=80&w=2070&auto=format&fit=crop',
-    content: (
-      <div className="space-y-4">
-        <h2 className="text-4xl md:text-6xl font-black text-white drop-shadow-lg">Büyük Topluluk</h2>
-        <p className="text-lg md:text-xl text-gray-200 drop-shadow-md font-medium">Binlerce oyuncuyla tanış, ekibini kur ve rekabete katıl.</p>
-      </div>
-    )
-  }
-];
-
-export function Slider({ slides = defaultSlides, durationTime = 5000 }: SliderProps) {
-  const [currentIndex, setCurrentIndex] = useState(0);
-
-  useEffect(() => {
-    if (!slides || slides.length <= 1) return;
-
-    const timer = setInterval(() => {
-      setCurrentIndex((prev) => (prev + 1) % slides.length);
-    }, durationTime);
-
-    return () => clearInterval(timer);
-  }, [slides, durationTime, currentIndex]);
-
-  if (!slides || slides.length === 0) return null;
-
-  return (
-    <div className="relative w-full h-full min-h-[400px] md:min-h-[500px] rounded-[30px] overflow-hidden group shadow-2xl border border-white/5">
-      {/* Background Images */}
-      {slides.map((slide, index) => (
-        <div
-          key={index}
-          className={`absolute inset-0 transition-opacity duration-1000 ease-in-out ${
-            index === currentIndex ? 'opacity-100 z-10' : 'opacity-0 z-0'
-          }`}
-        >
-          <div className="absolute inset-0 bg-gradient-to-t from-[#0a0a0e] via-black/40 to-transparent z-10" />
-          <img
-            src={slide.wallpaper}
-            alt={`Slide ${index}`}
-            className="absolute inset-0 w-full h-full object-cover transition-transform duration-[10000ms] ease-linear overflow-hidden"
-            style={{
-              transform: index === currentIndex ? 'scale(1.05)' : 'scale(1)',
-            }}
-          />
-          <div className="absolute inset-0 z-20 flex flex-col justify-end pb-20 px-8 lg:px-16 text-left max-w-7xl mx-auto">
-            <div className={`transition-all duration-700 transform ${index === currentIndex ? 'translate-y-0 opacity-100' : 'translate-y-8 opacity-0'}`}>
-              {slide.content}
-            </div>
-          </div>
-        </div>
-      ))}
-
-      {/* Progress Bar Container */}
-      <div className="absolute bottom-6 left-0 right-0 z-20 flex justify-center px-8 lg:px-16 max-w-7xl mx-auto">
-        <div className="flex gap-3 w-full">
-          {slides.map((_, index) => (
-            <div 
-              key={index} 
-              className="h-1 lg:h-1.5 flex-1 bg-white/20 rounded-full overflow-hidden cursor-pointer backdrop-blur-sm transition-all hover:bg-white/40"
-              onClick={() => setCurrentIndex(index)}
-            >
-              {index === currentIndex && (
-                <div 
-                  key={`progress-${currentIndex}`}
-                  className="h-full bg-blue-500 rounded-full shadow-[0_0_10px_rgba(59,130,246,0.8)]"
-                  style={{
-                    animation: `progressBar ${durationTime}ms linear forwards`
-                  }}
-                />
-              )}
-              {index < currentIndex && (
-                 <div className="h-full bg-white/60 rounded-full" />
-              )}
-            </div>
-          ))}
-        </div>
-      </div>
-    </div>
-  );
-}

package/src/components/StatsGrid.tsx

@@ -1,35 +0,0 @@
-'use client';
-
-import React from 'react';
-import { GlobalStats } from "@armoyu/core";
-
-export interface StatsGridProps {
-  stats: GlobalStats;
-}
-
-export function StatsGrid({ stats }: StatsGridProps) {
-  const statItems = [
-    { label: 'Toplam Oyuncu', value: stats.totalPlayers.toLocaleString('tr-TR'), icon: '🎮', color: 'text-blue-400' },
-    { label: 'Aktif Kullanıcı (24s)', value: stats.activeUsers24h.toLocaleString('tr-TR'), icon: '🔥', color: 'text-orange-400' },
-    { label: 'Açılan Forum', value: stats.totalForums.toLocaleString('tr-TR'), icon: '💬', color: 'text-purple-400' },
-    { label: 'Oynanan Maç', value: stats.totalMatchesPlayed.toLocaleString('tr-TR'), icon: '⚔️', color: 'text-red-400' },
-    { label: 'Kurulan Grup', value: stats.totalGuilds.toLocaleString('tr-TR'), icon: '🛡️', color: 'text-yellow-400' },
-    { label: 'Düzenlenen Anket', value: stats.totalPolls.toLocaleString('tr-TR'), icon: '📊', color: 'text-emerald-400' },
-  ];
-
-  return (
-    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
-      {statItems.map((item, idx) => (
-        <div key={idx} className="bg-white/5 p-4 flex items-center gap-4 rounded-2xl border border-white/5 hover:bg-white/10 transition-colors shadow-lg hover:-translate-y-1 duration-300 cursor-default">
-          <div className="text-3xl bg-[#0a0a0e]/50 p-3 rounded-xl border border-white/10 shadow-inner">
-            {item.icon}
-          </div>
-          <div>
-            <p className="text-gray-400 text-sm font-medium">{item.label}</p>
-            <p className={`text-2xl font-black tracking-tight ${item.color}`}>{item.value}</p>
-          </div>
-        </div>
-      ))}
-    </div>
-  );
-}

package/src/components/ViewModeToggle.tsx

@@ -1,39 +0,0 @@
-'use client';
-
-import React from 'react';
-
-export type ViewMode = 'grid' | 'table';
-
-interface ViewModeToggleProps {
-  mode: ViewMode;
-  onChange: (mode: ViewMode) => void;
-}
-
-export function ViewModeToggle({ mode, onChange }: ViewModeToggleProps) {
-  return (
-    <div className="flex bg-black/5 dark:bg-white/5 p-1 rounded-2xl border border-black/5 dark:border-white/5 shadow-inner">
-      <button
-        onClick={() => onChange('grid')}
-        className={`p-2.5 rounded-xl transition-all ${
-          mode === 'grid' 
-          ? 'bg-white dark:bg-blue-600 text-blue-600 dark:text-white shadow-lg' 
-          : 'text-gray-400 hover:text-white hover:bg-black/5 dark:hover:bg-white/5'
-        }`}
-        title="Izgara Görünümü"
-      >
-        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="3" width="7" height="7"></rect><rect x="14" y="3" width="7" height="7"></rect><rect x="14" y="14" width="7" height="7"></rect><rect x="3" y="14" width="7" height="7"></rect></svg>
-      </button>
-      <button
-        onClick={() => onChange('table')}
-        className={`p-2.5 rounded-xl transition-all ${
-          mode === 'table' 
-          ? 'bg-white dark:bg-blue-600 text-blue-600 dark:text-white shadow-lg' 
-          : 'text-gray-400 hover:text-white hover:bg-black/5 dark:hover:bg-white/5'
-        }`}
-        title="Tablo Görünümü"
-      >
-        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><line x1="8" y1="6" x2="21" y2="6"></line><line x1="8" y1="12" x2="21" y2="12"></line><line x1="8" y1="18" x2="21" y2="18"></line><line x1="3" y1="6" x2="3.01" y2="6"></line><line x1="3" y1="12" x2="3.01" y2="12"></line><line x1="3" y1="18" x2="3.01" y2="18"></line></svg>
-      </button>
-    </div>
-  );
-}