my-project-public

repository

loading code, commits, and activity

repositories

loading repo index

#1	"use client";
#2	import { useMemoriesApi } from "@/hooks/useMemoriesApi";
#3	import { MemoryActions } from "./MemoryActions";
#4	import { ArrowLeft, Copy, Check } from "lucide-react";
#5	import { Button } from "@/components/ui/button";
#6	import { useRouter } from "next/navigation";
#7	import { AccessLog } from "./AccessLog";
#8	import Image from "next/image";
#9	import Categories from "@/components/shared/categories";
#10	import { useEffect, useState } from "react";
#11	import { useSelector } from "react-redux";
#12	import { RootState } from "@/store/store";
#13	import { constants } from "@/components/shared/source-app";
#14	import { RelatedMemories } from "./RelatedMemories";
#15
#16	interface MemoryDetailsProps {
#17	memory_id: string;
#18	}
#19
#20	export function MemoryDetails({ memory_id }: MemoryDetailsProps) {
#21	const router = useRouter();
#22	const { fetchMemoryById, hasUpdates } = useMemoriesApi();
#23	const memory = useSelector(
#24	(state: RootState) => state.memories.selectedMemory
#25	);
#26	const [copied, setCopied] = useState(false);
#27
#28	const handleCopy = async () => {
#29	if (memory?.id) {
#30	await navigator.clipboard.writeText(memory.id);
#31	setCopied(true);
#32	setTimeout(() => setCopied(false), 2000);
#33	}
#34	};
#35
#36	useEffect(() => {
#37	fetchMemoryById(memory_id);
#38	}, []);
#39
#40	return (
#41	<div className="container mx-auto py-6 px-4">
#42	<Button
#43	variant="ghost"
#44	className="mb-4 text-zinc-400 hover:text-white"
#45	onClick={() => router.back()}
#46	>
#47	<ArrowLeft className="h-4 w-4 mr-2" />
#48	Back to Memories
#49	</Button>
#50	<div className="flex gap-4 w-full">
#51	<div className="rounded-lg w-2/3 border h-fit pb-2 border-zinc-800 bg-zinc-900 overflow-hidden">
#52	<div className="">
#53	<div className="flex px-6 py-3 justify-between items-center mb-6 bg-zinc-800 border-b border-zinc-800">
#54	<div className="flex items-center gap-2">
#55	<h1 className="font-semibold text-white">
#56	Memory{" "}
#57	<span className="ml-1 text-zinc-400 text-sm font-normal">
#58	#{memory?.id?.slice(0, 6)}
#59	</span>
#60	</h1>
#61	<Button
#62	variant="ghost"
#63	size="icon"
#64	className="h-4 w-4 text-zinc-400 hover:text-white -ml-[5px] mt-1"
#65	onClick={handleCopy}
#66	>
#67	{copied ? (
#68	<Check className="h-3 w-3" />
#69	) : (
#70	<Copy className="h-3 w-3" />
#71	)}
#72	</Button>
#73	</div>
#74	<MemoryActions
#75	memoryId={memory?.id \|\| ""}
#76	memoryContent={memory?.text \|\| ""}
#77	memoryState={memory?.state \|\| ""}
#78	/>
#79	</div>
#80
#81	<div className="px-6 py-2">
#82	<div className="border-l-2 border-primary pl-4 mb-6">
#83	<p
#84	className={`${
#85	memory?.state === "archived" \|\| memory?.state === "paused"
#86	? "text-zinc-400"
#87	: "text-white"
#88	}`}
#89	>
#90	{memory?.text}
#91	</p>
#92	</div>
#93
#94	<div className="mt-6 pt-4 border-t border-zinc-800">
#95	<div className="flex justify-between items-center">
#96	<div className="">
#97	<Categories
#98	categories={memory?.categories \|\| []}
#99	isPaused={
#100	memory?.state === "archived" \|\|
#101	memory?.state === "paused"
#102	}
#103	/>
#104	</div>
#105	<div className="flex items-center gap-2 min-w-[300px] justify-end">
#106	<div className="flex items-center gap-2">
#107	<div className="flex items-center gap-1 bg-zinc-700 px-3 py-1 rounded-lg">
#108	<span className="text-sm text-zinc-400">
#109	Created by:
#110	</span>
#111	<div className="w-4 h-4 rounded-full bg-zinc-700 flex items-center justify-center overflow-hidden">
#112	<Image
#113	src={
#114	constants[
#115	memory?.app_name as keyof typeof constants
#116	]?.iconImage \|\| ""
#117	}
#118	alt="OpenMemory"
#119	width={24}
#120	height={24}
#121	/>
#122	</div>
#123	<p className="text-sm text-zinc-100 font-semibold">
#124	{
#125	constants[
#126	memory?.app_name as keyof typeof constants
#127	]?.name
#128	}
#129	</p>
#130	</div>
#131	</div>
#132	</div>
#133	</div>
#134
#135	{/* <div className="flex justify-end gap-2 w-full mt-2">
#136	<p className="text-sm font-semibold text-primary my-auto">
#137	{new Date(memory.created_at).toLocaleString()}
#138	</p>
#139	</div> */}
#140	</div>
#141	</div>
#142	</div>
#143	</div>
#144	<div className="w-1/3 flex flex-col gap-4">
#145	<AccessLog memoryId={memory?.id \|\| ""} />
#146	<RelatedMemories memoryId={memory?.id \|\| ""} />
#147	</div>
#148	</div>
#149	</div>
#150	);
#151	}
#152

z6Mkq5mY3JWtxoxUobWcfNHm7AkRubgSWEZTkBVqZXJviFZ5/my-project-public