-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'main' into feature/adjust-starting-the-whole-app
- Loading branch information
Showing
19 changed files
with
333 additions
and
23 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -135,6 +135,9 @@ dist | |
| .vscode-test | ||
| .vscode | ||
|
|
||
| # .idea | ||
| .idea | ||
|
|
||
| # yarn v2 | ||
| .yarn/cache | ||
| .yarn/unplugged | ||
|
|
||
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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 |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| import { Message } from "@/components/ui/messages/message"; | ||
| import { useEffect, useRef } from "react"; | ||
|
|
||
| export const FriendChat = ({ id }: { id: number }) => { | ||
| const endOfMessagesRef = useRef<null | HTMLDivElement>(null); | ||
|
|
||
| useEffect(() => { | ||
| endOfMessagesRef.current?.scrollIntoView(); | ||
| }, []); | ||
| return ( | ||
| <section | ||
| className={`scrollbar-hide scrollbar-none lg:scrollbar-show lg:scrollbar-block flex w-full flex-col-reverse overflow-y-auto bg-zinc-600/50 pt-5 lg:w-3/4 ${window.innerWidth < 1024 ? " slide-in-from-bottom animate-in duration-700" : ""}`} | ||
| > | ||
| <div className="flex flex-col gap-4"> | ||
| {Array.from({ length: 25 }).map((_, index) => ( | ||
| <Message key={index} id={id.toString()} index={index} /> | ||
| ))} | ||
| <div className="sticky bottom-0 w-full px-2 pt-3"> | ||
| <input | ||
| className="w-full rounded-md border-2 border-zinc-700 border-solid bg-zinc-700 px-4 py-3 text-white text-xs outline-none" | ||
| name="text" | ||
| placeholder={`Message @Friend ${id}`} | ||
| type="text" | ||
| /> | ||
| </div> | ||
|
|
||
| <div ref={endOfMessagesRef} /> | ||
| </div> | ||
| </section> | ||
| ); | ||
| }; |
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 |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| import { Logo } from "@/components/ui/logo"; | ||
|
|
||
| export const FriendMiniProfile = ({ id }: { id: number }) => { | ||
| return ( | ||
| <aside className="hidden w-2/5 flex-col justify-between bg-zinc-900 lg:flex"> | ||
| <div> | ||
| <div className="h-20 w-full bg-slate-700"></div> | ||
| <div className="flex cursor-pointer flex-col gap-4 p-4"> | ||
| <Logo | ||
| alt="Friend" | ||
| className="-mt-10 h-20 w-20 rounded-full bg-black p-3 hover:rounded-full hover:opacity-80" | ||
| /> | ||
|
|
||
| <h2 className="font-bold text-2xl text-white hover:underline"> | ||
| Friend Number {id} | ||
| </h2> | ||
| <p className="text-white/80 hover:underline"> | ||
| username {id} | ||
| </p> | ||
| <div className="mx-auto w-5/6 cursor-default rounded-lg bg-zinc-950 p-2"> | ||
| <p>Member Since</p> | ||
| <p className="mt-4 text-white/80"> | ||
| {new Date().toDateString()} | ||
| </p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <p className="cursor-pointer border-t-2 p-4 text-center"> | ||
| View Full Profile | ||
| </p> | ||
| </aside> | ||
| ); | ||
| }; |
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 |
|---|---|---|
| @@ -0,0 +1,69 @@ | ||
| import hambuger from "@/assets/hamburger.svg"; | ||
| import videoCall from "@/assets/video-call.svg"; | ||
| import voiceCall from "@/assets/voice-call.svg"; | ||
| import { Logo } from "@/components/ui/logo"; | ||
| import { | ||
| Tooltip, | ||
| TooltipContent, | ||
| TooltipProvider, | ||
| TooltipTrigger, | ||
| } from "@/components/ui/tooltip"; | ||
| import { useResponsive } from "@/providers/responsive-provider"; | ||
|
|
||
| export const FirendNavbar = ({ id }: { id: number }) => { | ||
| const { isNavsOpen, openNavs } = useResponsive(); | ||
| return ( | ||
| <section | ||
| className={`-mt-[0.8px] border-b border-b-black ${window.innerWidth < 1024 ? "slide-in-from-top animate-in duration-700" : ""}`} | ||
| > | ||
| <nav className="flex items-center justify-between bg-zinc-600/50 px-4 py-2 md:w-full md:flex-row"> | ||
| <div className="flex items-center gap-2"> | ||
| <button | ||
| className={isNavsOpen ? "hidden" : "inline"} | ||
| onClick={() => openNavs()} | ||
| > | ||
| <img src={hambuger} alt="hamburger" /> | ||
| </button> | ||
| <Logo className="h-8 w-8 rounded-full" alt="Friend" /> | ||
| <h1 className="font-bold">Friend number {id}</h1> | ||
| {/* vertical line */} | ||
| <div className="ml-4 hidden h-8 w-[1px] bg-gray-100/50 md:block"></div> | ||
| <p className="hidden cursor-default rounded-full bg-zinc-800 px-2 py-1 font-bold text-gray-100/50 text-xs md:block"> | ||
| AKA | ||
| </p> | ||
| <p className="hidden font-thin text-gray-100/70 md:block"> | ||
| username {id} | ||
| </p> | ||
| </div> | ||
| <div className="hidden items-center gap-4 md:flex"> | ||
| <TooltipProvider> | ||
| <Tooltip delayDuration={0}> | ||
| <TooltipTrigger> | ||
| <img | ||
| src={voiceCall} | ||
| alt="Voice call" | ||
| className="h-7 w-7" | ||
| /> | ||
| </TooltipTrigger> | ||
| <TooltipContent side="top"> | ||
| Voice call | ||
| </TooltipContent> | ||
| </Tooltip> | ||
| <Tooltip> | ||
| <TooltipTrigger> | ||
| <img | ||
| src={videoCall} | ||
| alt="Video call" | ||
| className="h-7 w-7" | ||
| /> | ||
| </TooltipTrigger> | ||
| <TooltipContent side="top"> | ||
| Video call | ||
| </TooltipContent> | ||
| </Tooltip> | ||
| </TooltipProvider> | ||
| </div> | ||
| </nav> | ||
| </section> | ||
| ); | ||
| }; |
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 |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| import reply from "@/assets/reply.svg"; | ||
|
|
||
| export const MessageActions = ({ | ||
| reactHandler, | ||
| }: { | ||
| reactHandler: Function; | ||
| }) => { | ||
| const emojis = ["👍", "❤️", "😂", "😢", "😡"]; | ||
|
|
||
| return ( | ||
| <div className="flex items-center gap-1 rounded-lg bg-zinc-900/50 px-1 md:text-2xl"> | ||
| {emojis.map((emoji, index) => ( | ||
| <button | ||
| key={index} | ||
| className="rounded-lg p-0 hover:scale-105 hover:bg-zinc-800/50 md:p-1" | ||
| onClick={() => reactHandler(emoji)} | ||
| > | ||
| {emoji} | ||
| </button> | ||
| ))} | ||
| <button className="rounded-lg p-0 hover:scale-105 hover:bg-zinc-800/50 md:p-1"> | ||
| <img src={reply} alt="Reply" /> | ||
| </button> | ||
| </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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,43 @@ | ||
| import { Logo } from "@/components/ui/logo"; | ||
| import { MessageActions } from "@/components/ui/messages/message-actions"; | ||
| import { useState } from "react"; | ||
|
|
||
| export const Message = ({ index, id }: { index: number; id: string }) => { | ||
| const [react, setReact] = useState<null | string>(null); | ||
|
|
||
| const reactHandler = (emoji: string) => { | ||
| setReact(emoji); | ||
| }; | ||
|
|
||
| return ( | ||
| <div className="group relative flex cursor-default gap-2 px-5 py-2 hover:bg-zinc-800/50"> | ||
| <div className="-top-5 absolute right-0 hidden group-hover:block"> | ||
| <MessageActions reactHandler={reactHandler} /> | ||
| </div> | ||
| <button | ||
| onClick={() => { | ||
| setReact(null); | ||
| }} | ||
| className="-bottom-3.5 absolute left-6 rounded-lg bg-zinc-900 px-1 text-lg text-zinc-300" | ||
| > | ||
| {react} | ||
| </button> | ||
|
|
||
| <Logo | ||
| alt="Friend" | ||
| className="h-10 w-10 rounded-full hover:rounded-full" | ||
| /> | ||
| <div className="w-full"> | ||
| <div className="flex items-center gap-2"> | ||
| <h2 className="font-bold text-white"> | ||
| {index % 2 === 0 ? `Friend ${id}` : `TheGoatt`} | ||
| </h2> | ||
| <p className="text-white/40 text-xs"> | ||
| {new Date().toLocaleString()} | ||
| </p> | ||
| </div> | ||
| <p>Welcome this is a message number {index}</p> | ||
| </div> | ||
| </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
Oops, something went wrong.