@tulip-systems/core 0.5.8 → 0.5.9

package/src/components/layouts/admin-error-pages.tsx

@@ -0,0 +1,109 @@
+import { ServerError } from "@/modules/router/lib/error.server";
+import { CommonORPCErrorCode } from "@orpc/client";
+import { Header } from "../header/header.client";
+import { Topbar, TopbarTitle } from "../header/top-bar.client";
+import {
+  DefaultErrorSection,
+  NotAllowedSection,
+  NotFoundSection,
+  ServerErrorSection,
+} from "./error-sections";
+
+/**
+ * Admin Not Found Page
+ */
+export function AdminNotFoundPage() {
+  return (
+    <>
+      <Header>
+        <Topbar>
+          <TopbarTitle breadcrumbs={[{ label: "404" }]} />
+        </Topbar>
+      </Header>
+
+      <div className="p-content">
+        <NotFoundSection className="min-h-[calc(100dvh-var(--header-top-bar-height)-var(--content)-var(--content))]" />
+      </div>
+    </>
+  );
+}
+
+/**
+ * Admin Not Allowed Page
+ */
+export function AdminNotAllowedPage() {
+  return (
+    <>
+      <Header>
+        <Topbar>
+          <TopbarTitle breadcrumbs={[{ label: "Unauthorized" }]} />
+        </Topbar>
+      </Header>
+
+      <div className="p-content">
+        <NotAllowedSection className="min-h-[calc(100dvh-var(--header-top-bar-height)-var(--content)-var(--content))]" />
+      </div>
+    </>
+  );
+}
+
+/**
+ * ErrorPage
+ * - If the error is a ServerError and the code is "UNAUTHORIZED", show the NotAllowedPage
+ * - If the error is a ServerError and the code is "NOT_FOUND", show the NotFoundSection
+ * - Else show the ErrorPage
+ */
+export function AdminErrorPage(props: { error: Error }) {
+  const serverErrorCode: CommonORPCErrorCode =
+    props.error instanceof ServerError ? props.error.code : undefined;
+
+  /**
+   * If the error is a ServerError and the code is "UNAUTHORIZED", show the NotAllowedPage
+   */
+  if (serverErrorCode === "UNAUTHORIZED") {
+    return <AdminNotAllowedPage />;
+  }
+
+  /**
+   * If the error is a ServerError and the code is "UNAUTHORIZED", show the NotAllowedPage
+   */
+  if (serverErrorCode === "NOT_FOUND") {
+    return <AdminNotFoundPage />;
+  }
+
+  /**
+   * If the error is a ServerError and the code is "UNAUTHORIZED", show the NotAllowedPage
+   */
+  if (serverErrorCode === "INTERNAL_SERVER_ERROR") {
+    return (
+      <>
+        <Header>
+          <Topbar>
+            <TopbarTitle breadcrumbs={[{ label: "Server Error" }]} />
+          </Topbar>
+        </Header>
+
+        <div className="p-content">
+          <ServerErrorSection className="min-h-[calc(100dvh-var(--header-top-bar-height)-var(--content)-var(--content))]" />
+        </div>
+      </>
+    );
+  }
+
+  /**
+   * Else show the ErrorPage
+   */
+  return (
+    <>
+      <Header>
+        <Topbar>
+          <TopbarTitle breadcrumbs={[{ label: "Error" }]} />
+        </Topbar>
+      </Header>
+
+      <div className="p-content">
+        <DefaultErrorSection className="min-h-[calc(100dvh-var(--header-top-bar-height)-var(--content)-var(--content))]" />
+      </div>
+    </>
+  );
+}

package/src/components/layouts/empty-page.tsx

@@ -40,20 +40,3 @@ export function EmptyPageDescription({ className, children, ...props }: Componen
     </p>
   );
 }
-
-{
-  /* <div className="flex h-full flex-col place-items-center justify-center space-y-6 border border-dashed">
-        <span className="space-y-2 text-center">
-          <h2 className="text-2xl font-bold tracking-tight">{title}</h2>
-          {description && (
-            <p className="text-muted-foreground max-w-[40ch] text-sm">{description}</p>
-          )}
-        </span>
-
-        {callToAction && (
-          <Link href={callToAction.href} className={cn(buttonVariants({ variant: "default" }))}>
-            {callToAction.title}
-          </Link>
-        )}
-      </div> */
-}

package/src/components/layouts/error-page.tsx

