From 40069905fa4e74a95b35e9b7a61adc0e24e64aa5 Mon Sep 17 00:00:00 2001
From: Sonny <sonnyasdev@gmail.com>
Date: Sun, 3 Nov 2024 19:55:34 +0100
Subject: [PATCH] feat: recreate no link component

---
 .../dashboard/link/no_link.module.css         | 27 ++++++++++++++
 .../components/dashboard/link/no_link.tsx     | 37 +++++++++++++++++++
 inertia/pages/mantine_dashboard.tsx           | 25 ++++++++-----
 3 files changed, 79 insertions(+), 10 deletions(-)
 create mode 100644 inertia/mantine/components/dashboard/link/no_link.module.css
 create mode 100644 inertia/mantine/components/dashboard/link/no_link.tsx

diff --git a/inertia/mantine/components/dashboard/link/no_link.module.css b/inertia/mantine/components/dashboard/link/no_link.module.css
new file mode 100644
index 0000000..7f0604e
--- /dev/null
+++ b/inertia/mantine/components/dashboard/link/no_link.module.css
@@ -0,0 +1,27 @@
+.noCollection {
+  min-width: 0;
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  animation: fadeIn 0.3s both;
+}
+
+.text {
+  min-width: 0;
+  width: 100%;
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
diff --git a/inertia/mantine/components/dashboard/link/no_link.tsx b/inertia/mantine/components/dashboard/link/no_link.tsx
new file mode 100644
index 0000000..0daf7d0
--- /dev/null
+++ b/inertia/mantine/components/dashboard/link/no_link.tsx
@@ -0,0 +1,37 @@
+import { Link } from '@inertiajs/react';
+import { route } from '@izzyjs/route/client';
+import { Anchor, Box, Text } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
+import useActiveCollection from '~/hooks/use_active_collection';
+import { appendCollectionId } from '~/lib/navigation';
+import styles from './no_link.module.css';
+
+export function NoLink() {
+	const { t } = useTranslation('common');
+	const { activeCollection } = useActiveCollection();
+	return (
+		<Box className={styles.noCollection} p="xl">
+			<Text
+				className={styles.text}
+				dangerouslySetInnerHTML={{
+					__html: t(
+						'home:no-link',
+						{ name: activeCollection?.name ?? '' } as any,
+						{
+							interpolation: { escapeValue: false },
+						}
+					),
+				}}
+			/>
+			<Anchor
+				component={Link}
+				href={appendCollectionId(
+					route('link.create-form').path,
+					activeCollection?.id
+				)}
+			>
+				{t('link.create')}
+			</Anchor>
+		</Box>
+	);
+}
diff --git a/inertia/pages/mantine_dashboard.tsx b/inertia/pages/mantine_dashboard.tsx
index 36af817..e5b4dd3 100644
--- a/inertia/pages/mantine_dashboard.tsx
+++ b/inertia/pages/mantine_dashboard.tsx
@@ -14,6 +14,7 @@ import { MantineFooter } from '~/components/footer/mantine_footer';
 import useShortcut from '~/hooks/use_shortcut';
 import { DashboardAside } from '~/mantine/components/dashboard/dashboard_aside';
 import { DashboardNavbar } from '~/mantine/components/dashboard/dashboard_navbar';
+import { NoLink } from '~/mantine/components/dashboard/link/no_link';
 import { MantineDashboardLayout } from '~/mantine/layouts/mantine_dashboard_layout';
 import { CollectionWithLinks } from '~/types/app';
 import classes from './dashboard.module.css';
@@ -85,16 +86,20 @@ export default function MantineDashboard(props: Readonly<DashboardPageProps>) {
 					</AppShell.Header>
 					<DashboardNavbar isOpen={openedNavbar} toggle={toggleNavbar} />
 					<AppShell.Main>
-						<ScrollArea
-							h="calc(100vh - var(--app-shell-header-height, 0px) - var(--app-shell-footer-height, 0px))"
-							p="md"
-						>
-							<Stack gap="xs">
-								{props.activeCollection.links.map((link) => (
-									<LinkItem key={link.id} link={link} showUserControls />
-								))}
-							</Stack>
-						</ScrollArea>
+						{props.activeCollection.links.length > 0 ? (
+							<ScrollArea
+								h="calc(100vh - var(--app-shell-header-height, 0px) - var(--app-shell-footer-height, 0px))"
+								p="md"
+							>
+								<Stack gap="xs">
+									{props.activeCollection.links.map((link) => (
+										<LinkItem key={link.id} link={link} showUserControls />
+									))}
+								</Stack>
+							</ScrollArea>
+						) : (
+							<NoLink />
+						)}
 					</AppShell.Main>
 					<DashboardAside isOpen={openedAside} toggle={toggleAside} />
 					<AppShell.Footer pl="xs" pr="xs">