'disc not found' fix

src/app/@modal/default.tsx

@@ -1,9 +1,5 @@
+import { DiscNotFound } from "@components";
+
 export default function Default() {
-	return (
-		<div className="disc-detail-container">
-			<div className="disc-detail-not-found">
-				<p>Disc not found!</p>
-			</div>
-		</div>
-	);
+	return <DiscNotFound />;
 }

src/components/DiscDetail.tsx

@@ -45,9 +45,11 @@ export const DiscDetail = ({ name_slug }: DiscDetailProps) => {
 						{fade}
 					</div>
 				</div>
-				<div className="disc-detail-img-container">
-					<Image src={pic} alt={name} width={400} height={340} className="disc-detail-img" />
-				</div>
+				{pic && (
+					<div className="disc-detail-img-container">
+						<Image src={pic} alt={name} width={400} height={340} className="disc-detail-img" />
+					</div>
+				)}
 			</div>
 		</div>
 	);

src/components/DiscNotFound.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import { useParams } from "next/navigation";
+import { useContext } from "react";
+
+import { DiscContext } from "@components";
+
+export const DiscNotFound = () => {
+	const { name_slug } = useParams();
+	const { discs } = useContext(DiscContext);
+	if (!name_slug || discs.find(disc => disc.name_slug === name_slug)) return null;
+	return (
+		<div className="disc-detail-container">
+			<div className="disc-detail-not-found">
+				<div>Disc not found!</div>
+			</div>
+		</div>
+	);
+};

src/components/index.ts

@@ -5,6 +5,7 @@ export * from "./DiscCount";
 export * from "./DiscDetail";
 export * from "./DiscGrid";
 export * from "./DiscModal";
+export * from "./DiscNotFound";
 export * from "./Filters";
 export * from "./Header";
 export * from "./Home";