feat: download data button

.gitignore

@@ -37,8 +37,8 @@ yarn-error.log*
 next-env.d.ts
 
 
-old/
-old1/
+data.json
+script.ts
 
 terraform/**/*.terraform*
 terraform/**/terraform.tfstate*

script.ts

@@ -0,0 +1,31 @@
+import { updateAbout } from "@/models/about.server";
+import { createContact } from "@/models/contact.server";
+import { createExperience } from "@/models/experience.server";
+import { createProject } from "@/models/project.server";
+import { readFileSync } from "fs";
+import { join } from "path";
+
+async function loadDataFromFile() {
+	const filePath = join(__dirname, "./data-dev.json");
+	const data = JSON.parse(readFileSync(filePath, "utf8"));
+
+	// Upload projects
+	for (const project of data.projects) {
+		await createProject(project);
+	}
+
+	// Upload experiences
+	for (const experience of data.experience) {
+		await createExperience(experience);
+	}
+
+	// Upload contacts
+	for (const contact of data.messages) {
+		await createContact(contact);
+	}
+
+	// Set About data
+	await updateAbout(data.about);
+}
+
+loadDataFromFile();

src/app/(admin)/admin/Download.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { getAbout } from "@/models/about.server";
+import { getAllMessages } from "@/models/contact.server";
+import { getAllExperiences } from "@/models/experience.server";
+import { getAllProjects } from "@/models/project.server";
+
+export default function Download() {
+	const getData = async () => {
+		const [about, projects, experience, messages] = await Promise.all([
+			await getAbout(),
+			await getAllProjects(),
+			await getAllExperiences(),
+			await getAllMessages(),
+		]);
+		return { about, projects, experience, messages };
+	};
+
+	const saveData = async () => {
+		const allData = await getData();
+		const dataStr =
+			"data:text/json;charset=utf-8," +
+			encodeURIComponent(JSON.stringify(allData, null, 2));
+		const downloadAnchorNode = document.createElement("a");
+		downloadAnchorNode.setAttribute("href", dataStr);
+		downloadAnchorNode.setAttribute("download", "data.json");
+		document.body.appendChild(downloadAnchorNode); // required for firefox
+		downloadAnchorNode.click();
+		downloadAnchorNode.remove();
+	};
+
+	return (
+		<Button variant="link" onClick={saveData}>
+			Download Data
+		</Button>
+	);
+}

src/app/(admin)/admin/layout.tsx

@@ -1,5 +1,6 @@
 import Header from "./Header";
 import NavItem from "./NavItem";
+import Download from "./Download";
 
 export default function Layout({ children }: { children: React.ReactNode }) {
 	return (
@@ -8,15 +9,20 @@ export default function Layout({ children }: { children: React.ReactNode }) {
 				<Header />
 
 				<div className="rounded-sm grid grid-cols-12 overflow-hidden border border-border h-full w-full">
-					<div className="w-full transition-all hidden lg:flex col-span-2 flex-col border-r border-border">
-						<NavItem to={"/admin/about"}>About</NavItem>
-						<NavItem to={"/admin/experience"}>Experience</NavItem>
-						<NavItem to={"/admin/projects"}>Projects</NavItem>
-						<NavItem to={"/admin/resume"}>Resume</NavItem>
-						<div className="h-px bg-border my-2 mx-4"></div>
-						<NavItem to="/admin/chat">Chat</NavItem>
-						<div className="h-px bg-border my-2 mx-4"></div>
-						<NavItem to="/admin/messages">Messages</NavItem>
+					<div className="flex w-full col-span-2 flex-col justify-between gap-2">
+						<div className="w-full transition-all hidden lg:flex flex-col border-r border-border">
+							<NavItem to={"/admin/about"}>About</NavItem>
+							<NavItem to={"/admin/experience"}>
+								Experience
+							</NavItem>
+							<NavItem to={"/admin/projects"}>Projects</NavItem>
+							<NavItem to={"/admin/resume"}>Resume</NavItem>
+							<div className="h-px bg-border my-2 mx-4"></div>
+							<NavItem to="/admin/chat">Chat</NavItem>
+							<div className="h-px bg-border my-2 mx-4"></div>
+							<NavItem to="/admin/messages">Messages</NavItem>
+						</div>
+						<Download />
 					</div>
 					{children}
 				</div>