@@ -1,61 +1,75 @@
 import { cn } from "@/lib/utils/cn";
-import { ServerError } from "@/modules/router/lib/error.server";
-import { CommonORPCErrorCode } from "@orpc/client";
-import { BugIcon } from "lucide-react";
+import { BugIcon, ServerCrashIcon, ShieldBanIcon } from "lucide-react";
 import { ComponentProps } from "react";
-import { NotAllowedPage } from "./not-allowed-page";
-import { NotFoundSection } from "./not-found-section";
 
 /**
  * ErrorPage
  */
-export function ErrorPage({ className, ...props }: ComponentProps<"div">) {
+export function ErrorPage({ className, children, ...props }: ComponentProps<"div">) {
   return (
-    <div {...props} className={cn("relative z-0 grid h-dvh w-full place-items-center", className)}>
-      <div className="flex flex-col items-center gap-12 text-center">
-        <span className="text-destructive flex flex-col items-center gap-2">
-          <BugIcon className="size-20 xl:size-32" />
-          <h1 className="text-2xl font-bold lg:text-3xl">Oeps, er is iets fout gegaan.</h1>
-        </span>
-      </div>
+    <div
+      {...props}
+      className={cn(
+        "min-h-120 flex h-full w-full flex-col items-center justify-center gap-y-3 border border-dashed text-center",
+        className,
+      )}
+    >
+      {children}
     </div>
   );
 }
 
 /**
- * ErrorPage
- * - If the error is a ServerError and the code is "UNAUTHORIZED", show the NotAllowedPage
- * - If the error is a ServerError and the code is "NOT_FOUND", show the NotFoundSection
- * - Else show the ErrorPage
+ * ErrorPageCode
  */
-export function AdminErrorPage(props: { error: Error }) {
-  const serverErrorCode: CommonORPCErrorCode =
-    props.error instanceof ServerError ? props.error.code : undefined;
+export function ErrorPageCode({ className, children, ...props }: ComponentProps<"h2">) {
+  return (
+    <h2 className={cn("text-9xl font-bold leading-none", className)} {...props}>
+      {children}
+    </h2>
+  );
+}
 
-  /**
-   * If the error is a ServerError and the code is "UNAUTHORIZED", show the NotAllowedPage
-   */
-  if (serverErrorCode === "UNAUTHORIZED") {
-    return (
-      <div className="p-content h-dvh">
-        <NotAllowedPage className="h-full" />
-      </div>
-    );
-  }
+/**
+ * ErrorPageIcon
+ */
+const errorPageIcons = {
+  serverError: ServerCrashIcon,
+  notAllowed: ShieldBanIcon,
+  default: BugIcon,
+  // 404: BombIcon,
+};
 
-  /**
-   * If the error is a ServerError and the code is "UNAUTHORIZED", show the NotAllowedPage
-   */
-  if (serverErrorCode === "NOT_FOUND") {
-    return (
-      <div className="relative z-0 grid h-dvh w-full place-items-center">
-        <NotFoundSection href="/admin" />
-      </div>
-    );
-  }
+export function ErrorPageIcon({
+  variant = "default",
+  className,
+  ...props
+}: ComponentProps<"svg"> & { variant?: keyof typeof errorPageIcons }) {
+  const Icon = errorPageIcons[variant];
 
-  /**
-   * Else show the ErrorPage
-   */
-  return <ErrorPage />;
+  return <Icon className={cn("size-16 xl:size-24", className)} {...props} />;
 }
+
+/**
+ * ErrorPageDescription
+ */
+export function ErrorPageDescription({ className, children, ...props }: ComponentProps<"p">) {
+  return (
+    <p className={cn("text-2xl font-bold lg:text-3xl", className)} {...props}>
+      {children}
+    </p>
+  );
+}
+
+// export function ErrorPage({ className, ...props }: ComponentProps<"div">) {
+//   return (
+//     <div {...props} className={cn("relative z-0 grid w-full place-items-center", className)}>
+//       <div className="flex flex-col items-center gap-12 text-center">
+//         <span className="text-destructive flex flex-col items-center gap-2">
+//           <BugIcon className="size-20 xl:size-32" />
+//           <h1 className="text-2xl font-bold lg:text-3xl">Oeps, er is iets fout gegaan.</h1>
+//         </span>
+//       </div>
+//     </div>
+//   );
+// }

package/src/components/layouts/error-sections.tsx

@@ -0,0 +1,52 @@
+import { cn } from "@/lib/utils/cn";
+import { ComponentProps } from "react";
+import { ErrorPage, ErrorPageCode, ErrorPageDescription, ErrorPageIcon } from "./error-page";
+
+/**
+ * DefaultErrorSection
+ */
+export function DefaultErrorSection({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <ErrorPage {...props} className={cn("text-destructive", className)}>
+      {/* <BugIcon className="size-16 xl:size-24" /> */}
+      <ErrorPageIcon variant="default" />
+      <ErrorPageDescription>Oeps, er is iets fout gegaan</ErrorPageDescription>
+    </ErrorPage>
+  );
+}
+
+/**
+ * ServerErrorSection
+ */
+export function ServerErrorSection({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <ErrorPage {...props} className={cn("text-destructive", className)}>
+      <ErrorPageIcon variant="serverError" />
+      <ErrorPageDescription>Oeps, er is iets fout gegaan met de server</ErrorPageDescription>
+    </ErrorPage>
+  );
+}
+
+/**
+ * NotFoundSection
+ */
+export function NotFoundSection(props: ComponentProps<"div">) {
+  return (
+    <ErrorPage {...props}>
+      <ErrorPageCode>404</ErrorPageCode>
+      <ErrorPageDescription>Oeps, deze pagina is niet gevonden.</ErrorPageDescription>
+    </ErrorPage>
+  );
+}
+
+/**
+ * Not Allowed Section
+ */
+export function NotAllowedSection(props: ComponentProps<"div">) {
+  return (
+    <ErrorPage {...props}>
+      <ErrorPageIcon variant="notAllowed" />
+      <ErrorPageDescription>Je hebt geen toegang tot deze pagina.</ErrorPageDescription>
+    </ErrorPage>
+  );
+}

package/src/components/layouts/root-error-pages.tsx

@@ -0,0 +1,12 @@
+import { NotFoundSection } from "./error-sections";
+
+/**
+ * Admin Not Found Page
+ */
+export function RootNotFoundPage() {
+  return (
+    <div className="relative z-0 grid h-dvh w-full place-items-center">
+      <NotFoundSection className="h-full" />
+    </div>
+  );
+}

package/src/modules/data-tables/lib/converters/search.ts

@@ -1,4 +1,4 @@
-import { type SQL, ilike, or } from "drizzle-orm";
+import { type SQL, ilike, or, sql } from "drizzle-orm";
 import type { PgColumn } from "drizzle-orm/pg-core";
 import { TableQuerySchema } from "../validators";
 
@@ -16,7 +16,7 @@ export function convertSearchToQueryParams(
   if (!search) return undefined;
 
   // create an array of search fields with the search query applied
-  const searchFields = fields.map((field) => ilike(field, `%${search}%`));
+  const searchFields = fields.map((field) => ilike(sql`${field}::text`, `%${search}%`));
 
   // return the query with the search fields
   return or(...searchFields);

package/dist/components/layouts/not-allowed-page.d.mts

@@ -1,22 +0,0 @@
-import * as react_jsx_runtime247 from "react/jsx-runtime";
-import { HTMLAttributes } from "react";
-import { Route } from "next";
-
-//#region src/components/layouts/not-allowed-page.d.ts
-type NotAllowedPageProps = HTMLAttributes<HTMLDivElement> & {
-  title?: string;
-  description?: string;
-  callToAction?: {
-    href: Route;
-    title: string;
-  };
-};
-declare function NotAllowedPage({
-  title,
-  description,
-  callToAction,
-  ...props
-}: NotAllowedPageProps): react_jsx_runtime247.JSX.Element;
-//#endregion
-export { NotAllowedPage, NotAllowedPageProps };
-//# sourceMappingURL=not-allowed-page.d.mts.map

package/dist/components/layouts/not-allowed-page.d.mts.map

@@ -1 +0,0 @@
-{"version":3,"file":"not-allowed-page.d.mts","names":[],"sources":["../../../src/components/layouts/not-allowed-page.tsx"],"sourcesContent":[],"mappings":";;;;;KAOY,mBAAA,GAAsB,eAAe;;;EAArC,YAAA,CAAA,EAAA;IAAqC,IAAA,EAIvC,KAJuC;IAAf,KAAA,EAAA,MAAA;EAIxB,CAAA;CAAK;AAKC,iBAAA,cAAA,CAAc;EAAA,KAAA;EAAA,WAAA;EAAA,YAAA;EAAA,GAAA;AAAA,CAAA,EAK3B,mBAL2B,CAAA,EAKR,oBAAA,CAAA,GAAA,CAAA,OALQ"}

package/dist/components/layouts/not-allowed-page.mjs

@@ -1,25 +0,0 @@
-import { cn } from "../../lib/utils/cn.mjs";
-import { EmptyPage, EmptyPageDescription, EmptyPageTitle } from "./empty-page.mjs";
-import { buttonVariants } from "../ui/button.mjs";
-import { jsx, jsxs } from "react/jsx-runtime";
-import Link from "next/link";
-
-//#region src/components/layouts/not-allowed-page.tsx
-function NotAllowedPage({ title, description, callToAction, ...props }) {
-	return /* @__PURE__ */ jsxs(EmptyPage, {
-		...props,
-		children: [
-			/* @__PURE__ */ jsx(EmptyPageTitle, { children: title ?? "Geen toegang" }),
-			/* @__PURE__ */ jsx(EmptyPageDescription, { children: description ?? "Je hebt geen toegang tot deze pagina." }),
-			callToAction && /* @__PURE__ */ jsx(Link, {
-				href: callToAction.href,
-				className: cn(buttonVariants({ variant: "default" })),
-				children: callToAction.title
-			})
-		]
-	});
-}
-
-//#endregion
-export { NotAllowedPage };
-//# sourceMappingURL=not-allowed-page.mjs.map

package/dist/components/layouts/not-allowed-page.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"not-allowed-page.mjs","names":[],"sources":["../../../src/components/layouts/not-allowed-page.tsx"],"sourcesContent":["import { cn } from \"@/lib/utils/cn\";\nimport type { Route } from \"next\";\nimport Link from \"next/link\";\nimport type { HTMLAttributes } from \"react\";\nimport { buttonVariants } from \"../ui/button\";\nimport { EmptyPage, EmptyPageDescription, EmptyPageTitle } from \"./empty-page\";\n\nexport type NotAllowedPageProps = HTMLAttributes<HTMLDivElement> & {\n  title?: string;\n  description?: string;\n  callToAction?: {\n    href: Route;\n    title: string;\n  };\n};\n\nexport function NotAllowedPage({\n  title,\n  description,\n  callToAction,\n  ...props\n}: NotAllowedPageProps) {\n  return (\n    <EmptyPage {...props}>\n      <EmptyPageTitle>{title ?? \"Geen toegang\"}</EmptyPageTitle>\n      <EmptyPageDescription>\n        {description ?? \"Je hebt geen toegang tot deze pagina.\"}\n      </EmptyPageDescription>\n\n      {callToAction && (\n        <Link href={callToAction.href} className={cn(buttonVariants({ variant: \"default\" }))}>\n          {callToAction.title}\n        </Link>\n      )}\n    </EmptyPage>\n  );\n}\n\n// <EmptyPage\n//   {...props}\n//   title={title ?? \"Geen toegang\"}\n//   description={description ?? \"Je hebt geen toegang tot deze pagina.\"}\n//   callToAction={callToAction ?? { href: \"/admin\", title: \"Terug naar dashboard\" }}\n// />\n"],"mappings":";;;;;;;AAgBA,SAAgB,eAAe,EAC7B,OACA,aACA,cACA,GAAG,SACmB;AACtB,QACE,qBAAC;EAAU,GAAI;;GACb,oBAAC,4BAAgB,SAAS,iBAAgC;GAC1D,oBAAC,kCACE,eAAe,0CACK;GAEtB,gBACC,oBAAC;IAAK,MAAM,aAAa;IAAM,WAAW,GAAG,eAAe,EAAE,SAAS,WAAW,CAAC,CAAC;cACjF,aAAa;KACT;;GAEC"}

package/dist/components/layouts/not-found-page.d.mts

@@ -1,8 +0,0 @@
-import * as react_jsx_runtime248 from "react/jsx-runtime";
-
-//#region src/components/layouts/not-found-page.d.ts
-declare function AdminNotFoundPage(): react_jsx_runtime248.JSX.Element;
-declare function NotFoundPage(): react_jsx_runtime248.JSX.Element;
-//#endregion
-export { AdminNotFoundPage, NotFoundPage };
-//# sourceMappingURL=not-found-page.d.mts.map

package/dist/components/layouts/not-found-page.d.mts.map

@@ -1 +0,0 @@
-{"version":3,"file":"not-found-page.d.mts","names":[],"sources":["../../../src/components/layouts/not-found-page.tsx"],"sourcesContent":[],"mappings":";;;iBAEgB,iBAAA,CAAA,GAAiB,oBAAA,CAAA,GAAA,CAAA;iBAQjB,YAAA,CAAA,GAAY,oBAAA,CAAA,GAAA,CAAA"}

package/dist/components/layouts/not-found-page.mjs

@@ -1,20 +0,0 @@
-import { NotFoundSection } from "./not-found-section.mjs";
-import { jsx } from "react/jsx-runtime";
-
-//#region src/components/layouts/not-found-page.tsx
-function AdminNotFoundPage() {
-	return /* @__PURE__ */ jsx("div", {
-		className: "relative z-0 grid h-[100dvh] w-full place-items-center",
-		children: /* @__PURE__ */ jsx(NotFoundSection, { href: "/admin" })
-	});
-}
-function NotFoundPage() {
-	return /* @__PURE__ */ jsx("div", {
-		className: "relative z-0 grid h-[100dvh] w-full place-items-center",
-		children: /* @__PURE__ */ jsx(NotFoundSection, {})
-	});
-}
-
-//#endregion
-export { AdminNotFoundPage, NotFoundPage };
-//# sourceMappingURL=not-found-page.mjs.map

package/dist/components/layouts/not-found-page.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"not-found-page.mjs","names":[],"sources":["../../../src/components/layouts/not-found-page.tsx"],"sourcesContent":["import { NotFoundSection } from \"./not-found-section\";\n\nexport function AdminNotFoundPage() {\n  return (\n    <div className=\"relative z-0 grid h-[100dvh] w-full place-items-center\">\n      <NotFoundSection href=\"/admin\" />\n    </div>\n  );\n}\n\nexport function NotFoundPage() {\n  return (\n    <div className=\"relative z-0 grid h-[100dvh] w-full place-items-center\">\n      <NotFoundSection />\n    </div>\n  );\n}\n"],"mappings":";;;;AAEA,SAAgB,oBAAoB;AAClC,QACE,oBAAC;EAAI,WAAU;YACb,oBAAC,mBAAgB,MAAK,WAAW;GAC7B;;AAIV,SAAgB,eAAe;AAC7B,QACE,oBAAC;EAAI,WAAU;YACb,oBAAC,oBAAkB;GACf"}

package/dist/components/layouts/not-found-section.mjs

@@ -1,30 +0,0 @@
-import { cn } from "../../lib/utils/cn.mjs";
-import { buttonVariants } from "../ui/button.mjs";
-import { HomeIcon } from "lucide-react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import Link from "next/link";
-
-//#region src/components/layouts/not-found-section.tsx
-function NotFoundSection({ href }) {
-	return /* @__PURE__ */ jsxs("div", {
-		className: "flex flex-col items-center gap-12 text-center",
-		children: [/* @__PURE__ */ jsxs("span", {
-			className: "text-foreground space-y-2",
-			children: [/* @__PURE__ */ jsx("h2", {
-				className: "text-9xl font-bold leading-none",
-				children: "404"
-			}), /* @__PURE__ */ jsx("h1", {
-				className: "text-2xl font-bold lg:text-3xl",
-				children: "Oeps, deze pagina is niet gevonden."
-			})]
-		}), href && /* @__PURE__ */ jsxs(Link, {
-			href,
-			className: cn(buttonVariants({ variant: "secondary" }), "text-foreground"),
-			children: [/* @__PURE__ */ jsx(HomeIcon, { className: "mr-2 size-4" }), "Terug naar home"]
-		})]
-	});
-}
-
-//#endregion
-export { NotFoundSection };
-//# sourceMappingURL=not-found-section.mjs.map

package/dist/components/layouts/not-found-section.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"not-found-section.mjs","names":[],"sources":["../../../src/components/layouts/not-found-section.tsx"],"sourcesContent":["import { buttonVariants } from \"@/components/ui/button\";\nimport { cn } from \"@/lib/utils/cn\";\nimport { HomeIcon } from \"lucide-react\";\nimport type { Route } from \"next\";\nimport Link from \"next/link\";\n\nexport function NotFoundSection({ href }: { href?: Route }) {\n  return (\n    <div className=\"flex flex-col items-center gap-12 text-center\">\n      <span className=\"text-foreground space-y-2\">\n        <h2 className=\"text-9xl font-bold leading-none\">404</h2>\n        <h1 className=\"text-2xl font-bold lg:text-3xl\">Oeps, deze pagina is niet gevonden.</h1>\n      </span>\n\n      {href && (\n        <Link\n          href={href}\n          className={cn(buttonVariants({ variant: \"secondary\" }), \"text-foreground\")}\n        >\n          <HomeIcon className=\"mr-2 size-4\" />\n          Terug naar home\n        </Link>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;AAMA,SAAgB,gBAAgB,EAAE,QAA0B;AAC1D,QACE,qBAAC;EAAI,WAAU;aACb,qBAAC;GAAK,WAAU;cACd,oBAAC;IAAG,WAAU;cAAkC;KAAQ,EACxD,oBAAC;IAAG,WAAU;cAAiC;KAAwC;IAClF,EAEN,QACC,qBAAC;GACO;GACN,WAAW,GAAG,eAAe,EAAE,SAAS,aAAa,CAAC,EAAE,kBAAkB;cAE1E,oBAAC,YAAS,WAAU,gBAAgB;IAE/B;GAEL"}

package/src/components/layouts/not-allowed-page.tsx

@@ -1,44 +0,0 @@
-import { cn } from "@/lib/utils/cn";
-import type { Route } from "next";
-import Link from "next/link";
-import type { HTMLAttributes } from "react";
-import { buttonVariants } from "../ui/button";
-import { EmptyPage, EmptyPageDescription, EmptyPageTitle } from "./empty-page";
-
-export type NotAllowedPageProps = HTMLAttributes<HTMLDivElement> & {
-  title?: string;
-  description?: string;
-  callToAction?: {
-    href: Route;
-    title: string;
-  };
-};
-
-export function NotAllowedPage({
-  title,
-  description,
-  callToAction,
-  ...props
-}: NotAllowedPageProps) {
-  return (
-    <EmptyPage {...props}>
-      <EmptyPageTitle>{title ?? "Geen toegang"}</EmptyPageTitle>
-      <EmptyPageDescription>
-        {description ?? "Je hebt geen toegang tot deze pagina."}
-      </EmptyPageDescription>
-
-      {callToAction && (
-        <Link href={callToAction.href} className={cn(buttonVariants({ variant: "default" }))}>
-          {callToAction.title}
-        </Link>
-      )}
-    </EmptyPage>
-  );
-}
-
-// <EmptyPage
-//   {...props}
-//   title={title ?? "Geen toegang"}
-//   description={description ?? "Je hebt geen toegang tot deze pagina."}
-//   callToAction={callToAction ?? { href: "/admin", title: "Terug naar dashboard" }}
-// />

package/src/components/layouts/not-found-page.tsx

@@ -1,17 +0,0 @@
-import { NotFoundSection } from "./not-found-section";
-
-export function AdminNotFoundPage() {
-  return (
-    <div className="relative z-0 grid h-[100dvh] w-full place-items-center">
-      <NotFoundSection href="/admin" />
-    </div>
-  );
-}
-
-export function NotFoundPage() {
-  return (
-    <div className="relative z-0 grid h-[100dvh] w-full place-items-center">
-      <NotFoundSection />
-    </div>
-  );
-}

package/src/components/layouts/not-found-section.tsx

@@ -1,26 +0,0 @@
-import { buttonVariants } from "@/components/ui/button";
-import { cn } from "@/lib/utils/cn";
-import { HomeIcon } from "lucide-react";
-import type { Route } from "next";
-import Link from "next/link";
-
-export function NotFoundSection({ href }: { href?: Route }) {
-  return (
-    <div className="flex flex-col items-center gap-12 text-center">
-      <span className="text-foreground space-y-2">
-        <h2 className="text-9xl font-bold leading-none">404</h2>
-        <h1 className="text-2xl font-bold lg:text-3xl">Oeps, deze pagina is niet gevonden.</h1>
-      </span>
-
-      {href && (
-        <Link
-          href={href}
-          className={cn(buttonVariants({ variant: "secondary" }), "text-foreground")}
-        >
-          <HomeIcon className="mr-2 size-4" />
-          Terug naar home
-        </Link>
-      )}
-    </div>
-  );
-}