Prompts (#229)

2023-03-27 09:38:56 -06:00
parent 2269403806
commit 34c79c0d66
51 changed files with 1744 additions and 295 deletions
@@ -0,0 +1,50 @@
+import { Prompt } from '@/types/prompt';
+import { FC, MutableRefObject } from 'react';
+
+interface Props {
+  prompts: Prompt[];
+  activePromptIndex: number;
+  onSelect: () => void;
+  onMouseOver: (index: number) => void;
+  promptListRef: MutableRefObject<HTMLUListElement | null>;
+}
+
+export const PromptList: FC<Props> = ({
+  prompts,
+  activePromptIndex,
+  onSelect,
+  onMouseOver,
+  promptListRef,
+}) => {
+  return (
+    <ul
+      ref={promptListRef}
+      className="z-10 w-full rounded border border-black/10 bg-white shadow-[0_0_10px_rgba(0,0,0,0.10)] dark:border-neutral-500 dark:bg-[#343541] dark:text-white dark:shadow-[0_0_15px_rgba(0,0,0,0.10)]"
+      style={{
+        width: 'calc(100% - 48px)',
+        bottom: '100%',
+        marginBottom: '4px',
+        maxHeight: '200px',
+      }}
+    >
+      {prompts.map((prompt, index) => (
+        <li
+          key={prompt.id}
+          className={`${
+            index === activePromptIndex
+              ? 'bg-gray-200 dark:bg-[#202123] dark:text-black'
+              : ''
+          } cursor-pointer px-3 py-2 text-sm text-black dark:text-white`}
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            onSelect();
+          }}
+          onMouseEnter={() => onMouseOver(index)}
+        >
+          {prompt.name}
+        </li>
+      ))}
+    </ul>
+  );
+};