blob: 3057d61c9215ad1b53cfa2a73aa6734158d309d1 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
|
import { useState } from "react";
import { getGameTitle } from "../utils.ts";
export interface NewsData {
date: string;
identifier: string;
type: string | null;
timestamp: number;
headline: string | null;
content: string;
url: string | null;
images: Array<{
image: string;
link: string | null;
}>;
en_headline: string | null;
en_content: string | null;
}
interface NewsFeedProps {
newsItems: NewsData[];
}
export const NewsFeed: React.FC<NewsFeedProps> = ({ newsItems }) => {
// Track which items are showing English content
const [showEnglish, setShowEnglish] = useState<Record<string, boolean>>({});
// Toggle language for a specific news item
const toggleLanguage = (itemId: string) => {
setShowEnglish(prev => ({
...prev,
[itemId]: !prev[itemId]
}));
};
return (
<div className="max-w-[600px] w-full mx-auto py-8 space-y-4">
{newsItems.map((news) => {
const formattedDate = new Date(news.timestamp * 1000).toLocaleDateString("ja-JP", {
year: "numeric",
month: "2-digit",
day: "2-digit",
});
const gameId = news.identifier;
const newsId = `${news.identifier}-${news.timestamp}-${news.content.substring(0, 20)}`;
const isEnglish = showEnglish[newsId] || false;
const hasTranslation = news.en_headline || news.en_content;
// Choose content based on language selection
const displayHeadline = isEnglish && news.en_headline ? news.en_headline : news.headline;
const displayContent = isEnglish && news.en_content ? news.en_content : news.content;
return (
<div
key={newsId}
className="bg-gray-900 border border-gray-800 rounded-lg shadow-lg overflow-hidden"
>
{/* Header (Game Icon + Info) */}
<div className="flex items-center p-3 justify-between">
<div className="flex items-center space-x-3">
{/* Game Icon */}
<div className="bg-purple-700 rounded-full h-8 w-8 flex items-center justify-center text-white text-xs font-bold flex-shrink-0">
{gameId.substring(0, 1)}
</div>
<div className="flex flex-col leading-tight">
<span className="text-sm font-semibold text-gray-200">
{getGameTitle(news.identifier)}
</span>
<span className="text-xs text-gray-400">
{formattedDate}
</span>
{/* Display News Type */}
{news.type && (
<span className="text-xs text-gray-500 italic bold">
{news.type}
</span>
)}
</div>
</div>
{/* Language Toggle Button */}
{hasTranslation && (
<button
onClick={() => toggleLanguage(newsId)}
className="text-xs bg-gray-800 hover:bg-gray-700 text-gray-300 py-1 px-2 rounded"
>
{isEnglish ? "View Original" : "View in English"}
</button>
)}
</div>
{/* Content Area */}
<div className="px-3 pt-1 pb-3">
{/* Headline */}
{displayHeadline && (
<p className="font-semibold text-white text-sm mb-2">
{displayHeadline}
</p>
)}
{/* Content */}
<p className="text-sm text-gray-200 whitespace-pre-line mb-2">
{displayContent.split(/(\[.*?\]\(.*?\)|https?:\/\/[^\s]+)/g).map((part, index) => {
const match = part.match(/\[(.*?)\]\((.*?)\)/);
const urlMatch = part.match(/https?:\/\/[^\s]+/);
if (match) {
return (
<a key={index} href={match[2]} target="_blank" rel="noopener noreferrer" className="text-blue-400 hover:underline">
{match[1]}
</a>
);
} else if (urlMatch) {
return (
<a key={index} href={urlMatch[0]} target="_blank" rel="noopener noreferrer" className="text-blue-400 hover:underline">
{urlMatch[0]}
</a>
);
}
return part;
})}
</p>
</div>
{/* Post Image(s) */}
<div className="w-full">
{news.images.map((img, i) => (
img.link ? (
<a
key={i}
href={img.link}
target="_blank"
rel="noopener noreferrer"
className="block hover:opacity-75"
>
<img
src={img.image}
alt="news visual"
className="w-full object-cover py-2"
/>
</a>
) : (
<div key={i} className="block">
<img
src={img.image}
alt="news visual"
className="w-full object-cover py-2"
/>
</div>
)
))}
</div>
{/* Footer with Read More Link */}
{news.url && (
<div className="px-3 py-2 bg-gray-800 text-center">
<a
href={news.url}
target="_blank"
rel="noopener noreferrer"
className="text-gray-300 text-sm hover:text-white inline-flex items-center font-bold underline"
>
READ MORE
</a>
</div>
)}
</div>
);
})}
</div>
);
};
|
