feat: add prompt ideas in studio

src/components/projects/PomptWizardPopover.tsx

@@ -52,9 +52,6 @@ const PomptWizardPopover = () => {
         size="sm"
         onClick={onOpen}
       >
-        <Badge colorScheme="yellow" mr={1}>
-          New
-        </Badge>
         Prompt Wizard
       </Button>
 

src/components/projects/PromptPanel.tsx

@@ -18,6 +18,7 @@ import { BsLightbulb } from "react-icons/bs";
 import { FaCameraRetro } from "react-icons/fa";
 import { useMutation } from "react-query";
 import PomptWizardPopover from "./PomptWizardPopover";
+import PromptsDrawer from "./PromptsDrawer";
 
 const PromptPanel = () => {
   const {
@@ -75,9 +76,10 @@ const PromptPanel = () => {
           />
         </Text>
       </Flex>
-      <Box mt={2}>
+      <HStack mt={2}>
+        <PromptsDrawer />
         <PomptWizardPopover />
-      </Box>
+      </HStack>
       <Flex
         flexDirection={{ base: "column", md: "row" }}
         gap={{ base: 4, md: 2 }}

src/components/projects/PromptsDrawer.tsx

@@ -0,0 +1,75 @@
+import { prompts } from "@/core/utils/prompts";
+import useProjectContext from "@/hooks/use-project-context";
+import {
+  Box,
+  Button,
+  Drawer,
+  DrawerBody,
+  DrawerCloseButton,
+  DrawerContent,
+  DrawerHeader,
+  DrawerOverlay,
+  SimpleGrid,
+  Text,
+  useDisclosure,
+} from "@chakra-ui/react";
+import Image from "next/image";
+
+const PromptsDrawer = () => {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const { promptInputRef } = useProjectContext();
+
+  return (
+    <>
+      <Button variant="outline" size="sm" onClick={onOpen}>
+        Prompt Ideas
+      </Button>
+      <Drawer
+        isOpen={isOpen}
+        size={{ base: "md", md: "lg" }}
+        placement="right"
+        onClose={onClose}
+      >
+        <DrawerOverlay />
+        <DrawerContent>
+          <DrawerCloseButton />
+          <DrawerHeader>Select style</DrawerHeader>
+          <DrawerBody>
+            <SimpleGrid columns={{ base: 2, md: 3 }} gap={4}>
+              {prompts.map((prompt) => (
+                <Box
+                  cursor="pointer"
+                  key={prompt.slug}
+                  transition="200ms all"
+                  _hover={{ filter: "contrast(140%)" }}
+                >
+                  <Image
+                    onClick={() => {
+                      promptInputRef.current!.value = prompt.prompt;
+                      onClose();
+                    }}
+                    style={{ borderRadius: 10 }}
+                    src={`/prompts/sacha/${prompt.slug}.png`}
+                    alt={prompt.label}
+                    width="400"
+                    height="400"
+                  />
+                  <Text
+                    textTransform="capitalize"
+                    fontWeight="semibold"
+                    color="beige.500"
+                    mt={1}
+                  >
+                    {prompt.label}
+                  </Text>
+                </Box>
+              ))}
+            </SimpleGrid>
+          </DrawerBody>
+        </DrawerContent>
+      </Drawer>
+    </>
+  );
+};
+
+export default PromptsDrawer;