feat: update Navbar link, enhance Chat components, and add animated b…

…eam feature
mrsamirr · Oct 6, 2024 · 25bad25 · 25bad25
1 parent dd1032c
commit 25bad25
Show file tree

Hide file tree

Showing 15 changed files with 492 additions and 3,096 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/components/ChatParams/ChatInput.tsx b/components/ChatParams/ChatInput.tsx
@@ -35,7 +35,7 @@ export const ChatInput = ({ handleInputChange, handleSubmit, input, setInput }:
                                 setInput("")
                             }
                         }}
-                        placeholder="Enter your question..." className="resize-none bg-zinc-800 hover:bg-zinc-900 rounded-xl text-base"
+                        placeholder="Ask Me Anything..." className="resize-none bg-zinc-800 hover:bg-zinc-900 rounded-xl text-base"
                     />
 
                     <Button

diff --git a/components/ChatParams/ChatWrapper.tsx b/components/ChatParams/ChatWrapper.tsx
@@ -19,7 +19,7 @@ export const ChatWrapper = ({
 
   return (
     <div className="relative min-h-full bg-zinc-900 flex divide-y divide-zinc-700 flex-col justify-between gap-2">
-      <div className="flex-1 text-black bg-zinc-800 justify-between flex-col">
+      <div className="flex-1 text-black bg-black justify-between flex-col">
         <Messages messages={messages} />
       </div>
 

diff --git a/components/ChatParams/Messages.tsx b/components/ChatParams/Messages.tsx
@@ -1,6 +1,7 @@
 import { type Message as TMessage } from "ai/react"
 import { Message } from "./Message"
 import { MessageSquare } from "lucide-react"
+import { TheAnimatedBeam } from "./TheAnimate"
 
 interface MessagesProps {
     messages: TMessage[]
@@ -9,13 +10,18 @@ interface MessagesProps {
 export const Messages = ({ messages }: MessagesProps) => {
     return (
         <div className="flex max-h-[calc(100vh-3.5rem-7rem)] flex-1 flex-col overflow-y-auto">
-            { messages.length ? messages.map((message, i) => (
+            {messages.length ? messages.map((message, i) => (
                 <Message key={i} content={message.content} isUserMessage={message.role === "user"} />
             )) : (
-                <div className="flex-1 flex flex-col items-center justify-center gap-2">
-                    <MessageSquare className="size-8 text-blue-500" />
-                    <h3 className="font-semibold text-xl text-white">You&apos;re all set!</h3>
-                    <p className="text-zinc-500 text-sm">Ask your first question to get started.</p>
+                <div>
+                    <div className="flex-1 flex flex-col items-center justify-center gap-2">
+                        <MessageSquare className="size-8 text-blue-500" />
+                        <h3 className="font-semibold text-xl text-white">You&apos;re all set!</h3>
+                        <p className="text-zinc-500 text-sm">Ask your first question to get started.</p>
+                    </div>
+                    <div className="flex justify-center items-center mt-80">
+                        <TheAnimatedBeam />
+                    </div>
                 </div>
 
             )}

diff --git a/components/ChatParams/TheAnimate.tsx b/components/ChatParams/TheAnimate.tsx
@@ -0,0 +1,102 @@
+"use client";
+
+import React, { forwardRef, useRef } from "react";
+
+import { cn } from "@/lib/utils";
+import { AnimatedBeam } from "../ui/animated-beam";
+
+const Circle = forwardRef<
+    HTMLDivElement,
+    { className?: string; children?: React.ReactNode }
+>(({ className, children }, ref) => {
+    return (
+        <div
+            ref={ref}
+            className={cn(
+                "z-10 flex size-12 items-center justify-center rounded-full border-2 bg-white p-3 shadow-[0_0_20px_-12px_rgba(0,0,0,0.8)]",
+                className,
+            )}
+        >
+            {children}
+        </div>
+    );
+});
+
+Circle.displayName = "Circle";
+
+export function TheAnimatedBeam() {
+    const containerRef = useRef<HTMLDivElement>(null);
+    const div1Ref = useRef<HTMLDivElement>(null);
+    const div2Ref = useRef<HTMLDivElement>(null);
+
+    return (
+        <div
+            className="relative flex w-full max-w-[700px] items-center justify-center overflow-hidden rounded-lg  bg-transparent p-10 md:shadow-xl"
+            ref={containerRef}
+        >
+            <div className="flex size-full flex-col items-stretch justify-between gap-10">
+                <div className="flex flex-row justify-between">
+                    <Circle ref={div1Ref}>
+                        <Icons.user />
+                    </Circle>
+                    <Circle ref={div2Ref}>
+                        <Icons.auroraai />
+                    </Circle>
+                </div>
+            </div>
+
+            <AnimatedBeam
+                containerRef={containerRef}
+                fromRef={div1Ref}
+                toRef={div2Ref}
+                startYOffset={10}
+                endYOffset={10}
+                curvature={-20}
+            />
+            <AnimatedBeam
+                containerRef={containerRef}
+                fromRef={div1Ref}
+                toRef={div2Ref}
+                startYOffset={-10}
+                endYOffset={-10}
+                curvature={20}
+                reverse
+            />
+        </div>
+    );
+}
+
+const Icons = {
+    auroraai: () => (
+        <svg
+      width="50"
+      height="50"
+      viewBox="0 0 32 32"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect width="100%" height="100%" rx="16" fill="white" />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M17.6482 10.1305L15.8785 7.02583L7.02979 22.5499H10.5278L17.6482 10.1305ZM19.8798 14.0457L18.11 17.1983L19.394 19.4511H16.8453L15.1056 22.5499H24.7272L19.8798 14.0457Z"
+        fill="black"
+      />
+    </svg>
+
+    ),
+    user: () => (
+        <svg
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="#000000"
+            strokeWidth="2"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" />
+            <circle cx="12" cy="7" r="4" />
+        </svg>
+    ),
+};
diff --git a/components/Reviews/Review.tsx b/components/Reviews/Review.tsx
@@ -1,3 +1,4 @@
+"use client"
 import { cn } from "@/lib/utils";
 import Marquee from "@/components/ui/Reviews/review";
 import { reviews } from "@/data/review";
@@ -11,11 +12,13 @@ const ReviewCard = ({
     name,
     username,
     body,
+    live
 }: {
     img: string;
     name: string;
     username: string;
     body: string;
+    live: string;
 }) => {
     return (
         <figure
@@ -31,9 +34,11 @@ const ReviewCard = ({
                 <img className="rounded-full" width="32" height="32" alt="" src={img} />
                 <div className="flex flex-col">
                     <figcaption className="text-sm font-medium dark:text-white">
-                        {name}
+                        <a href={live} target="_blank" rel="noopener noreferrer">
+                            {name}
+                        </a>
                     </figcaption>
-                    <p className="text-xs font-medium dark:text-white/40">{username}</p>
+                    <p className="text-xs font-medium dark:text-white/40 p-2">{username}</p>
                 </div>
             </div>
             <blockquote className="mt-2 text-sm">{body}</blockquote>

diff --git a/components/icons/Upstash.tsx b/components/icons/Upstash.tsx
@@ -0,0 +1,7 @@
+const UpstashIcon = () => {
+    return (
+      <svg role="img" height="30" viewBox="0 0 1631 472" fill="none" xmlns="http://www.w3.org/2000/svg"><title>Upstash</title><path d="M0.421875 412.975C78.5269 491.079 205.16 491.079 283.265 412.975C361.369 334.87 361.369 208.237 283.265 130.132L247.909 165.487C306.488 224.066 306.488 319.041 247.909 377.619C189.331 436.198 94.3559 436.198 35.7769 377.619L0.421875 412.975Z" className="fill-emerald-400"></path><path d="M71.1328 342.264C110.185 381.316 173.501 381.316 212.554 342.264C251.606 303.212 251.606 239.895 212.554 200.843L177.199 236.198C196.725 255.724 196.725 287.382 177.199 306.909C157.672 326.435 126.014 326.435 106.488 306.909L71.1328 342.264Z" className="fill-emerald-400"></path><path d="M353.974 59.421C275.869 -18.6835 149.236 -18.6835 71.1315 59.421C-6.97352 137.526 -6.97352 264.159 71.1315 342.264L106.486 306.909C47.9085 248.33 47.9085 153.355 106.486 94.777C165.065 36.198 260.04 36.198 318.618 94.777L353.974 59.421Z" className="fill-emerald-300"></path><path d="M283.264 130.132C244.212 91.08 180.894 91.08 141.842 130.132C102.789 169.185 102.789 232.501 141.842 271.553L177.197 236.198C157.671 216.672 157.671 185.014 177.197 165.487C196.723 145.961 228.381 145.961 247.908 165.487L283.264 130.132Z" className="fill-emerald-300"></path><path d="M588.112 264.179C588.112 289.108 570.321 301.466 553.276 301.466C534.739 301.466 522.381 288.362 522.381 267.588V169.364H483.815V273.554C483.815 312.865 506.188 335.131 538.361 335.131C562.864 335.131 580.122 322.24 587.58 303.916H589.284V333H626.678V169.364H588.112V264.179ZM660.335 394.364H698.9V307.219H700.498C706.571 319.151 719.248 335.876 747.373 335.876C785.939 335.876 814.809 305.301 814.809 251.395C814.809 196.849 785.086 167.233 747.267 167.233C718.396 167.233 706.358 184.598 700.498 196.423H698.261V169.364H660.335V394.364ZM698.154 251.182C698.154 219.435 711.791 198.874 736.613 198.874C762.288 198.874 775.498 220.713 775.498 251.182C775.498 281.864 762.075 304.236 736.613 304.236C712.004 304.236 698.154 282.929 698.154 251.182ZM971.167 212.616C965.841 184.918 943.681 167.233 905.329 167.233C865.912 167.233 839.065 186.622 839.172 216.878C839.065 240.741 853.767 256.509 885.194 263.007L913.106 268.866C928.127 272.169 935.159 278.241 935.159 287.51C935.159 298.696 923.014 307.112 904.69 307.112C887.005 307.112 875.5 299.442 872.197 284.74L834.591 288.362C839.385 318.405 864.633 336.196 904.797 336.196C945.706 336.196 974.576 314.996 974.683 283.994C974.576 260.663 959.555 246.388 928.66 239.676L900.748 233.71C884.129 229.982 877.524 224.229 877.63 214.747C877.524 203.668 889.775 195.997 905.862 195.997C923.653 195.997 933.028 205.692 936.011 216.452L971.167 212.616ZM1082.19 169.364H1049.92V130.159H1011.35V169.364H988.125V199.193H1011.35V290.173C1011.14 320.962 1033.51 336.089 1062.49 335.237C1073.46 334.918 1081.02 332.787 1085.18 331.402L1078.68 301.253C1076.55 301.786 1072.18 302.744 1067.39 302.744C1057.69 302.744 1049.92 299.335 1049.92 283.781V199.193H1082.19V169.364ZM1155.54 336.303C1181.21 336.303 1196.55 324.264 1203.58 310.521H1204.86V333H1241.94V223.483C1241.94 180.23 1206.67 167.233 1175.46 167.233C1141.05 167.233 1114.63 182.574 1106.1 212.403L1142.11 217.517C1145.95 206.331 1156.81 196.743 1175.67 196.743C1193.57 196.743 1203.37 205.905 1203.37 221.991V222.631C1203.37 233.71 1191.76 234.243 1162.89 237.332C1131.14 240.741 1100.78 250.223 1100.78 287.084C1100.78 319.257 1124.32 336.303 1155.54 336.303ZM1165.55 307.964C1149.46 307.964 1137.96 300.614 1137.96 286.445C1137.96 271.636 1150.85 265.457 1168.11 263.007C1178.23 261.622 1198.47 259.065 1203.48 255.017V274.3C1203.48 292.517 1188.77 307.964 1165.55 307.964ZM1404.05 212.616C1398.72 184.918 1376.56 167.233 1338.21 167.233C1298.79 167.233 1271.94 186.622 1272.05 216.878C1271.94 240.741 1286.65 256.509 1318.07 263.007L1345.99 268.866C1361.01 272.169 1368.04 278.241 1368.04 287.51C1368.04 298.696 1355.89 307.112 1337.57 307.112C1319.88 307.112 1308.38 299.442 1305.08 284.74L1267.47 288.362C1272.26 318.405 1297.51 336.196 1337.68 336.196C1378.58 336.196 1407.46 314.996 1407.56 283.994C1407.46 260.663 1392.43 246.388 1361.54 239.676L1333.63 233.71C1317.01 229.982 1310.4 224.229 1310.51 214.747C1310.4 203.668 1322.65 195.997 1338.74 195.997C1356.53 195.997 1365.91 205.692 1368.89 216.452L1404.05 212.616ZM1471.93 237.119C1471.93 213.469 1486.63 199.832 1507.3 199.832C1527.54 199.832 1539.47 212.723 1539.47 234.776V333H1578.04V228.81C1578.04 189.286 1555.66 167.233 1521.68 167.233C1496.54 167.233 1480.56 178.632 1472.99 197.169H1471.08V114.818H1433.36V333H1471.93V237.119Z" fill="white"></path></svg>
+    );
+  };
+
+  export default UpstashIcon;
diff --git a/components/ui/Footer/Footer.tsx b/components/ui/Footer/Footer.tsx
@@ -2,7 +2,7 @@ import Link from 'next/link';
 
 import Logo from '@/components/icons/LogoIcon';
 import GitHub from '@/components/icons/GithubIcon';
-import Image from 'next/image';
+import UpstashIcon from '@/components/icons/Upstash';
 
 export default function Footer() {
     return (
@@ -90,18 +90,12 @@ export default function Footer() {
                     </span>
                 </div>
                 <div className="flex items-center">
-                    <span className="text-white">Crafted by</span>
-                    <a href="https://vercel.com" aria-label="Vercel.com Link">
-                        <Image
-                            width={80}
-                            height={80}
-                            src="/vercel-logo.svg"
-                            alt="Vercel.com Logo"
-                            className="inline-block h-6 ml-4 text-white"
-                        />
+                    <span className="text-white p-3">Powered by</span>
+                    <a href="https://upstash.com/" aria-label="upstash.com Link">
+                        <UpstashIcon />
                     </a>
                 </div>
             </div>
         </footer>
     );
-}
+}
diff --git a/components/ui/Navbar/Navlinks.tsx b/components/ui/Navbar/Navlinks.tsx
@@ -23,7 +23,7 @@ export default function Navlinks( ) {
       </div>
       <div className="flex justify-end space-x-8">
           <Link href="/">
-            Sign In
+            Docs
           </Link>
       </div>
     </div>
-Original file line number
+Diff line change
@@ Expand Up @@
                                     setInput("")
                                 }
                             }}
-                            placeholder="Enter your question..." className="resize-none bg-zinc-800 hover:bg-zinc-900 rounded-xl text-base"
+                            placeholder="Ask Me Anything..." className="resize-none bg-zinc-800 hover:bg-zinc-900 rounded-xl text-base"
                         />
                         <Button
@@ Expand Down @@