-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #14 from git-init-priyanshu/nextjs
Search bar implementation & UI changes
- Loading branch information
Showing
22 changed files
with
561 additions
and
157 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,23 +1,19 @@ | ||
| 'use client' | ||
|
|
||
| import { Input } from "@/components/ui/input"; | ||
| import { useRef, useState } from "react" | ||
|
|
||
| type InputPropType = { | ||
| title: string; | ||
| } | ||
|
|
||
| export default function CardInput({title}:InputPropType) { | ||
| const inputRef = useRef<HTMLInputElement>(null); | ||
|
|
||
| const [name, setName] = useState(title) | ||
| import { CircleCheck } from "lucide-react"; | ||
|
|
||
| export default function CardInput({ title, value, ...props }: any) { | ||
| console.log(value) | ||
| return ( | ||
| <Input | ||
| ref={inputRef} | ||
| value={name} | ||
| className="w-full text-md border-none focus:outline-none" | ||
| onChange={(e) => setName(e.target.value)} | ||
| /> | ||
| <div className="relative"> | ||
| <Input | ||
| {...props} | ||
| value={value} | ||
| /> | ||
| <CircleCheck | ||
| className={`size-4 text-slate-500 hover:cursor-pointer absolute right-3 top-1/2 transform -translate-y-1/2`}> | ||
| </CircleCheck> | ||
| </div> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,99 +1,18 @@ | ||
| "use client" | ||
|
|
||
| import { useState } from "react" | ||
| import { useRouter } from "next/navigation" | ||
| import Image from "next/image" | ||
| import { toast } from "sonner" | ||
| import { | ||
| CloudUpload, | ||
| LogOut, | ||
| Plus, | ||
| Search, | ||
| } from "lucide-react" | ||
|
|
||
| import { Button } from "@/components/ui/button" | ||
| import { Input } from "@/components/ui/input" | ||
| import { CreateNewDocument, LogoutAction } from "./actions" | ||
| import logo from "@/public/doc.svg" | ||
| import useClientSession from "@/lib/customHooks/useClientSession" | ||
| import logo from "@/public/output-onlinepngtools.svg" | ||
| import SearchBar from "./components/SearchBar" | ||
| import HeaderButtons from "./components/HeaderButtons" | ||
|
|
||
| export default function Header() { | ||
| const router = useRouter(); | ||
|
|
||
| const session = useClientSession(); | ||
|
|
||
| const [isLoading, setIsLoading] = useState(false); | ||
|
|
||
| const createDocument = async () => { | ||
| setIsLoading(true); | ||
|
|
||
| if (!session?.id) return; | ||
| const response = await CreateNewDocument(session.id); | ||
| if (response.success) { | ||
| setIsLoading(false); | ||
| toast.success("Successfully created new document") | ||
| router.push(`/writer/${response.data?.id}`) | ||
| } else { | ||
| setIsLoading(false); | ||
| toast.error(response.error) | ||
| } | ||
| } | ||
|
|
||
| const logout = async () => { | ||
| const response = await LogoutAction(); | ||
| console.log(response); | ||
| if (response.success) { | ||
| toast.success("Successfully logged out") | ||
| router.push('/api/auth/signin') | ||
| } else { | ||
| toast.error(response.error) | ||
| } | ||
| } | ||
|
|
||
| return ( | ||
| <div className="flex border-b bg-white justify-between items-center py-2 px-4"> | ||
| <div className="flex gap-2 items-center"> | ||
| <Image src={logo} width={45} alt="logo" /> | ||
| <p className="text-2xl">Docx</p> | ||
| </div> | ||
| <div> | ||
| <Input className="relative pl-8 rounded-full" placeholder="Search documents..." /> | ||
| <Search size={20} className="absolute text-slate-500 top-5 ml-2" /> | ||
| </div> | ||
| <div className="flex gap-4"> | ||
| <Button | ||
| variant="outline" | ||
| className="flex gap-2 text-blue-500 hover:text-blue-500 hover:border-blue-200 rounded-full" | ||
| > | ||
| <CloudUpload size={15} /> | ||
| Upload | ||
| </Button> | ||
| <Button | ||
| className="flex gap-2 bg-blue-500 text-white hover:bg-blue-600 rounded-full" | ||
| onClick={createDocument} | ||
| disabled={isLoading} | ||
| > | ||
| {isLoading ? <svg | ||
| className="animate-spin lucide lucide-loader-circle" | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| width="20" | ||
| height="20" | ||
| viewBox="0 0 24 24" | ||
| fill="none" stroke="currentColor" | ||
| stroke-width="2" stroke-linecap="round" | ||
| stroke-linejoin="round"> | ||
| <path d="M21 12a9 9 0 1 1-6.219-8.56" /> | ||
| </svg> : <Plus size={20} />} | ||
| Create New | ||
| </Button> | ||
| <Button | ||
| variant="outline" | ||
| className="flex gap-2 text-blue-500 hover:text-blue-500 hover:border-blue-200 rounded-full" | ||
| onClick={logout} | ||
| > | ||
| <LogOut size={15} /> | ||
| </Button> | ||
| {/* <p className="text-2xl">Docx</p> */} | ||
| </div> | ||
| <SearchBar /> | ||
| <HeaderButtons /> | ||
| </div> | ||
| ) | ||
| } |
Oops, something went wrong.