add react-router-dom to options page

apps/plugin/options/App.tsx

@@ -1,119 +1,10 @@
-import { TextField, Button } from "@acme/ui";
-import { SnippetList } from "./components";
-import type { Snippet } from "../snippet/model";
-import { useState } from "react";
-
-const snippets: Snippet[] = [
-  {
-    title: "Book Summary",
-    prompt: "Provide a detailed summary of the book [title] by [author]",
-    parameters: [
-      {
-        title: "title",
-        type: "string",
-      },
-      {
-        title: "author",
-        type: "string",
-      },
-    ],
-  },
-
-  {
-    title: "Movie Review",
-    prompt:
-      "Write a critical review of the film [title] directed by [director]",
-    parameters: [
-      {
-        title: "title",
-        type: "string",
-      },
-      {
-        title: "director",
-        type: "string",
-      },
-    ],
-  },
-
-  {
-    title: "Recipe",
-    prompt:
-      "Provide the ingredients and step-by-step instructions to make [dish]",
-    parameters: [
-      {
-        title: "dish",
-        type: "string",
-      },
-    ],
-  },
-  {
-    title: "Product Description",
-    prompt:
-      "Write a detailed product description for [product] highlighting its key features and benefits",
-    parameters: [
-      {
-        title: "product",
-        type: "string",
-      },
-    ],
-  },
-
-  {
-    title: "Business Pitch",
-    prompt:
-      "Create a one minute elevator pitch for [business] to use when introducing the business",
-    parameters: [
-      {
-        title: "business",
-        type: "string",
-      },
-    ],
-  },
-
-  {
-    title: "Research Summary",
-    prompt:
-      "Summarize the key findings from the research paper [title] by [author]",
-    parameters: [
-      {
-        title: "title",
-        type: "string",
-      },
-      {
-        title: "author",
-        type: "string",
-      },
-    ],
-  },
-];
-
-// Search snippet using query
-const useSearchSnippet = () => {
-  const [search, setSearch] = useState("");
-
-  // Handle input field changes
-  const onSearchChange = (value: string) => {
-    setSearch(value);
-  };
-
-  return { search, onSearchChange };
-};
+import Routes from "./routes";
 
 const App = () => {
-  const { search, onSearchChange } = useSearchSnippet();
-
   return (
     <div className="flex w-full text-base bg-background-500">
-      <div className="w-full min-h-screen text-white mx-auto max-w-[1100px] px-20 xl:px-0">
-        <div className="my-4 py-3 flex flex-wrap justify-between gap-x-4 gap-y-2 items-end">
-          <TextField
-            onChange={onSearchChange}
-            className="w-full"
-            placeholder="Find Snippet"
-          />
-          <Button className="self-auto">+ Add New</Button>
-        </div>
-        <SnippetList search={search} snippets={snippets} />
+      <div className="w-full min-h-screen text-white mx-auto lg:max-w-[1100px] px-4 lg:px-20 xl:px-0">
+        <Routes />
       </div>
     </div>
   );

apps/plugin/options/components/SnippetCard.tsx

@@ -1,12 +1,19 @@
 import { FC } from "react";
-
 import type { Snippet } from "../../snippet/model";
+import { Link } from "react-router-dom";
 
 const SnippetCard: FC<Snippet> = ({ title, prompt }) => {
   return (
-    <div className="bg-background-300 rounded-lg p-4">
+    <div className="bg-background-300 rounded-lg p-4 flex flex-col">
       <span className="font-bold text-xl text-primary-500">{title}</span>
       <p className="line-clamp-3">{prompt}</p>
+
+      <Link
+        to={`/details/${Math.random()}`}
+        className="text-primary-400 underline mt-auto pt-5"
+      >
+        View Details
+      </Link>
     </div>
   );
 };

apps/plugin/options/components/SnippetDetails.tsx

@@ -1,5 +1,10 @@
+import { useParams } from "react-router-dom";
+
 const SnippetDetails = () => {
-  return <div>SnippetDetails</div>;
+  const params = useParams();
+  const id = params.id as string;
+
+  return <div>Snippet details for {id}</div>;
 };
 
 export default SnippetDetails;

apps/plugin/options/components/SnippetList.tsx

@@ -18,7 +18,7 @@ const SnippetList: FC<{ snippets: Snippet[]; search: string }> = ({
   }
 
   return (
-    <div className="grid grid-cols-3 gap-4">
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
       {filteredItems.length > 0 &&
         filteredItems.map((item) => {
           return (

apps/plugin/options/components/index.ts

@@ -1,4 +1,4 @@
-export { default as Sidebar } from "./SnippetAdd";
 export { default as SnippetList } from "./SnippetList";
 export { default as SnippetAdd } from "./SnippetAdd";
 export { default as SnippetCard } from "./SnippetCard";
+export { default as SnippetDetails } from "./SnippetDetails";

apps/plugin/options/main.tsx

@@ -2,9 +2,12 @@ import React from "react";
 import ReactDOM from "react-dom/client";
 import App from "./App";
 import "../styles/globals.css";
+import { HashRouter as Router } from "react-router-dom";
 
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
   <React.StrictMode>
-    <App />
+    <Router future={{ v7_startTransition: true }}>
+      <App />
+    </Router>
   </React.StrictMode>,
 );

apps/plugin/options/pages/add.tsx

@@ -0,0 +1,11 @@
+import { SnippetAdd } from "../components";
+
+const Add = () => {
+  return (
+    <div>
+      <SnippetAdd />
+    </div>
+  );
+};
+
+export default Add;

apps/plugin/options/pages/details.tsx

@@ -0,0 +1,11 @@
+import { SnippetDetails } from "../components";
+
+const Details = () => {
+  return (
+    <div>
+      <SnippetDetails />
+    </div>
+  );
+};
+
+export default Details;

apps/plugin/options/pages/home.tsx

@@ -0,0 +1,124 @@
+import { Button, TextField } from "@acme/ui";
+import { Link } from "react-router-dom";
+import type { Snippet } from "../../snippet/model";
+import { useState } from "react";
+import { SnippetList } from "../components";
+
+const snippets: Snippet[] = [
+  {
+    title: "Book Summary",
+    prompt: "Provide a detailed summary of the book [title] by [author]",
+    parameters: [
+      {
+        title: "title",
+        type: "string",
+      },
+      {
+        title: "author",
+        type: "string",
+      },
+    ],
+  },
+
+  {
+    title: "Movie Review",
+    prompt:
+      "Write a critical review of the film [title] directed by [director]",
+    parameters: [
+      {
+        title: "title",
+        type: "string",
+      },
+      {
+        title: "director",
+        type: "string",
+      },
+    ],
+  },
+
+  {
+    title: "Recipe",
+    prompt:
+      "Provide the ingredients and step-by-step instructions to make [dish]",
+    parameters: [
+      {
+        title: "dish",
+        type: "string",
+      },
+    ],
+  },
+  {
+    title: "Product Description",
+    prompt:
+      "Write a detailed product description for [product] highlighting its key features and benefits",
+    parameters: [
+      {
+        title: "product",
+        type: "string",
+      },
+    ],
+  },
+
+  {
+    title: "Business Pitch",
+    prompt:
+      "Create a one minute elevator pitch for [business] to use when introducing the business",
+    parameters: [
+      {
+        title: "business",
+        type: "string",
+      },
+    ],
+  },
+
+  {
+    title: "Research Summary",
+    prompt:
+      "Summarize the key findings from the research paper [title] by [author]",
+    parameters: [
+      {
+        title: "title",
+        type: "string",
+      },
+      {
+        title: "author",
+        type: "string",
+      },
+    ],
+  },
+];
+
+// Search snippet using query
+const useSearchSnippet = () => {
+  const [search, setSearch] = useState("");
+
+  // Handle input field changes
+  const onSearchChange = (value: string) => {
+    setSearch(value);
+  };
+
+  return { search, onSearchChange };
+};
+
+const Index = () => {
+  const { search, onSearchChange } = useSearchSnippet();
+
+  return (
+    <>
+      <div className="my-4 py-3 flex flex-wrap justify-between gap-x-4 gap-y-2 items-end">
+        <TextField
+          onChange={onSearchChange}
+          className="w-full"
+          placeholder="Find Snippet"
+        />
+
+        <Button className="self-auto" component={Link} to="/add">
+          + Add New
+        </Button>
+      </div>
+      <SnippetList search={search} snippets={snippets} />
+    </>
+  );
+};
+
+export default Index;

apps/plugin/options/pages/index.tsx

@@ -0,0 +1,4 @@
+export { default as Add } from "./add";
+export { default as Home } from "./home";
+export { default as Details } from "./details";
+export { default as NotFound } from "./not-found";

apps/plugin/options/pages/not-found.tsx

@@ -0,0 +1,14 @@
+import { Button, PageMessage } from "@acme/ui";
+import { Link } from "react-router-dom";
+
+const NotFound = () => {
+  return (
+    <PageMessage title="Not Found" message="Oops, Don't Wander too far">
+      <Link to="/">
+        <Button>Back to home</Button>
+      </Link>
+    </PageMessage>
+  );
+};
+
+export default NotFound;

apps/plugin/options/routes.tsx

@@ -0,0 +1,15 @@
+import { Home, Add, Details, NotFound } from "./pages";
+import { Routes, Route } from "react-router-dom";
+
+const routes = () => {
+  return (
+    <Routes>
+      <Route path="/" element={<Home />} />
+      <Route path="/add" element={<Add />} />
+      <Route path="/details/:id" element={<Details />} />
+      <Route path="*" element={<NotFound />} />
+    </Routes>
+  );
+};
+
+export default routes;