trafficlunar/tomodachi-share
1
0
Fork 0
mirror of https://github.com/trafficlunar/tomodachi-share.git synced 2026-05-13 13:17:45 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: react error 482

Browse source
This commit is contained in:
trafficlunar 2026-04-17 17:04:15 +01:00
parent ae266d5aa0
commit 46202b22b0
2 changed files with 48 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

84
frontend/src/components/description.tsx
View file

@ -1,42 +1,42 @@
import { Icon } from "@iconify/react";
interface Props {
text: string;
className?: string;
}
// Adds fancy formatting to links
export default function Description({ text, className }: Props) {
const urlRegex = /(https?:\/\/[^\s]+)/g;
const parts = text.split(urlRegex);
return (
<p className={`text-sm mt-2 bg-white/50 p-3 rounded-lg border border-orange-200 whitespace-break-spaces max-h-54 overflow-y-auto ${className}`}>
{parts.map(async (part, index) => {
try {
// Check if it's a URL
if (!urlRegex.test(part)) throw new Error("Not a URL");
const url = new URL(part);
return (
<a
key={index}
href={`/out?url=${encodeURIComponent(part)}`}
target="_blank"
className="text-blue-700 underline break-all ml-1 inline-flex items-center group"
title={`Go to ${url.hostname}`}
>
{url.hostname}
{url.pathname !== "/" ? url.pathname : ""}
{url.search}
<Icon icon="mi:arrow-right-up" fontSize={16} className="transition group-hover:translate-x-0.5 group-hover:-translate-y-0.5" />
</a>
);
} catch {
// Normal text/Invalid URL fallback
return <span key={index}>{part}</span>;
}
})}
</p>
);
}
import { Icon } from "@iconify/react";
interface Props {
text: string;
className?: string;
}
// Adds fancy formatting to links
export default function Description({ text, className }: Props) {
const urlRegex = /(https?:\/\/[^\s]+)/g;
const parts = text.split(urlRegex);
return (
<p className={`text-sm mt-2 bg-white/50 p-3 rounded-lg border border-orange-200 whitespace-break-spaces max-h-54 overflow-y-auto ${className}`}>
{parts.map((part, index) => {
try {
// Check if it's a URL
if (!urlRegex.test(part)) throw new Error("Not a URL");
const url = new URL(part);
return (
<a
key={index}
href={`/out?url=${encodeURIComponent(part)}`}
target="_blank"
className="text-blue-700 underline break-all ml-1 inline-flex items-center group"
title={`Go to ${url.hostname}`}
>
{url.hostname}
{url.pathname !== "/" ? url.pathname : ""}
{url.search}
<Icon icon="mi:arrow-right-up" fontSize={16} className="transition group-hover:translate-x-0.5 group-hover:-translate-y-0.5" />
</a>
);
} catch {
// Normal text/Invalid URL fallback
return <span key={index}>{part}</span>;
}
})}
</p>
);
}

11
frontend/src/pages/mii.tsx
View file

@ -1,6 +1,6 @@
import type { SwitchMiiInstructions } from "@tomodachi-share/shared";
// import ImageViewer from "../components/image-viewer";
import ImageViewer from "../components/image-viewer";
import LikeButton from "../components/like-button";
import Description from "../components/description";
import ShareMiiButton from "../components/mii/share-mii-button";
@ -64,7 +64,7 @@ export default function MiiPage() {
<div className="bg-amber-50 rounded-3xl border-2 border-amber-500 shadow-lg p-4 h-min flex flex-col items-center max-w-md w-full max-md:place-self-center max-md:row-start-2">
{/* Mii Image */}
<div className="bg-linear-to-b from-amber-100 to-amber-200 overflow-hidden rounded-xl w-full mb-4 flex justify-center">
<img
<ImageViewer
src={`${API_URL}/mii/${mii.id}/image?type=mii`}
alt="mii headshot"
width={250}
@ -75,7 +75,7 @@ export default function MiiPage() {
{/* QR Code */}
{mii.platform === "THREE_DS" ? (
<div className="bg-amber-200 overflow-hidden rounded-xl w-full mb-4 flex justify-center p-2">
<img
<ImageViewer
src={`${API_URL}/mii/${mii.id}/image?type=qr-code`}
alt="mii qr code"
width={128}
@ -84,7 +84,7 @@ export default function MiiPage() {
/>
</div>
) : (
<img
<ImageViewer
src={`${API_URL}/mii/${mii.id}/image?type=features`}
alt="mii features"
width={300}
@ -348,12 +348,13 @@ export default function MiiPage() {
className="absolute size-full blur-sm contrast-150 brightness-[0.65] object-cover"
/>
<img
<ImageViewer
src={src}
alt="mii screenshot"
width={256}
height={170}
className="aspect-3/2 w-full object-contain hover:scale-105 duration-300 transition-transform relative z-10"
images={images}
/>
</div>
))}