pstream is dead; long live pstream
taciturnaxolotl.github.io/pstream-ng/
use Button component
+18
-12
+18
-12
src/components/media/MediaCard.tsx
+18
-12
src/components/media/MediaCard.tsx
···
11
11
import { MediaItem } from "@/utils/mediaTypes";
12
12
13
13
import { MediaBookmarkButton } from "./MediaBookmark";
14
+
import { Button } from "../buttons/Button";
14
15
import { IconPatch } from "../buttons/IconPatch";
15
16
import { Icon, Icons } from "../Icon";
16
17
···
91
92
dotListContent.push(t("media.unreleased"));
92
93
}
93
94
94
-
const handleMoreInfoClick = (e: React.MouseEvent<HTMLButtonElement>) => {
95
+
const handleMoreInfoClick = (
96
+
e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>,
97
+
) => {
95
98
e.preventDefault();
96
99
97
100
const searchParam = encodeURIComponent(encodeURI(media.id));
···
103
106
window.open(url, "_blank");
104
107
};
105
108
106
-
const handleCopyClick = (event: React.MouseEvent<HTMLButtonElement>) => {
107
-
event.preventDefault();
109
+
const handleCopyClick = (
110
+
e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>,
111
+
) => {
112
+
e.preventDefault();
108
113
copyToClipboard(link);
109
114
setHasCopied(true);
110
115
setTimeout(() => setHasCopied(false), 2000);
···
231
236
{overlayVisible ? (
232
237
<div>
233
238
<div className="absolute inset-0 flex flex-col items-center justify-start gap-y-2 pt-8 md:pt-12">
234
-
<button
235
-
type="button"
239
+
<Button
240
+
theme="secondary"
236
241
className={classNames(
237
242
"w-[86%] md:w-[90%] h-12 rounded-lg px-4 py-2 my-1 transition-transform hover:scale-105 duration-100", // Button Size & Hover
238
243
"text-md text-white flex items-center justify-center", // Centering Content
···
242
247
onClick={handleMoreInfoClick}
243
248
>
244
249
More Info
245
-
</button>
250
+
</Button>
246
251
247
252
{canLink ? (
248
-
<button
249
-
type="button"
253
+
<Button
254
+
theme="secondary"
250
255
className={classNames(
251
256
"w-[86%] md:w-[90%] h-12 rounded-lg px-4 py-2 my-1 transition-transform hover:scale-105 duration-100", // Button Size & Hover
252
257
"text-md text-white flex items-center justify-center", // Centering Content
253
258
"bg-gray-200 bg-opacity-15 hover:bg-gray-400 hover:bg-opacity-25 backdrop-blur-md bg-blend-difference", // Background
254
259
"border-2 border-gray-400 border-opacity-20", // Border
255
260
)}
261
+
href={link}
256
262
onClick={handleCopyClick}
257
263
>
258
264
{hasCopied ? (
···
263
269
) : (
264
270
"Copy Link"
265
271
)}
266
-
</button>
272
+
</Button>
267
273
) : null}
268
274
269
-
<button
270
-
type="button"
275
+
<Button
276
+
theme="secondary"
271
277
className={classNames(
272
278
"w-[86%] md:w-[90%] h-12 rounded-lg px-4 py-2 my-1 transition-transform hover:scale-105 duration-100", // Button Size & Hover
273
279
"text-md text-white flex items-center justify-center", // Centering Content
···
277
283
onClick={() => setOverlayVisible(false)}
278
284
>
279
285
Close
280
-
</button>
286
+
</Button>
281
287
</div>
282
288
</div>
283
289
) : null}