Components: FileCompnent: Add filecomponent

4 files changed, 37 insertions, 10 deletions

diff --git a/src/components/Other/FSTracerFile.tsx b/src/components/Other/FSTracerFile.tsx
new file mode 100644
index 0000000..61c8e35
--- /dev/null
+++ b/src/components/Other/FSTracerFile.tsx
@@ -0,0 +1,13 @@
+import { FSTracerFile } from "../../lib/types"
+
+interface FileComponentProps {
+	file: FSTracerFile
+}
+
+export default function FileComponent(props: FileComponentProps) {
+	return (
+		<a href={`/file/${encodeURIComponent(props.file.absolute_path)}`}>
+			<p className="underline">file: {props.file.absolute_path}</p>
+		</a>
+	)
+}
diff --git a/src/lib/types.tsx b/src/lib/types.tsx
index a0567e6..00ab909 100644
--- a/src/lib/types.tsx
+++ b/src/lib/types.tsx
@@ -1,7 +1,17 @@
-interface File {
-  id: number
-  user_id: string
-  absolute_path: string
-  contents: string
-  timestamp: string
+export type FSTracerFile = {
+  id: number;
+  user_id: string;
+  absolute_path: string;
+  contents: string;
+  timestamp: string;
+}
+
+interface FileComponentProps {
+  file: FSTracerFile
+}
+
+export default function FileComponent(props: FileComponentProps) {
+  return (
+    <p className="underline">file: {props.file.absolute_path}</p>
+  )
 }
diff --git a/src/pages/Recent.tsx b/src/pages/Recent.tsx
index 76d9e2a..1ec1ebb 100644
--- a/src/pages/Recent.tsx
+++ b/src/pages/Recent.tsx
@@ -2,6 +2,8 @@ import { useEffect, useState, useCallback } from "react"
 
 import { useNavigate } from "react-router-dom"
 import SideBar from "../components/Sidebar/Sidebar"
+import { FSTracerFile } from "../lib/types";
+import FileComponent from "../components/Other/FSTracerFile";
 
 export default function Recent(props: any) {
   const navigate = useNavigate()
@@ -46,9 +48,9 @@ export default function Recent(props: any) {
         <main className="flex-1 overflow-y-auto my-4">
           <div className="flex flex-col items-center">
             <div className="flex flex-col gap-2">
-              {files.map((file: any) => (
+              {files.map((file: FSTracerFile) => (
                 <div key={file.id} role="button" onClick={() => console.log("clocked file")}>
-                  <p className="underline">file: {file.absolute_path}</p>
+                  <FileComponent file={file} />
                 </div>
               ))
               }
diff --git a/src/pages/Search.tsx b/src/pages/Search.tsx
index 063da14..54816ff 100644
--- a/src/pages/Search.tsx
+++ b/src/pages/Search.tsx
@@ -2,6 +2,8 @@ import { useEffect, useState, useCallback } from "react"
 
 import { useNavigate } from "react-router-dom"
 import SideBar from "../components/Sidebar/Sidebar"
+import { FSTracerFile } from "../lib/types";
+import FileComponent from "../components/Other/FSTracerFile";
 
 export default function Search(props: any) {
   const navigate = useNavigate()
@@ -58,9 +60,9 @@ export default function Search(props: any) {
           </div>
           <div className="flex flex-col items-center">
             <div className="flex flex-col gap-2">
-              {files.map((file: any) => (
+              {files.map((file: FSTracerFile) => (
                 <div key={file.id} role="button" onClick={() => console.log("clocked file")}>
-                  <p className="underline">file: {file.absolute_path}</p>
+                  <FileComponent file={file} />
                 </div>
               ))
               }