display useful links (repo and docs)

oggnimodd · May 18, 2024 · e3369e4 · e3369e4
1 parent d7e38bd
commit e3369e4
Show file tree

Hide file tree

Showing 8 changed files with 76 additions and 27 deletions.
diff --git a/apps/extension/constants/links.ts b/apps/extension/constants/links.ts
@@ -0,0 +1,3 @@
+export const DOCS_URL =
+  "https://ai-prompt-snippets.vercel.app/getting-started/get-started/";
+export const REPO_URL = "https://github.com/oggnimodd/ai-prompt-snippets";
diff --git a/apps/extension/iframe/components/Header.tsx b/apps/extension/iframe/components/Header.tsx
@@ -10,6 +10,7 @@ import {
 import { openOptionsPage } from "utils/chrome";
 import { useTheme } from "shared/hooks";
 import { messageIframeParent } from "utils/message";
+import { REPO_URL } from "constants/links";
 
 const toggleIframe = () => {
   // Since this is an iframe , send the message to the parent window
@@ -40,7 +41,7 @@ const Header = () => {
           color="primary"
           isIconOnly
           as="a"
-          href="https://github.com/oggnimodd/ai-prompt-snippets"
+          href={REPO_URL}
           target="_blank"
           size="sm"
         />

diff --git a/apps/extension/iframe/components/PromptBuilder.tsx b/apps/extension/iframe/components/PromptBuilder.tsx
@@ -8,6 +8,7 @@ import { PromptData, messageIframeParent } from "utils/message";
 import { openOptionsPage } from "utils/chrome";
 import { Send as SendIcon } from "lucide-react";
 import { logForTesting } from "utils/playwright";
+import { DOCS_URL } from "constants/links";
 
 type HandleParameterChange = (key: string, value: string) => void;
 
@@ -114,16 +115,29 @@ const PromptBuilder = () => {
 
   if (snippets.length === 0) {
     return (
-      <span data-cy="empty-panel-message">
-        No snippets, you can add new ones{" "}
-        <button
-          className="text-primary-500 underline"
-          onClick={openOptionsPage}
-          data-cy="options-page-link"
-        >
-          here
-        </button>
-      </span>
+      <div data-cy="empty-panel-message">
+        <div>
+          No snippets, you can add new ones{" "}
+          <button
+            className="text-primary-500 underline"
+            onClick={openOptionsPage}
+            data-cy="options-page-link"
+          >
+            here
+          </button>
+        </div>
+
+        <div className="mt-4">
+          You can read the docs{" "}
+          <a
+            target="_blank "
+            href={DOCS_URL}
+            className="text-primary-500 underline"
+          >
+            here
+          </a>
+        </div>
+      </div>
     );
   }
 

diff --git a/apps/extension/options/components/SnippetCreatorWrapper.tsx b/apps/extension/options/components/SnippetCreatorWrapper.tsx
@@ -1,9 +1,10 @@
 import { Button } from "@nextui-org/react";
-import { Home, Upload } from "lucide-react";
+import { BookOpen, Home, Upload } from "lucide-react";
 import { Snippet } from "models/snippet";
 import React, { FC } from "react";
 import { Link } from "react-router-dom";
 import { exportSnippets } from "export-import";
+import { DOCS_URL } from "constants/links";
 
 export interface SnippetCreatorWrapperProps {
   children: React.ReactNode;
@@ -17,6 +18,15 @@ const SnippetCreatorWrapper: FC<SnippetCreatorWrapperProps> = ({
   return (
     <div className="flex flex-col">
       <div className="mb-2 flex ml-auto gap-x-3">
+        <Button
+          startContent={<BookOpen size={18} />}
+          as={Link}
+          color="primary"
+          target="_blank"
+          to={DOCS_URL}
+        >
+          Docs
+        </Button>
         {snippet && (
           // Exporting individual snippet
           <Button

diff --git a/apps/extension/options/pages/home.tsx b/apps/extension/options/pages/home.tsx
@@ -1,13 +1,22 @@
 import { Button, Input } from "@nextui-org/react";
 import { Link } from "react-router-dom";
 import { SnippetList } from "../components";
-import { Download, Plus, Upload, Moon, Sun, Trash2 } from "lucide-react";
+import {
+  Download,
+  Plus,
+  Upload,
+  Moon,
+  Sun,
+  Trash2,
+  BookOpen,
+} from "lucide-react";
 import { LoadingWithMessage, Toast } from "@acme/ui";
 import { useImportSnippets, useSearchSnippets, useSnippets } from "../hooks";
 import { useTheme } from "shared/hooks";
 import { exportSnippets } from "../../export-import";
 import { delay } from "utils/delay";
 import { toast } from "react-hot-toast";
+import { DOCS_URL } from "constants/links";
 
 const Index = () => {
   const {
@@ -54,18 +63,8 @@ const Index = () => {
   }
 
   return (
-    <>
-      <div className="flex flex-wrap justify-between gap-x-4 gap-y-2 items-end mb-8">
-        <Input
-          onClear={clearSearch}
-          onChange={onSearchChange}
-          placeholder="Find Snippet"
-          labelPlacement="outside"
-          isClearable
-          classNames={{
-            base: "w-auto self-start",
-          }}
-        />
+    <div className="flex flex-col gap-y-6">
+      <div className="flex flex-wrap justify-between gap-x-4 gap-y-2 items-end">
         <div className="self-auto flex items-center gap-3 flex-wrap">
           <Button
             data-cy="toggle-theme-button"
@@ -77,6 +76,15 @@ const Index = () => {
           >
             {theme === "dark" ? "Dark" : "Light"}
           </Button>
+          <Button
+            startContent={<BookOpen size={18} />}
+            as={Link}
+            color="primary"
+            target="_blank"
+            to={DOCS_URL}
+          >
+            Docs
+          </Button>
           <Button
             data-cy="delete-all-snippets-button"
             onPress={deleteAllSnippets}
@@ -112,12 +120,24 @@ const Index = () => {
           </Button>
         </div>
       </div>
+
+      <Input
+        onClear={clearSearch}
+        onChange={onSearchChange}
+        placeholder="Find Snippet"
+        labelPlacement="outside"
+        isClearable
+        classNames={{
+          base: "w-64 self-start",
+        }}
+      />
+
       <SnippetList
         search={search}
         snippets={snippets}
         setSnippets={setSnippets}
       />
-    </>
+    </div>
   );
 };
 

diff --git a/apps/extension/package.json b/apps/extension/package.json
@@ -22,7 +22,7 @@
     "clsx": "^1.2.1",
     "file-saver": "^2.0.5",
     "framer-motion": "^10.16.4",
-    "lucide-react": "^0.279.0",
+    "lucide-react": "^0.378.0",
     "nanoid": "^5.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

diff --git a/apps/extension/tsconfig.json b/apps/extension/tsconfig.json
@@ -28,6 +28,7 @@
       "hooks/*": ["hooks/*"],
       "shared/*": ["shared/*"],
       "models/*": ["models/*"],
+      "constants/*": ["constants/*"],
       "@ui/*": ["../../packages/ui/*"]
     }
   },

diff --git a/bun.lockb b/bun.lockb