@armoyu/ui 1.0.1 → 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/app/api/proxy/[...path]/route.d.ts +22 -0
- package/dist/app/api/proxy/[...path]/route.d.ts.map +1 -0
- package/dist/app/api/proxy/[...path]/route.js +89 -0
- package/dist/app/api/proxy/[...path]/route.js.map +1 -0
- package/dist/app/layout.d.ts.map +1 -1
- package/dist/app/layout.js +2 -5
- package/dist/app/layout.js.map +1 -1
- package/dist/components/RollingNumber.d.ts +6 -6
- package/dist/components/RollingNumber.js +23 -23
- package/dist/components/RollingNumber.js.map +1 -1
- package/dist/components/StatsGrid.d.ts +5 -5
- package/dist/components/modules/auth/Dashboard.d.ts +1 -1
- package/dist/components/modules/auth/PostCard.d.ts +24 -24
- package/dist/components/modules/auth/PostInteractionsModal.d.ts +11 -11
- package/dist/components/modules/auth/RepostModal.d.ts +21 -21
- package/dist/components/modules/auth/SidebarLeft.d.ts +1 -1
- package/dist/components/modules/auth/Stories.d.ts +1 -1
- package/dist/components/modules/auth/StoryViewer.d.ts +9 -9
- package/dist/components/modules/chat/ChatContainer.d.ts +1 -1
- package/dist/components/modules/chat/ChatInput.d.ts +4 -4
- package/dist/components/modules/chat/ChatList.d.ts +6 -6
- package/dist/components/modules/chat/ChatNotes.d.ts +1 -1
- package/dist/components/modules/community/GroupHeader.d.ts +10 -10
- package/dist/components/modules/community/GroupMenu.d.ts +9 -9
- package/dist/components/modules/community/SchoolCard.d.ts +6 -6
- package/dist/components/modules/community/SurveyCard.d.ts +6 -6
- package/dist/components/modules/guest/Introduction.d.ts +1 -1
- package/dist/components/modules/magaza/BackToStore.d.ts +1 -1
- package/dist/components/modules/magaza/StoreHeader.d.ts +5 -5
- package/dist/components/modules/news/NewsCard.d.ts +11 -11
- package/dist/components/modules/news/NewsComments.d.ts +1 -1
- package/dist/components/modules/profile/ProfileContent.d.ts +4 -4
- package/dist/components/modules/profile/ProfileHeader.d.ts +7 -7
- package/dist/components/modules/profile/ProfileStats.d.ts +1 -1
- package/dist/components/modules/profile/ProfileStats.js +14 -14
- package/dist/components/modules/profile/ProfileStats.js.map +1 -1
- package/dist/components/modules/profile/TeamSelectorModal.d.ts +10 -10
- package/dist/components/modules/stations/StationCard.d.ts +2 -2
- package/dist/components/modules/stations/StationQRModal.d.ts +9 -9
- package/dist/components/shared/FloatingChatButton.d.ts +4 -4
- package/dist/components/shared/Header.d.ts +1 -1
- package/dist/components/shared/LoginModal.d.ts +4 -4
- package/dist/components/shared/LoginModal.d.ts.map +1 -1
- package/dist/components/shared/LoginModal.js +65 -69
- package/dist/components/shared/LoginModal.js.map +1 -1
- package/dist/components/shared/MainLayoutWrapper.d.ts +3 -3
- package/dist/components/showcase/SocialTab.d.ts.map +1 -1
- package/dist/components/showcase/SocialTab.js +47 -2
- package/dist/components/showcase/SocialTab.js.map +1 -1
- package/dist/context/AuthContext.d.ts +18 -18
- package/dist/context/AuthContext.d.ts.map +1 -1
- package/dist/context/AuthContext.js +93 -74
- package/dist/context/AuthContext.js.map +1 -1
- package/dist/context/CartContext.d.ts +16 -16
- package/dist/context/SocketContext.d.ts +12 -12
- package/dist/index.d.ts +65 -65
- package/dist/lib/constants/educationData.d.ts +7 -7
- package/dist/lib/constants/seedData.d.ts +164 -164
- package/dist/lib/constants/stationData.d.ts +13 -13
- package/dist/lib/constants/surveyData.d.ts +2 -2
- package/dist/lib/constants/teamData.d.ts +12 -12
- package/package.json +13 -11
- package/next.config.ts +0 -13
- package/postcss.config.js +0 -6
- package/src/app/layout.tsx +0 -67
- package/src/app/page.tsx +0 -101
- package/src/components/Button.tsx +0 -41
- package/src/components/GenderStatsBar.tsx +0 -66
- package/src/components/RollingNumber.tsx +0 -50
- package/src/components/Slider.tsx +0 -114
- package/src/components/StatsGrid.tsx +0 -35
- package/src/components/ViewModeToggle.tsx +0 -39
- package/src/components/modules/auth/Dashboard.tsx +0 -649
- package/src/components/modules/auth/MediaLightbox.tsx +0 -112
- package/src/components/modules/auth/PostCard.tsx +0 -556
- package/src/components/modules/auth/PostInteractionsModal.tsx +0 -138
- package/src/components/modules/auth/RepostModal.tsx +0 -167
- package/src/components/modules/auth/SidebarLeft.tsx +0 -237
- package/src/components/modules/auth/Stories.tsx +0 -69
- package/src/components/modules/auth/StoryViewer.tsx +0 -146
- package/src/components/modules/chat/ChatContainer.tsx +0 -332
- package/src/components/modules/chat/ChatInput.tsx +0 -57
- package/src/components/modules/chat/ChatList.tsx +0 -179
- package/src/components/modules/chat/ChatMessage.tsx +0 -43
- package/src/components/modules/chat/ChatNotes.tsx +0 -58
- package/src/components/modules/community/GroupHeader.tsx +0 -111
- package/src/components/modules/community/GroupMenu.tsx +0 -82
- package/src/components/modules/community/SchoolCard.tsx +0 -104
- package/src/components/modules/community/SurveyCard.tsx +0 -149
- package/src/components/modules/forum/ForumBoard.tsx +0 -78
- package/src/components/modules/forum/ForumPost.tsx +0 -71
- package/src/components/modules/forum/NewTopicModal.tsx +0 -112
- package/src/components/modules/forum/TopicItem.tsx +0 -72
- package/src/components/modules/galleries/GalleryCard.tsx +0 -66
- package/src/components/modules/giveaways/GiveawayCard.tsx +0 -76
- package/src/components/modules/groups/ApplicationModal.tsx +0 -133
- package/src/components/modules/groups/GroupCard.tsx +0 -96
- package/src/components/modules/guest/Introduction.tsx +0 -60
- package/src/components/modules/magaza/BackToStore.tsx +0 -53
- package/src/components/modules/magaza/StoreHeader.tsx +0 -74
- package/src/components/modules/news/NewsCard.tsx +0 -66
- package/src/components/modules/news/NewsComments.tsx +0 -141
- package/src/components/modules/profile/CloudStorageModal.tsx +0 -200
- package/src/components/modules/profile/EditProfileModal.tsx +0 -191
- package/src/components/modules/profile/ProfileContent.tsx +0 -491
- package/src/components/modules/profile/ProfileHeader.tsx +0 -128
- package/src/components/modules/profile/ProfileStats.tsx +0 -72
- package/src/components/modules/profile/TeamSelectorModal.tsx +0 -129
- package/src/components/modules/stations/StationCard.tsx +0 -95
- package/src/components/modules/stations/StationQRModal.tsx +0 -102
- package/src/components/shared/FloatingChatButton.tsx +0 -57
- package/src/components/shared/Footer.tsx +0 -77
- package/src/components/shared/Header.tsx +0 -799
- package/src/components/shared/LoginModal.tsx +0 -208
- package/src/components/shared/MainLayoutWrapper.tsx +0 -15
- package/src/components/shared/PageWidth.tsx +0 -22
- package/src/components/showcase/CommunityTab.tsx +0 -22
- package/src/components/showcase/CorporateTab.tsx +0 -38
- package/src/components/showcase/GeneralTab.tsx +0 -41
- package/src/components/showcase/MessagesTab.tsx +0 -26
- package/src/components/showcase/ProfileTab.tsx +0 -20
- package/src/components/showcase/ShopTab.tsx +0 -24
- package/src/components/showcase/SocialTab.tsx +0 -28
- package/src/context/AuthContext.tsx +0 -104
- package/src/context/CartContext.tsx +0 -93
- package/src/context/ChatContext.tsx +0 -32
- package/src/context/LayoutContext.tsx +0 -29
- package/src/context/SocketContext.tsx +0 -50
- package/src/context/ThemeContext.tsx +0 -52
- package/src/index.ts +0 -96
- package/src/lib/constants/educationData.ts +0 -124
- package/src/lib/constants/punishmentData.ts +0 -201
- package/src/lib/constants/seedData.ts +0 -758
- package/src/lib/constants/stationData.ts +0 -170
- package/src/lib/constants/surveyData.ts +0 -53
- package/src/lib/constants/teamData.ts +0 -69
- package/src/lib/utils/numberFormat.ts +0 -16
- package/src/lib/utils/odpUtils.ts +0 -51
- package/src/types/index.ts +0 -1
- package/src/types/stats.ts +0 -17
|
@@ -1,138 +0,0 @@
|
|
|
1
|
-
'use client';
|
|
2
|
-
|
|
3
|
-
import React from 'react';
|
|
4
|
-
import { X, Heart, Repeat, User as UserIcon, ChevronRight } from 'lucide-react';
|
|
5
|
-
import { User } from '@armoyu/core';
|
|
6
|
-
import Link from 'next/link';
|
|
7
|
-
|
|
8
|
-
interface PostInteractionsModalProps {
|
|
9
|
-
isOpen: boolean;
|
|
10
|
-
onClose: () => void;
|
|
11
|
-
title?: string;
|
|
12
|
-
likes?: User[];
|
|
13
|
-
reposts?: User[];
|
|
14
|
-
defaultTab?: 'likes' | 'reposts';
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
export function PostInteractionsModal({
|
|
18
|
-
isOpen,
|
|
19
|
-
onClose,
|
|
20
|
-
title = 'Etkileşimler',
|
|
21
|
-
likes = [],
|
|
22
|
-
reposts = [],
|
|
23
|
-
defaultTab = 'likes'
|
|
24
|
-
}: PostInteractionsModalProps) {
|
|
25
|
-
const [activeTab, setActiveTab] = React.useState<'likes' | 'reposts'>(defaultTab);
|
|
26
|
-
|
|
27
|
-
if (!isOpen) return null;
|
|
28
|
-
|
|
29
|
-
const currentList = activeTab === 'likes' ? likes : reposts;
|
|
30
|
-
|
|
31
|
-
return (
|
|
32
|
-
<div className="fixed inset-0 z-[100] flex items-center justify-center p-4 md:p-6">
|
|
33
|
-
{/* Backdrop */}
|
|
34
|
-
<div
|
|
35
|
-
className="absolute inset-0 bg-black/60 backdrop-blur-md animate-in fade-in duration-300"
|
|
36
|
-
onClick={onClose}
|
|
37
|
-
/>
|
|
38
|
-
|
|
39
|
-
{/* Modal Content */}
|
|
40
|
-
<div className="bg-armoyu-card-bg border border-armoyu-card-border rounded-[40px] w-full max-w-md relative z-10 shadow-2xl flex flex-col max-h-[80vh] overflow-hidden animate-in zoom-in-95 duration-300">
|
|
41
|
-
|
|
42
|
-
{/* Header */}
|
|
43
|
-
<div className="p-6 border-b border-armoyu-card-border flex items-center justify-between bg-black/5">
|
|
44
|
-
<div className="flex items-center gap-3">
|
|
45
|
-
<div className="w-10 h-10 rounded-2xl bg-blue-600/10 flex items-center justify-center text-blue-500">
|
|
46
|
-
{activeTab === 'likes' ? <Heart size={20} fill="currentColor" /> : <Repeat size={20} />}
|
|
47
|
-
</div>
|
|
48
|
-
<div>
|
|
49
|
-
<h3 className="text-lg font-black text-armoyu-text uppercase italic tracking-tighter leading-none">{title}</h3>
|
|
50
|
-
<p className="text-[10px] font-bold text-armoyu-text-muted uppercase tracking-widest mt-1">
|
|
51
|
-
{currentList.length} Kişi Listeleniyor
|
|
52
|
-
</p>
|
|
53
|
-
</div>
|
|
54
|
-
</div>
|
|
55
|
-
<button
|
|
56
|
-
onClick={onClose}
|
|
57
|
-
className="p-2 text-armoyu-text-muted hover:text-armoyu-text bg-black/10 hover:bg-black/20 rounded-xl transition-all"
|
|
58
|
-
>
|
|
59
|
-
<X size={20} />
|
|
60
|
-
</button>
|
|
61
|
-
</div>
|
|
62
|
-
|
|
63
|
-
{/* Tabs */}
|
|
64
|
-
<div className="flex border-b border-armoyu-card-border bg-black/5 px-2">
|
|
65
|
-
<button
|
|
66
|
-
onClick={() => setActiveTab('likes')}
|
|
67
|
-
className={`flex-1 py-4 text-xs font-black uppercase tracking-widest transition-all relative ${activeTab === 'likes' ? 'text-blue-500' : 'text-armoyu-text-muted hover:text-armoyu-text'
|
|
68
|
-
}`}
|
|
69
|
-
>
|
|
70
|
-
Beğeniler
|
|
71
|
-
{activeTab === 'likes' && <div className="absolute bottom-0 left-4 right-4 h-0.5 bg-blue-500 rounded-full" />}
|
|
72
|
-
</button>
|
|
73
|
-
<button
|
|
74
|
-
onClick={() => setActiveTab('reposts')}
|
|
75
|
-
className={`flex-1 py-4 text-xs font-black uppercase tracking-widest transition-all relative ${activeTab === 'reposts' ? 'text-green-500' : 'text-armoyu-text-muted hover:text-armoyu-text'
|
|
76
|
-
}`}
|
|
77
|
-
>
|
|
78
|
-
Yeniden Paylaşımlar
|
|
79
|
-
{activeTab === 'reposts' && <div className="absolute bottom-0 left-4 right-4 h-0.5 bg-green-500 rounded-full" />}
|
|
80
|
-
</button>
|
|
81
|
-
</div>
|
|
82
|
-
|
|
83
|
-
{/* User List */}
|
|
84
|
-
<div className="flex-1 overflow-y-auto p-4 custom-scrollbar">
|
|
85
|
-
{currentList.length > 0 ? (
|
|
86
|
-
<div className="space-y-2">
|
|
87
|
-
{currentList.map((user, idx) => (
|
|
88
|
-
<Link
|
|
89
|
-
key={user.id || idx}
|
|
90
|
-
href={user.getProfileUrl()}
|
|
91
|
-
onClick={onClose}
|
|
92
|
-
className="flex items-center gap-4 p-3 rounded-2xl hover:bg-black/5 dark:hover:bg-white/5 transition-all group border border-transparent hover:border-armoyu-card-border"
|
|
93
|
-
>
|
|
94
|
-
<div className="relative shrink-0">
|
|
95
|
-
<img
|
|
96
|
-
src={user.avatar}
|
|
97
|
-
className="w-11 h-11 rounded-2xl object-cover ring-2 ring-transparent group-hover:ring-blue-500/30 transition-all font-bold"
|
|
98
|
-
alt=""
|
|
99
|
-
/>
|
|
100
|
-
{user.verified && (
|
|
101
|
-
<div className="absolute -bottom-1 -right-1 bg-blue-500 text-white p-0.5 rounded-lg border-2 border-armoyu-card-bg shadow-sm">
|
|
102
|
-
<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 24 24" fill="currentColor"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path></svg>
|
|
103
|
-
</div>
|
|
104
|
-
)}
|
|
105
|
-
</div>
|
|
106
|
-
<div className="flex-1 min-w-0">
|
|
107
|
-
<div className="text-sm font-black text-armoyu-text uppercase italic tracking-tighter truncate">{user.displayName}</div>
|
|
108
|
-
<div className="text-[10px] font-bold text-armoyu-text-muted uppercase tracking-widest leading-none">@{user.username}</div>
|
|
109
|
-
</div>
|
|
110
|
-
<ChevronRight size={16} className="text-armoyu-text-muted opacity-0 group-hover:opacity-100 -translate-x-2 group-hover:translate-x-0 transition-all" />
|
|
111
|
-
</Link>
|
|
112
|
-
))}
|
|
113
|
-
</div>
|
|
114
|
-
) : (
|
|
115
|
-
<div className="flex flex-col items-center justify-center py-12 text-center opacity-40">
|
|
116
|
-
<div className="w-16 h-16 rounded-full bg-black/10 flex items-center justify-center mb-4">
|
|
117
|
-
<UserIcon size={32} />
|
|
118
|
-
</div>
|
|
119
|
-
<h4 className="text-sm font-black uppercase italic tracking-widest">Henüz Kimse Yok</h4>
|
|
120
|
-
<p className="text-[10px] font-medium uppercase mt-2">Bu paylaşım henüz etkileşim almamış.</p>
|
|
121
|
-
</div>
|
|
122
|
-
)}
|
|
123
|
-
</div>
|
|
124
|
-
|
|
125
|
-
{/* Footer */}
|
|
126
|
-
<div className="p-4 border-t border-armoyu-card-border bg-black/5 text-center">
|
|
127
|
-
<button
|
|
128
|
-
onClick={onClose}
|
|
129
|
-
className="text-[10px] font-black text-armoyu-text-muted hover:text-armoyu-text uppercase tracking-widest transition-all"
|
|
130
|
-
>
|
|
131
|
-
Kapat
|
|
132
|
-
</button>
|
|
133
|
-
</div>
|
|
134
|
-
</div>
|
|
135
|
-
</div>
|
|
136
|
-
);
|
|
137
|
-
}
|
|
138
|
-
|
|
@@ -1,167 +0,0 @@
|
|
|
1
|
-
'use client';
|
|
2
|
-
|
|
3
|
-
import React, { useState, useEffect } from 'react';
|
|
4
|
-
import { User } from '@armoyu/core';
|
|
5
|
-
import { PostMedia } from './MediaLightbox';
|
|
6
|
-
import { useAuth } from '../../../context/AuthContext';
|
|
7
|
-
import { useSocket } from '../../../context/SocketContext';
|
|
8
|
-
|
|
9
|
-
interface RepostModalProps {
|
|
10
|
-
isOpen: boolean;
|
|
11
|
-
onClose: () => void;
|
|
12
|
-
post: {
|
|
13
|
-
id: string;
|
|
14
|
-
author: User;
|
|
15
|
-
content: string;
|
|
16
|
-
media?: PostMedia[];
|
|
17
|
-
createdAt: string;
|
|
18
|
-
stats?: {
|
|
19
|
-
likes: number;
|
|
20
|
-
comments: number;
|
|
21
|
-
reposts?: number;
|
|
22
|
-
shares: number;
|
|
23
|
-
};
|
|
24
|
-
};
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
export function RepostModal({ isOpen, onClose, post }: RepostModalProps) {
|
|
28
|
-
const { user } = useAuth();
|
|
29
|
-
const { emit } = useSocket();
|
|
30
|
-
const [quoteText, setQuoteText] = useState('');
|
|
31
|
-
const [isSubmitting, setIsSubmitting] = useState(false);
|
|
32
|
-
|
|
33
|
-
useEffect(() => {
|
|
34
|
-
const handleEsc = (e: KeyboardEvent) => {
|
|
35
|
-
if (e.key === 'Escape') onClose();
|
|
36
|
-
};
|
|
37
|
-
window.addEventListener('keydown', handleEsc);
|
|
38
|
-
return () => window.removeEventListener('keydown', handleEsc);
|
|
39
|
-
}, [onClose]);
|
|
40
|
-
|
|
41
|
-
const handleRepostSubmit = (e: React.MouseEvent) => {
|
|
42
|
-
e.preventDefault();
|
|
43
|
-
if (!user || isSubmitting) return;
|
|
44
|
-
|
|
45
|
-
setIsSubmitting(true);
|
|
46
|
-
|
|
47
|
-
try {
|
|
48
|
-
// FULL SANITIZATION - Create a completely plain object with NO CLASS INSTANCES
|
|
49
|
-
const sanitizedAuthor = {
|
|
50
|
-
id: user.id || '',
|
|
51
|
-
username: user.username || '',
|
|
52
|
-
displayName: user.displayName || '',
|
|
53
|
-
avatar: user.avatar || '',
|
|
54
|
-
role: user.role ? { name: user.role.name, color: user.role.color } : null,
|
|
55
|
-
verified: !!user.verified
|
|
56
|
-
};
|
|
57
|
-
|
|
58
|
-
const sanitizedOriginalAuthor = {
|
|
59
|
-
id: post.author.id || '',
|
|
60
|
-
username: post.author.username || '',
|
|
61
|
-
displayName: post.author.displayName || '',
|
|
62
|
-
avatar: post.author.avatar || '',
|
|
63
|
-
role: post.author.role ? { name: post.author.role.name, color: post.author.role.color } : null,
|
|
64
|
-
verified: !!post.author.verified
|
|
65
|
-
};
|
|
66
|
-
|
|
67
|
-
const newPostData = {
|
|
68
|
-
id: 'p-repost-' + Date.now(),
|
|
69
|
-
author: sanitizedAuthor,
|
|
70
|
-
content: quoteText,
|
|
71
|
-
repostOf: {
|
|
72
|
-
id: post.id,
|
|
73
|
-
author: sanitizedOriginalAuthor,
|
|
74
|
-
content: post.content,
|
|
75
|
-
media: post.media || [],
|
|
76
|
-
createdAt: post.createdAt,
|
|
77
|
-
stats: post.stats || { likes: 0, comments: 0, reposts: 0, shares: 0 }
|
|
78
|
-
},
|
|
79
|
-
createdAt: 'Şimdi',
|
|
80
|
-
stats: { likes: 0, comments: 0, reposts: 0, shares: 0 },
|
|
81
|
-
hashtags: quoteText.match(/#\w+/g)?.map(t => t.replace('#', '')) || []
|
|
82
|
-
};
|
|
83
|
-
|
|
84
|
-
// Emit safely
|
|
85
|
-
emit('post', newPostData);
|
|
86
|
-
emit('post_repost_count', { postId: post.id });
|
|
87
|
-
|
|
88
|
-
setTimeout(() => {
|
|
89
|
-
onClose();
|
|
90
|
-
setQuoteText('');
|
|
91
|
-
setIsSubmitting(false);
|
|
92
|
-
}, 500);
|
|
93
|
-
} catch (err) {
|
|
94
|
-
console.error('Repost error:', err);
|
|
95
|
-
setIsSubmitting(false);
|
|
96
|
-
}
|
|
97
|
-
};
|
|
98
|
-
|
|
99
|
-
if (!isOpen) return null;
|
|
100
|
-
|
|
101
|
-
return (
|
|
102
|
-
<div className="fixed inset-0 z-[100] flex items-center justify-center p-4">
|
|
103
|
-
<div
|
|
104
|
-
className="absolute inset-0 bg-[#0a0a0f]/90 backdrop-blur-xl animate-in fade-in duration-500"
|
|
105
|
-
onClick={onClose}
|
|
106
|
-
/>
|
|
107
|
-
|
|
108
|
-
<div className="relative w-full max-w-lg glass-panel bg-armoyu-card-bg border border-armoyu-card-border rounded-[40px] shadow-[0_32px_120px_rgba(0,0,0,0.6)] overflow-hidden animate-in zoom-in-95 fade-in duration-500">
|
|
109
|
-
<div className="absolute top-0 right-0 w-64 h-64 bg-green-500/10 blur-[100px] rounded-full -mr-32 -mt-32 pointer-events-none" />
|
|
110
|
-
<div className="absolute bottom-0 left-0 w-48 h-48 bg-blue-400/5 blur-[80px] rounded-full -ml-24 -mb-24 pointer-events-none" />
|
|
111
|
-
|
|
112
|
-
<div className="p-8 pb-6 border-b border-armoyu-card-border flex items-center justify-between relative z-10">
|
|
113
|
-
<div>
|
|
114
|
-
<h2 className="text-2xl font-black text-armoyu-text uppercase tracking-tighter italic">YENİDEN PAYLAŞ</h2>
|
|
115
|
-
<p className="text-[10px] font-black text-green-500 uppercase tracking-widest mt-1">GÖNDERİYİ TAKİPÇİLERİNE İLET</p>
|
|
116
|
-
</div>
|
|
117
|
-
<button onClick={onClose} className="w-10 h-10 rounded-2xl bg-black/5 dark:bg-white/5 border border-armoyu-card-border flex items-center justify-center hover:bg-black/10 transition-all font-bold">
|
|
118
|
-
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
|
|
119
|
-
</button>
|
|
120
|
-
</div>
|
|
121
|
-
|
|
122
|
-
<div className="p-8 space-y-6 relative z-10">
|
|
123
|
-
<div className="space-y-2">
|
|
124
|
-
<label className="text-[10px] font-black uppercase tracking-widest text-armoyu-text-muted ml-1">FİKRİNİ EKLE (OPSİYONEL)</label>
|
|
125
|
-
<textarea
|
|
126
|
-
rows={3}
|
|
127
|
-
value={quoteText}
|
|
128
|
-
onChange={(e) => setQuoteText(e.target.value)}
|
|
129
|
-
placeholder="Bu gönderi hakkında ne düşünüyorsun?.."
|
|
130
|
-
className="w-full bg-black/10 dark:bg-black/20 border border-armoyu-card-border rounded-2xl px-5 py-4 text-armoyu-text placeholder:text-armoyu-text-muted/40 focus:outline-none focus:border-green-500/50 focus:ring-1 focus:ring-green-500/50 transition-all font-medium text-sm no-scrollbar resize-none"
|
|
131
|
-
/>
|
|
132
|
-
</div>
|
|
133
|
-
|
|
134
|
-
<div className="space-y-2">
|
|
135
|
-
<label className="text-[10px] font-black uppercase tracking-widest text-armoyu-text-muted ml-1">PAYLAŞILAN GÖNDERİ</label>
|
|
136
|
-
<div className="p-5 rounded-3xl bg-black/5 dark:bg-white/5 border border-armoyu-card-border">
|
|
137
|
-
<div className="flex items-center gap-3 mb-3">
|
|
138
|
-
<img src={post.author.avatar} alt={post.author.displayName} className="w-8 h-8 rounded-full border border-armoyu-card-border" />
|
|
139
|
-
<div>
|
|
140
|
-
<h4 className="text-xs font-black text-armoyu-text leading-tight">{post.author.displayName}</h4>
|
|
141
|
-
<span className="text-[10px] font-bold text-armoyu-text-muted opacity-60">@{post.author.username}</span>
|
|
142
|
-
</div>
|
|
143
|
-
</div>
|
|
144
|
-
<p className="text-xs text-armoyu-text-muted line-clamp-2 leading-relaxed">{post.content}</p>
|
|
145
|
-
</div>
|
|
146
|
-
</div>
|
|
147
|
-
|
|
148
|
-
<div className="pt-4 space-y-3">
|
|
149
|
-
<button
|
|
150
|
-
type="button"
|
|
151
|
-
onClick={handleRepostSubmit}
|
|
152
|
-
disabled={isSubmitting}
|
|
153
|
-
className="w-full py-4 bg-green-500 hover:bg-green-400 text-black font-black text-xs uppercase tracking-[0.2em] rounded-2xl shadow-xl shadow-green-500/20 transition-all active:scale-95 flex items-center justify-center gap-2 cursor-pointer disabled:opacity-50"
|
|
154
|
-
>
|
|
155
|
-
{isSubmitting ? 'PAYLAŞILIYOR...' : 'YENİDEN PAYLAŞ'}
|
|
156
|
-
</button>
|
|
157
|
-
|
|
158
|
-
<button type="button" onClick={onClose} className="w-full py-4 text-armoyu-text-muted hover:text-red-500 font-black text-[10px] uppercase tracking-widest transition-colors">
|
|
159
|
-
İPTAL ET
|
|
160
|
-
</button>
|
|
161
|
-
</div>
|
|
162
|
-
</div>
|
|
163
|
-
</div>
|
|
164
|
-
</div>
|
|
165
|
-
);
|
|
166
|
-
}
|
|
167
|
-
|
|
@@ -1,237 +0,0 @@
|
|
|
1
|
-
'use client';
|
|
2
|
-
|
|
3
|
-
import React, { useState } from 'react';
|
|
4
|
-
import { useRouter } from 'next/navigation';
|
|
5
|
-
import { useAuth } from '../../../context/AuthContext';
|
|
6
|
-
import { mockGlobalStats, MOCK_RANKING_LEVEL, MOCK_RANKING_POPULARITY } from '../../../lib/constants/seedData';
|
|
7
|
-
|
|
8
|
-
export function SidebarLeft() {
|
|
9
|
-
const [rankingType, setRankingType] = useState<'level' | 'popularity'>('level');
|
|
10
|
-
const [visibleCount, setVisibleCount] = useState(5);
|
|
11
|
-
const router = useRouter();
|
|
12
|
-
const { user: currentUser } = useAuth();
|
|
13
|
-
|
|
14
|
-
const allRankings = rankingType === 'level' ? MOCK_RANKING_LEVEL : MOCK_RANKING_POPULARITY;
|
|
15
|
-
const currentRanking = allRankings.slice(0, visibleCount);
|
|
16
|
-
|
|
17
|
-
const goToProfile = (user: { displayName: string, username: string, avatar: string }) => {
|
|
18
|
-
const params = new URLSearchParams();
|
|
19
|
-
if (user.displayName) params.set('name', user.displayName);
|
|
20
|
-
if (user.avatar) params.set('avatar', user.avatar);
|
|
21
|
-
|
|
22
|
-
router.push(`/oyuncular/${user.username}?${params.toString()}`);
|
|
23
|
-
};
|
|
24
|
-
|
|
25
|
-
return (
|
|
26
|
-
<div className="hidden lg:flex w-[280px] flex-col gap-6 animate-in fade-in slide-in-from-left-8 duration-700">
|
|
27
|
-
|
|
28
|
-
{/* Sıralama (Level / Popularity) Widget */}
|
|
29
|
-
<div className="glass-panel p-5 rounded-3xl border border-armoyu-card-border bg-armoyu-card-bg flex flex-col gap-4">
|
|
30
|
-
<div className="flex items-center justify-center mb-2">
|
|
31
|
-
<div className="flex bg-black/5 dark:bg-white/5 p-1 rounded-xl border border-black/5 dark:border-white/5 relative h-9 w-[140px]">
|
|
32
|
-
{/* Sliding Background */}
|
|
33
|
-
<div
|
|
34
|
-
className={`absolute inset-y-1 transition-all duration-300 ease-out bg-white dark:bg-blue-600 rounded-lg shadow-sm ${rankingType === 'level' ? 'left-1 w-[64px]' : 'left-[73px] w-[62px]'}`}
|
|
35
|
-
/>
|
|
36
|
-
<button
|
|
37
|
-
onClick={() => { setRankingType('level'); setVisibleCount(5); }}
|
|
38
|
-
className={`flex-1 text-[10px] font-black uppercase tracking-wider rounded-lg transition-all relative z-10 ${rankingType === 'level' ? 'text-blue-600 dark:text-white' : 'text-armoyu-text-muted hover:text-armoyu-text'}`}
|
|
39
|
-
>
|
|
40
|
-
Seviye
|
|
41
|
-
</button>
|
|
42
|
-
<button
|
|
43
|
-
onClick={() => { setRankingType('popularity'); setVisibleCount(5); }}
|
|
44
|
-
className={`flex-1 text-[10px] font-black uppercase tracking-wider rounded-lg transition-all relative z-10 ${rankingType === 'popularity' ? 'text-blue-600 dark:text-white' : 'text-armoyu-text-muted hover:text-armoyu-text'}`}
|
|
45
|
-
>
|
|
46
|
-
Popüler
|
|
47
|
-
</button>
|
|
48
|
-
</div>
|
|
49
|
-
</div>
|
|
50
|
-
|
|
51
|
-
<div className="space-y-3">
|
|
52
|
-
{currentRanking.map((user, idx) => {
|
|
53
|
-
const isMe = currentUser?.username === user.username;
|
|
54
|
-
return (
|
|
55
|
-
<div
|
|
56
|
-
key={idx}
|
|
57
|
-
onClick={() => goToProfile(user)}
|
|
58
|
-
className={`flex items-center justify-between group cursor-pointer p-1.5 rounded-xl transition-all ${
|
|
59
|
-
isMe
|
|
60
|
-
? 'bg-blue-600/10 border border-blue-500/30'
|
|
61
|
-
: 'hover:bg-black/5 dark:hover:bg-white/5'
|
|
62
|
-
}`}
|
|
63
|
-
>
|
|
64
|
-
<div className="flex items-center gap-3">
|
|
65
|
-
<div className="relative">
|
|
66
|
-
<img src={user.avatar} alt={user.displayName} className="w-9 h-9 rounded-full border border-black/10 dark:border-white/10 group-hover:border-blue-500 transition-colors" />
|
|
67
|
-
<div className={`absolute -top-1 -left-1 w-4 h-4 rounded-full flex items-center justify-center text-[8px] font-black text-white shadow-sm transition-transform group-hover:scale-110 ${
|
|
68
|
-
idx === 0 ? 'bg-yellow-500' :
|
|
69
|
-
idx === 1 ? 'bg-gray-400' :
|
|
70
|
-
idx === 2 ? 'bg-orange-600' :
|
|
71
|
-
'bg-armoyu-card-border text-armoyu-text-muted dark:bg-white/10 dark:text-white/60'
|
|
72
|
-
}`}>
|
|
73
|
-
{idx + 1}
|
|
74
|
-
</div>
|
|
75
|
-
</div>
|
|
76
|
-
<span className="text-sm font-bold text-armoyu-text-muted group-hover:text-armoyu-text transition-colors truncate max-w-[100px]">{user.displayName}</span>
|
|
77
|
-
</div>
|
|
78
|
-
<span className="text-[10px] font-black text-blue-500 bg-blue-500/10 px-2 py-1 rounded-md">{rankingType === 'level' ? user.level : user.popScore}</span>
|
|
79
|
-
</div>
|
|
80
|
-
);
|
|
81
|
-
})}
|
|
82
|
-
</div>
|
|
83
|
-
|
|
84
|
-
{visibleCount < allRankings.length && (
|
|
85
|
-
<button
|
|
86
|
-
onClick={() => setVisibleCount(prev => prev + 10)}
|
|
87
|
-
className="w-full pt-2 text-[11px] font-bold text-armoyu-text-muted hover:text-blue-500 transition-colors border-t border-armoyu-card-border mt-1"
|
|
88
|
-
>
|
|
89
|
-
Sıralamadan {Math.min(10, allRankings.length - visibleCount)} Kişi Daha Gör
|
|
90
|
-
</button>
|
|
91
|
-
)}
|
|
92
|
-
</div>
|
|
93
|
-
|
|
94
|
-
{/* Ekonomi Widget */}
|
|
95
|
-
<div className="glass-panel p-5 rounded-3xl border border-armoyu-card-border bg-armoyu-card-bg">
|
|
96
|
-
<div className="flex items-center gap-2 mb-4">
|
|
97
|
-
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" className="text-emerald-500"><path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path></svg>
|
|
98
|
-
<h3 className="font-extrabold text-armoyu-text text-base">Ekonomi</h3>
|
|
99
|
-
</div>
|
|
100
|
-
|
|
101
|
-
<div className="space-y-4">
|
|
102
|
-
{/* Dolar */}
|
|
103
|
-
<div className="flex items-center justify-between p-3 rounded-2xl bg-black/5 dark:bg-white/5 border border-black/5 dark:border-white/5">
|
|
104
|
-
<div className="flex items-center gap-2.5">
|
|
105
|
-
<div className="w-8 h-8 rounded-full bg-emerald-500/10 flex items-center justify-center text-emerald-600 font-black text-xs">USD</div>
|
|
106
|
-
<div>
|
|
107
|
-
<span className="block text-xs font-bold text-armoyu-text">Dolar</span>
|
|
108
|
-
<span className="block text-[10px] text-armoyu-text-muted">Merkez Bankası</span>
|
|
109
|
-
</div>
|
|
110
|
-
</div>
|
|
111
|
-
<div className="text-right">
|
|
112
|
-
<span className="block text-sm font-black text-armoyu-text">₺32.45</span>
|
|
113
|
-
<span className="flex items-center justify-end text-[10px] font-bold text-emerald-500">
|
|
114
|
-
<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" className="mr-0.5"><polyline points="18 15 12 9 6 15"></polyline></svg>
|
|
115
|
-
0.24%
|
|
116
|
-
</span>
|
|
117
|
-
</div>
|
|
118
|
-
</div>
|
|
119
|
-
|
|
120
|
-
{/* Altın */}
|
|
121
|
-
<div className="flex items-center justify-between p-3 rounded-2xl bg-black/5 dark:bg-white/5 border border-black/5 dark:border-white/5">
|
|
122
|
-
<div className="flex items-center gap-2.5">
|
|
123
|
-
<div className="w-8 h-8 rounded-full bg-yellow-500/10 flex items-center justify-center text-yellow-600 font-black text-xs">AU</div>
|
|
124
|
-
<div>
|
|
125
|
-
<span className="block text-xs font-bold text-armoyu-text">Gram Altın</span>
|
|
126
|
-
<span className="block text-[10px] text-armoyu-text-muted">Spot Piyasa</span>
|
|
127
|
-
</div>
|
|
128
|
-
</div>
|
|
129
|
-
<div className="text-right">
|
|
130
|
-
<span className="block text-sm font-black text-armoyu-text">₺2,450</span>
|
|
131
|
-
<span className="flex items-center justify-end text-[10px] font-bold text-red-500">
|
|
132
|
-
<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" className="mr-0.5 rotate-180"><polyline points="18 15 12 9 6 15"></polyline></svg>
|
|
133
|
-
0.12%
|
|
134
|
-
</span>
|
|
135
|
-
</div>
|
|
136
|
-
</div>
|
|
137
|
-
|
|
138
|
-
{/* Gümüş */}
|
|
139
|
-
<div className="flex items-center justify-between p-3 rounded-2xl bg-black/5 dark:bg-white/5 border border-black/5 dark:border-white/5 font-inter">
|
|
140
|
-
<div className="flex items-center gap-2.5">
|
|
141
|
-
<div className="w-8 h-8 rounded-full bg-slate-400/20 flex items-center justify-center text-slate-500 dark:text-slate-300 font-black text-xs">AG</div>
|
|
142
|
-
<div>
|
|
143
|
-
<span className="block text-xs font-bold text-armoyu-text">Gümüş</span>
|
|
144
|
-
<span className="block text-[10px] text-armoyu-text-muted">Spot Piyasa</span>
|
|
145
|
-
</div>
|
|
146
|
-
</div>
|
|
147
|
-
<div className="text-right">
|
|
148
|
-
<span className="block text-sm font-black text-armoyu-text">₺31.20</span>
|
|
149
|
-
<span className="flex items-center justify-end text-[10px] font-bold text-emerald-500">
|
|
150
|
-
<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" className="mr-0.5"><polyline points="18 15 12 9 6 15"></polyline></svg>
|
|
151
|
-
0.45%
|
|
152
|
-
</span>
|
|
153
|
-
</div>
|
|
154
|
-
</div>
|
|
155
|
-
</div>
|
|
156
|
-
</div>
|
|
157
|
-
|
|
158
|
-
{/* Süper Lig Puan Durumu Widget */}
|
|
159
|
-
<div className="glass-panel p-5 rounded-3xl border border-armoyu-card-border bg-armoyu-card-bg">
|
|
160
|
-
<div className="flex items-center gap-2 mb-4">
|
|
161
|
-
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" className="text-blue-500"><path d="M12 2L2 7l10 5 10-5-10-5z"></path><path d="M2 17l10 5 10-5"></path><path d="M2 12l10 5 10-5"></path></svg>
|
|
162
|
-
<h3 className="font-extrabold text-armoyu-text text-base">Süper Lig</h3>
|
|
163
|
-
</div>
|
|
164
|
-
|
|
165
|
-
<div className="space-y-3">
|
|
166
|
-
{[
|
|
167
|
-
{ team: 'Galatasaray', p: '84', color: 'bg-red-600' },
|
|
168
|
-
{ team: 'Fenerbahçe', p: '82', color: 'bg-yellow-500' },
|
|
169
|
-
{ team: 'Beşiktaş', p: '65', color: 'bg-black dark:bg-white' },
|
|
170
|
-
{ team: 'Trabzonspor', p: '60', color: 'bg-blue-600' },
|
|
171
|
-
{ team: 'Başakşehir', p: '55', color: 'bg-orange-600' },
|
|
172
|
-
].map((item, idx) => (
|
|
173
|
-
<div key={idx} className="flex items-center justify-between p-2 rounded-xl hover:bg-black/5 transition-colors">
|
|
174
|
-
<div className="flex items-center gap-2.5">
|
|
175
|
-
<span className="text-[10px] font-black text-armoyu-text-muted w-3">{idx + 1}</span>
|
|
176
|
-
<div className={`w-1.5 h-1.5 rounded-full ${item.color}`} />
|
|
177
|
-
<span className="text-xs font-bold text-armoyu-text">{item.team}</span>
|
|
178
|
-
</div>
|
|
179
|
-
<span className="text-xs font-black text-armoyu-text">{item.p}</span>
|
|
180
|
-
</div>
|
|
181
|
-
))}
|
|
182
|
-
</div>
|
|
183
|
-
|
|
184
|
-
<button className="w-full pt-3 text-[10px] font-bold text-blue-500 hover:underline border-t border-armoyu-card-border mt-3">
|
|
185
|
-
Tüm Puan Durumu
|
|
186
|
-
</button>
|
|
187
|
-
</div>
|
|
188
|
-
|
|
189
|
-
{/* Minecraft Sunucu Widget */}
|
|
190
|
-
<div className="glass-panel p-5 rounded-3xl border border-armoyu-card-border bg-armoyu-card-bg overflow-hidden relative group">
|
|
191
|
-
<div className="absolute -right-4 -top-4 w-24 h-24 bg-emerald-500/10 blur-2xl rounded-full group-hover:bg-emerald-500/20 transition-colors" />
|
|
192
|
-
|
|
193
|
-
<div className="flex items-center gap-2 mb-4 relative z-10">
|
|
194
|
-
<div className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse" />
|
|
195
|
-
<h3 className="font-extrabold text-armoyu-text text-base">Minecraft Sunucu</h3>
|
|
196
|
-
</div>
|
|
197
|
-
|
|
198
|
-
<div className="space-y-4 relative z-10">
|
|
199
|
-
<div className="flex items-center justify-between">
|
|
200
|
-
<div className="flex flex-col">
|
|
201
|
-
<span className="text-[10px] font-black uppercase tracking-widest text-armoyu-text-muted opacity-60">Sunucu Adresi</span>
|
|
202
|
-
<span className="text-sm font-bold text-armoyu-text group-hover:text-blue-500 transition-colors">mc.armoyu.com</span>
|
|
203
|
-
</div>
|
|
204
|
-
<button
|
|
205
|
-
title="IP Kopyala"
|
|
206
|
-
className="p-2 rounded-lg bg-black/5 dark:bg-white/5 border border-black/5 dark:border-white/5 hover:bg-black/10 transition-colors"
|
|
207
|
-
onClick={() => {
|
|
208
|
-
navigator.clipboard.writeText('mc.armoyu.com');
|
|
209
|
-
alert('IP Kopyalandı!');
|
|
210
|
-
}}
|
|
211
|
-
>
|
|
212
|
-
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>
|
|
213
|
-
</button>
|
|
214
|
-
</div>
|
|
215
|
-
|
|
216
|
-
<div className="flex items-center justify-between p-3 rounded-2xl bg-emerald-500/5 border border-emerald-500/10">
|
|
217
|
-
<div className="flex flex-col">
|
|
218
|
-
<span className="text-[10px] font-black text-emerald-600 dark:text-emerald-400">Aktif Oyuncu</span>
|
|
219
|
-
<span className="text-lg font-black text-emerald-600 dark:text-emerald-400">142 / 500</span>
|
|
220
|
-
</div>
|
|
221
|
-
<div className="flex -space-x-2">
|
|
222
|
-
{[1,2,3].map(i => (
|
|
223
|
-
<img key={i} src={`https://api.dicebear.com/7.x/avataaars/svg?seed=${i+99}`} className="w-7 h-7 rounded-full border-2 border-white dark:border-[#0a0a0e] bg-white/10 shadow-sm" alt="Player" />
|
|
224
|
-
))}
|
|
225
|
-
<div className="w-7 h-7 rounded-full border-2 border-white dark:border-[#0a0a0e] bg-emerald-500 flex items-center justify-center text-[8px] font-black text-white">+139</div>
|
|
226
|
-
</div>
|
|
227
|
-
</div>
|
|
228
|
-
|
|
229
|
-
<button className="w-full py-3 bg-gradient-to-r from-emerald-600 to-emerald-500 hover:from-emerald-500 hover:to-emerald-400 text-white text-xs font-black uppercase tracking-widest rounded-xl shadow-lg shadow-emerald-500/20 transition-all active:scale-[0.98]">
|
|
230
|
-
Sunucuya Giriş Yap
|
|
231
|
-
</button>
|
|
232
|
-
</div>
|
|
233
|
-
</div>
|
|
234
|
-
|
|
235
|
-
</div>
|
|
236
|
-
);
|
|
237
|
-
}
|
|
@@ -1,69 +0,0 @@
|
|
|
1
|
-
import React, { useState } from 'react';
|
|
2
|
-
import { MOCK_STORIES } from '../../../lib/constants/seedData';
|
|
3
|
-
import { StoryViewer } from './StoryViewer';
|
|
4
|
-
import { Story } from '@armoyu/core';
|
|
5
|
-
|
|
6
|
-
export function Stories() {
|
|
7
|
-
const [activeStoryIndex, setActiveStoryIndex] = useState<number | null>(null);
|
|
8
|
-
|
|
9
|
-
return (
|
|
10
|
-
<div className="w-full bg-armoyu-card-bg border border-armoyu-card-border rounded-3xl p-4 shadow-sm overflow-hidden mb-6">
|
|
11
|
-
<div className="flex gap-4 overflow-x-auto no-scrollbar pb-1 px-1">
|
|
12
|
-
{MOCK_STORIES.map((story, idx) => (
|
|
13
|
-
<StoryItem
|
|
14
|
-
key={story.id}
|
|
15
|
-
story={story}
|
|
16
|
-
onClick={() => setActiveStoryIndex(idx)}
|
|
17
|
-
/>
|
|
18
|
-
))}
|
|
19
|
-
</div>
|
|
20
|
-
|
|
21
|
-
{activeStoryIndex !== null && (
|
|
22
|
-
<StoryViewer
|
|
23
|
-
stories={MOCK_STORIES}
|
|
24
|
-
initialStoryIndex={activeStoryIndex}
|
|
25
|
-
onClose={() => setActiveStoryIndex(null)}
|
|
26
|
-
/>
|
|
27
|
-
)}
|
|
28
|
-
</div>
|
|
29
|
-
);
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
function StoryItem({ story, onClick }: { story: Story, onClick: () => void }) {
|
|
33
|
-
return (
|
|
34
|
-
<div
|
|
35
|
-
className="flex flex-col items-center gap-1.5 shrink-0 cursor-pointer group select-none"
|
|
36
|
-
onClick={onClick}
|
|
37
|
-
>
|
|
38
|
-
<div className="relative">
|
|
39
|
-
{/* Story Circle Border */}
|
|
40
|
-
<div className={`p-[3px] rounded-full transition-transform group-hover:scale-105 active:scale-95 ${story.hasUnseen
|
|
41
|
-
? 'bg-gradient-to-tr from-[#f9ce34] via-[#ee2a7b] to-[#6228d7]'
|
|
42
|
-
: story.isMe
|
|
43
|
-
? 'bg-transparent'
|
|
44
|
-
: 'bg-armoyu-card-border'
|
|
45
|
-
}`}>
|
|
46
|
-
<div className="bg-armoyu-card-bg p-[2px] rounded-full">
|
|
47
|
-
<img
|
|
48
|
-
src={story.user?.avatar}
|
|
49
|
-
alt={story.user?.username}
|
|
50
|
-
className={`w-14 h-14 md:w-16 md:h-16 rounded-full border border-black/5 dark:border-white/10 object-cover ${!story.hasUnseen && !story.isMe ? 'grayscale-[0.5] opacity-80' : ''}`}
|
|
51
|
-
/>
|
|
52
|
-
</div>
|
|
53
|
-
</div>
|
|
54
|
-
|
|
55
|
-
{/* Plus Icon for 'My Story' */}
|
|
56
|
-
{story.isMe && (
|
|
57
|
-
<div className="absolute bottom-0 right-0 w-5 h-5 bg-blue-500 rounded-full border-2 border-armoyu-card-bg flex items-center justify-center text-white">
|
|
58
|
-
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
|
|
59
|
-
</div>
|
|
60
|
-
)}
|
|
61
|
-
</div>
|
|
62
|
-
|
|
63
|
-
<span className={`text-[11px] md:text-xs font-bold truncate w-16 md:w-20 text-center transition-colors ${story.hasUnseen ? 'text-armoyu-text' : 'text-armoyu-text-muted'}`}>
|
|
64
|
-
{story.isMe ? 'Hikayen' : story.user?.displayName || story.user?.username}
|
|
65
|
-
</span>
|
|
66
|
-
</div>
|
|
67
|
-
);
|
|
68
|
-
}
|
|
69
|
-
|