Merge pull request #54 from ShreyTanna29/add-surprise-me-feature

feat: add surprise me button

app/(dashboard)/(routes)/image/page.tsx

@@ -32,6 +32,7 @@ import LoadingSpinner from "@/components/loadingSpinner";
 import { Textarea } from "@/components/ui/textarea";
 import { TextGenerateEffect } from "@/components/text-generate-effect";
 import Loader from "@/components/loader";
+import { MovingBorderButton } from "@/components/moving-border";
 
 type imageType = {
   url: string;
@@ -43,6 +44,7 @@ function ImagePage() {
   const [prevImages, setPrevImages] = useState<imageType[]>([]);
   const [showPrevImages, setShowPrevImages] = useState(false);
   const [loadingImages, setLoadingImages] = useState(false)
+  const [surpriseMeLoading, setSurpriseMeLoading] = useState(false)
   const [deletingImages, setDeletingImages] = useState<{
     [key: string]: boolean;
   }>({});
@@ -112,6 +114,15 @@ function ImagePage() {
     setDeletingImages((prev) => ({ ...prev, [url]: false }))
   }
 
+  const surpriseMeHandler = async () => {
+    setSurpriseMeLoading(true)
+    const response = await axios.post("/api/chat", {
+      prompt: "Give me a unique and amazing prompt for an image generation model. give me prompt directly without any extra text"
+    })
+
+    form.setValue("prompt", response.data)
+    setSurpriseMeLoading(false)
+  }
 
 
   return (
@@ -155,7 +166,17 @@ function ImagePage() {
         </div>
         <div className="space-y-4 mt-4">
 
-          <div className="flex w-full items-center justify-center">
+          <div className=" flex w-full flex-wrap gap-4 md:items-center md:justify-center">
+            <div className="" aria-disabled={surpriseMeLoading}>
+              <MovingBorderButton
+                className="bg-white rounded-lg  dark:bg-slate-900 text-black dark:text-white border-neutral-200 dark:border-slate-800" borderRadius="2rem"
+                onClick={() => {
+                  surpriseMeHandler()
+                }}>
+                Surprise Me  { } {surpriseMeLoading ? <LoadingSpinner className="ml-2" /> : "✨"}
+              </MovingBorderButton>
+            </div>
+
 
             <div className="cursor-pointer flex bg-black/10 text-sm md:text-lg rounded-lg p-4 items-center justify-center gap-2 dark:bg-white/10" onClick={() => {
               setShowPrevImages(!showPrevImages)

components/loadingSpinner.tsx

@@ -1,6 +1,6 @@
 
-export default function LoadingSpinner() {
+export default function LoadingSpinner({ className }: { className?: string }) {
     return (
-        <div className="border-white h-5 w-5 animate-spin rounded-full border-4 border-t-white/10" />
+        <div className={`border-white h-5 w-5 animate-spin rounded-full border-4 border-t-white/10 ${className} `} />
     )
 }

components/moving-border.tsx

@@ -0,0 +1,140 @@
+"use client";
+import React from "react";
+import {
+    motion,
+    useAnimationFrame,
+    useMotionTemplate,
+    useMotionValue,
+    useTransform,
+} from "framer-motion";
+import { useRef } from "react";
+import { cn } from "@/lib/utils";
+
+export function MovingBorderButton({
+    borderRadius = "1.75rem",
+    children,
+    as: Component = "button",
+    containerClassName,
+    borderClassName,
+    duration,
+    className,
+    ...otherProps
+}: {
+    borderRadius?: string;
+    children: React.ReactNode;
+    as?: any;
+    containerClassName?: string;
+    borderClassName?: string;
+    duration?: number;
+    className?: string;
+    [key: string]: any;
+}) {
+    return (
+        <Component
+            className={cn(
+                "bg-transparent relative text-xl  h-16 w-40 p-[1px] overflow-hidden ",
+                containerClassName
+            )}
+            style={{
+                borderRadius: borderRadius,
+            }}
+            {...otherProps}
+        >
+            <div
+                className="absolute inset-0"
+                style={{ borderRadius: `calc(${borderRadius} * 0.96)` }}
+            >
+                <MovingBorder duration={duration} rx="30%" ry="30%">
+                    <div
+                        className={cn(
+                            "h-20 w-20 opacity-[0.8] bg-[radial-gradient(var(--sky-500)_40%,transparent_60%)]",
+                            borderClassName
+                        )}
+                    />
+                </MovingBorder>
+            </div>
+
+            <div
+                className={cn(
+                    "relative bg-slate-900/[0.8] border border-slate-800 backdrop-blur-xl text-white flex items-center justify-center w-full h-full text-sm antialiased",
+                    className
+                )}
+                style={{
+                    borderRadius: `calc(${borderRadius} * 0.96)`,
+                }}
+
+            >
+                {children}
+            </div>
+        </Component>
+    );
+}
+
+export const MovingBorder = ({
+    children,
+    duration = 2000,
+    rx,
+    ry,
+    ...otherProps
+}: {
+    children: React.ReactNode;
+    duration?: number;
+    rx?: string;
+    ry?: string;
+    [key: string]: any;
+}) => {
+    const pathRef = useRef<any>();
+    const progress = useMotionValue<number>(0);
+
+    useAnimationFrame((time) => {
+        const length = pathRef.current?.getTotalLength();
+        if (length) {
+            const pxPerMillisecond = length / duration;
+            progress.set((time * pxPerMillisecond) % length);
+        }
+    });
+
+    const x = useTransform(
+        progress,
+        (val) => pathRef.current?.getPointAtLength(val).x
+    );
+    const y = useTransform(
+        progress,
+        (val) => pathRef.current?.getPointAtLength(val).y
+    );
+
+    const transform = useMotionTemplate`translateX(${x}px) translateY(${y}px) translateX(-50%) translateY(-50%)`;
+
+    return (
+        <>
+            <svg
+                xmlns="http://www.w3.org/2000/svg"
+                preserveAspectRatio="none"
+                className="absolute h-full w-full"
+                width="100%"
+                height="100%"
+                {...otherProps}
+            >
+                <rect
+                    fill="none"
+                    width="100%"
+                    height="100%"
+                    rx={rx}
+                    ry={ry}
+                    ref={pathRef}
+                />
+            </svg>
+            <motion.div
+                style={{
+                    position: "absolute",
+                    top: 0,
+                    left: 0,
+                    display: "inline-block",
+                    transform,
+                }}
+            >
+                {children}
+            </motion.div>
+        </>
+    );
+};

tailwind.config.ts

@@ -1,4 +1,9 @@
 import type { Config } from "tailwindcss";
+const defaultTheme = require("tailwindcss/defaultTheme");
+const colors = require("tailwindcss/colors");
+const {
+  default: flattenColorPalette,
+} = require("tailwindcss/lib/util/flattenColorPalette");
 
 const config: Config = {
   darkMode: "selector",
@@ -71,6 +76,21 @@ const config: Config = {
       },
     },
   },
-  plugins: [require("tailwindcss-animate"), require("tailwind-scrollbar")],
+  plugins: [
+    require("tailwindcss-animate"),
+    require("tailwind-scrollbar"),
+    addVariablesForColors,
+  ],
 };
 export default config;
+
+function addVariablesForColors({ addBase, theme }: any) {
+  let allColors = flattenColorPalette(theme("colors"));
+  let newVars = Object.fromEntries(
+    Object.entries(allColors).map(([key, val]) => [`--${key}`, val])
+  );
+
+  addBase({
+    ":root": newVars,
+  });
+}