add search button to home page

sametcn99 · Jun 22, 2024 · 9bf320d · 9bf320d · vercel · Jun 22, 2024
1 parent 7ecc0ce
commit 9bf320d
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 3 deletions.
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -98,7 +98,7 @@ export default function RootLayout({
             grayColor="slate"
             radius="large"
           >
-            <main className=" flex w-full flex-col gap-4 p-2 pt-4 transition-all duration-1000 sm:w-[30rem] md:w-[40rem] lg:w-[60rem] xl:w-[70rem] 2xl:w-[80rem]">
+            <main className=" flex w-full flex-col items-center gap-4 p-2 pt-4 transition-all duration-1000 sm:w-[30rem] md:w-[40rem] lg:w-[60rem] xl:w-[70rem] 2xl:w-[80rem]">
               <Navbar />
               {children}
               <Footer />

diff --git a/components/Search.tsx b/components/Search.tsx
@@ -85,7 +85,7 @@ export default function SearchBar({ className }: { className?: string }) {
       >
         <Button>
           <FaSearch />
-          Search
+          Search User
         </Button>
       </Dialog.Trigger>
       <Dialog.Content style={{ maxWidth: 450 }}>

diff --git a/components/home/Hero.tsx b/components/home/Hero.tsx
@@ -1,11 +1,12 @@
 import { Heading, Section, Text } from "@radix-ui/themes";
 import ChromeStore from "./ChromeStore";
 import Image from "next/image";
+import SearchBar from "../Search";
 
 export default function Hero() {
   return (
     <Section
-      className="flex flex-col items-center justify-center gap-4 text-center"
+      className="flex flex-col items-center justify-center gap-4 text-center w-fit"
       id="hero"
     >
       <Heading size="9" className="animated-header">
@@ -15,6 +16,7 @@ export default function Hero() {
         Explore GitHub and Gist profiles effortlessly, utilizing the GitHub REST
         API to retrieve comprehensive information.
       </Text>
+      <SearchBar/>
       <ChromeStore />
       <Image
         src="/icons/octocat.png"