Skip to content

Commit c1765c8

Browse files
author
Samet UCA
authored
Benzersiz ve Şık UI Komponentleri
1 parent af3646a commit c1765c8

13 files changed

Lines changed: 1761 additions & 0 deletions

‎src/App.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,7 @@ const App = () => (
7070
<Route path="/showcase/widgets" element={<DashboardWidgets />} />
7171
<Route path="/showcase/gallery" element={<ModernGallery />} />
7272
<Route path="/showcase/animations" element={<AnimationShowcase />} />
73+
<Route path="/showcase/unique" element={<UniqueComponents />} />
7374
<Route path="/old-showcase" element={<ComponentShowcase />} />
7475
</Route>
7576
{/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}

‎src/components/ui/floating-action-menu.tsx‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
import React, { useState } from 'react';
2+
import { Button } from '@/components/ui/button';
3+
import { cn } from '@/lib/utils';
4+
import { Plus, X, LucideIcon } from 'lucide-react';
5+
6+
interface FloatingActionItem {
7+
icon: LucideIcon;
8+
label: string;
9+
onClick: () => void;
10+
color?: string;
11+
}
12+
13+
interface FloatingActionMenuProps {
14+
items: FloatingActionItem[];
15+
className?: string;
16+
position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
17+
}
18+
19+
export function FloatingActionMenu({
20+
items,
21+
className,
22+
position = 'bottom-right'
23+
}: FloatingActionMenuProps) {
24+
const [isOpen, setIsOpen] = useState(false);
25+
26+
const positionClasses = {
27+
'bottom-right': 'bottom-6 right-6',
28+
'bottom-left': 'bottom-6 left-6',
29+
'top-right': 'top-6 right-6',
30+
'top-left': 'top-6 left-6'
31+
};
32+
33+
const itemPositions = {
34+
'bottom-right': 'flex-col-reverse',
35+
'bottom-left': 'flex-col-reverse',
36+
'top-right': 'flex-col',
37+
'top-left': 'flex-col'
38+
};
39+
40+
return (
41+
<div className={cn(
42+
"fixed z-50 flex gap-3",
43+
positionClasses[position],
44+
itemPositions[position],
45+
className
46+
)}>
47+
{/* Action Items */}
48+
<div className={cn(
49+
"flex gap-3 transition-all duration-300 ease-out",
50+
itemPositions[position],
51+
isOpen ? 'opacity-100 scale-100' : 'opacity-0 scale-95 pointer-events-none'
52+
)}>
53+
{items.map((item, index) => (
54+
<div
55+
key={index}
56+
className="group relative"
57+
style={{
58+
transitionDelay: isOpen ? `${index * 50}ms` : `${(items.length - index) * 50}ms`
59+
}}
60+
>
61+
<Button
62+
size="icon"
63+
onClick={item.onClick}
64+
className={cn(
65+
"h-12 w-12 rounded-full shadow-lg hover:shadow-xl transition-all duration-300 hover:scale-110",
66+
item.color || "bg-primary hover:bg-primary/90"
67+
)}
68+
>
69+
<item.icon className="h-5 w-5" />
70+
</Button>
71+
72+
{/* Tooltip */}
73+
<div className={cn(
74+
"absolute whitespace-nowrap bg-black/80 text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none",
75+
position.includes('right') ? 'right-full mr-3 top-1/2 -translate-y-1/2' : 'left-full ml-3 top-1/2 -translate-y-1/2'
76+
)}>
77+
{item.label}
78+
</div>
79+
</div>
80+
))}
81+
</div>
82+
83+
{/* Main Button */}
84+
<Button
85+
size="icon"
86+
onClick={() => setIsOpen(!isOpen)}
87+
className={cn(
88+
"h-14 w-14 rounded-full shadow-lg hover:shadow-xl transition-all duration-300 hover:scale-110",
89+
isOpen && "rotate-45"
90+
)}
91+
>
92+
{isOpen ? <X className="h-6 w-6" /> : <Plus className="h-6 w-6" />}
93+
</Button>
94+
</div>
95+
);
96+
}

‎src/components/ui/glassmorphism-card.tsx‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
import React from 'react';
2+
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
3+
import { cn } from '@/lib/utils';
4+
import { LucideIcon } from 'lucide-react';
5+
6+
interface GlassmorphismCardProps {
7+
title: string;
8+
description?: string;
9+
icon?: LucideIcon;
10+
children?: React.ReactNode;
11+
className?: string;
12+
variant?: 'default' | 'primary' | 'secondary' | 'accent';
13+
blur?: 'sm' | 'md' | 'lg' | 'xl';
14+
opacity?: number;
15+
}
16+
17+
export function GlassmorphismCard({
18+
title,
19+
description,
20+
icon: Icon,
21+
children,
22+
className,
23+
variant = 'default',
24+
blur = 'md',
25+
opacity = 0.1
26+
}: GlassmorphismCardProps) {
27+
const variants = {
28+
default: 'bg-white/10 border-white/20 text-foreground',
29+
primary: 'bg-primary/10 border-primary/20 text-primary-foreground',
30+
secondary: 'bg-secondary/10 border-secondary/20 text-secondary-foreground',
31+
accent: 'bg-accent/10 border-accent/20 text-accent-foreground'
32+
};
33+
34+
const blurClasses = {
35+
sm: 'backdrop-blur-sm',
36+
md: 'backdrop-blur-md',
37+
lg: 'backdrop-blur-lg',
38+
xl: 'backdrop-blur-xl'
39+
};
40+
41+
return (
42+
<Card className={cn(
43+
"relative overflow-hidden border transition-all duration-300 hover:shadow-2xl hover:scale-[1.02]",
44+
variants[variant],
45+
blurClasses[blur],
46+
className
47+
)}>
48+
{/* Animated background gradient */}
49+
<div
50+
className="absolute inset-0 bg-gradient-to-br from-white/5 via-transparent to-white/5 animate-pulse"
51+
style={{ opacity }}
52+
/>
53+
54+
{/* Floating particles effect */}
55+
<div className="absolute inset-0 overflow-hidden">
56+
{[...Array(6)].map((_, i) => (
57+
<div
58+
key={i}
59+
className="absolute w-1 h-1 bg-white/30 rounded-full animate-bounce"
60+
style={{
61+
left: `${Math.random() * 100}%`,
62+
top: `${Math.random() * 100}%`,
63+
animationDelay: `${i * 0.5}s`,
64+
animationDuration: `${2 + Math.random() * 2}s`
65+
}}
66+
/>
67+
))}
68+
</div>
69+
70+
<CardHeader className="relative z-10">
71+
<div className="flex items-center gap-3">
72+
{Icon && (
73+
<div className="p-2 rounded-lg bg-white/10 backdrop-blur-sm">
74+
<Icon className="h-5 w-5" />
75+
</div>
76+
)}
77+
<div>
78+
<CardTitle className="text-lg">{title}</CardTitle>
79+
{description && (
80+
<p className="text-sm opacity-80 mt-1">{description}</p>
81+
)}
82+
</div>
83+
</div>
84+
</CardHeader>
85+
86+
{children && (
87+
<CardContent className="relative z-10">
88+
{children}
89+
</CardContent>
90+
)}
91+
92+
{/* Border glow effect */}
93+
<div className="absolute inset-0 rounded-lg bg-gradient-to-r from-transparent via-white/20 to-transparent opacity-0 hover:opacity-100 transition-opacity duration-500 pointer-events-none" />
94+
</Card>
95+
);
96+
}

‎src/components/ui/holographic-card.tsx‎

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
import React, { useRef, useState } from 'react';
2+
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
3+
import { cn } from '@/lib/utils';
4+
import { LucideIcon } from 'lucide-react';
5+
6+
interface HolographicCardProps {
7+
title: string;
8+
description?: string;
9+
icon?: LucideIcon;
10+
children?: React.ReactNode;
11+
className?: string;
12+
intensity?: number;
13+
}
14+
15+
export function HolographicCard({
16+
title,
17+
description,
18+
icon: Icon,
19+
children,
20+
className,
21+
intensity = 0.3
22+
}: HolographicCardProps) {
23+
const cardRef = useRef<HTMLDivElement>(null);
24+
const [transform, setTransform] = useState('');
25+
const [glowPosition, setGlowPosition] = useState({ x: 50, y: 50 });
26+
27+
const handleMouseMove = (e: React.MouseEvent) => {
28+
if (!cardRef.current) return;
29+
30+
const rect = cardRef.current.getBoundingClientRect();
31+
const x = e.clientX - rect.left;
32+
const y = e.clientY - rect.top;
33+
34+
const centerX = rect.width / 2;
35+
const centerY = rect.height / 2;
36+
37+
const rotateX = (y - centerY) / centerY * -10 * intensity;
38+
const rotateY = (x - centerX) / centerX * 10 * intensity;
39+
40+
setTransform(`perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale3d(1.02, 1.02, 1.02)`);
41+
setGlowPosition({
42+
x: (x / rect.width) * 100,
43+
y: (y / rect.height) * 100
44+
});
45+
};
46+
47+
const handleMouseLeave = () => {
48+
setTransform('perspective(1000px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1)');
49+
setGlowPosition({ x: 50, y: 50 });
50+
};
51+
52+
return (
53+
<div className="perspective-1000">
54+
<Card
55+
ref={cardRef}
56+
onMouseMove={handleMouseMove}
57+
onMouseLeave={handleMouseLeave}
58+
className={cn(
59+
"relative overflow-hidden transition-all duration-300 ease-out cursor-pointer",
60+
"bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900",
61+
"border border-slate-700/50 shadow-2xl",
62+
className
63+
)}
64+
style={{ transform }}
65+
>
66+
{/* Holographic overlay */}
67+
<div
68+
className="absolute inset-0 opacity-30 transition-all duration-300"
69+
style={{
70+
background: `radial-gradient(circle at ${glowPosition.x}% ${glowPosition.y}%,
71+
rgba(59, 130, 246, 0.4) 0%,
72+
rgba(147, 51, 234, 0.3) 25%,
73+
rgba(236, 72, 153, 0.2) 50%,
74+
transparent 70%)`
75+
}}
76+
/>
77+
78+
{/* Animated border gradient */}
79+
<div className="absolute inset-0 rounded-lg bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 opacity-75 animate-pulse"
80+
style={{ padding: '1px' }}>
81+
<div className="w-full h-full bg-slate-900 rounded-lg" />
82+
</div>
83+
84+
{/* Content */}
85+
<div className="relative z-10">
86+
<CardHeader>
87+
<div className="flex items-center gap-3">
88+
{Icon && (
89+
<div className="p-2 rounded-lg bg-gradient-to-br from-blue-500/20 to-purple-500/20 backdrop-blur-sm">
90+
<Icon className="h-5 w-5 text-blue-400" />
91+
</div>
92+
)}
93+
<div>
94+
<CardTitle className="text-white">{title}</CardTitle>
95+
{description && (
96+
<p className="text-slate-300 text-sm mt-1">{description}</p>
97+
)}
98+
</div>
99+
</div>
100+
</CardHeader>
101+
102+
{children && (
103+
<CardContent className="text-slate-200">
104+
{children}
105+
</CardContent>
106+
)}
107+
</div>
108+
109+
{/* Scanning line effect */}
110+
<div className="absolute inset-0 overflow-hidden">
111+
<div className="absolute w-full h-0.5 bg-gradient-to-r from-transparent via-cyan-400 to-transparent animate-[scan_3s_ease-in-out_infinite]" />
112+
</div>
113+
114+
{/* Corner accents */}
115+
<div className="absolute top-2 left-2 w-4 h-4 border-l-2 border-t-2 border-cyan-400/60" />
116+
<div className="absolute top-2 right-2 w-4 h-4 border-r-2 border-t-2 border-cyan-400/60" />
117+
<div className="absolute bottom-2 left-2 w-4 h-4 border-l-2 border-b-2 border-cyan-400/60" />
118+
<div className="absolute bottom-2 right-2 w-4 h-4 border-r-2 border-b-2 border-cyan-400/60" />
119+
</Card>
120+
</div>
121+
);
122+
}

0 commit comments

Comments
 (0)