Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Feat/profile popover #138

Merged
merged 3 commits into from
Nov 28, 2023
Merged

Feat/profile popover #138

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
42e22ee
refactor: remove not user isFriend property
iaurg Nov 27, 2023
f90c5c8
feat: add buttons and remove bio description
iaurg Nov 27, 2023
53a94f0
Merge branch 'main' into feat/profile-popover
vcwild Nov 27, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 1 addition & 6 deletions frontend/src/components/LeaderBoard/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,12 +25,7 @@ export function LeaderBoard() {
) : (
<>
{data?.map((user: User) => (
<LeaderBoardCard
key={user.id}
score={user.victory}
isFriend={user.login.includes("m")}
user={user}
/>
<LeaderBoardCard key={user.id} score={user.victory} user={user} />
))}
</>
)}
Expand Down
20 changes: 3 additions & 17 deletions frontend/src/components/LeaderBoardCard/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,16 @@
"use client";
import { Trophy, UserPlus } from "@phosphor-icons/react";
import { Trophy } from "@phosphor-icons/react";
import { StatusTag } from "../StatusTag";
import ProfilePopOver from "../ProfilePopOver";
import UserAvatar from "../UserAvatar";
import { User } from "@/types/user";

type LeaderBoardCardProps = {
score: number;
isFriend: boolean;
user: User;
};

export function LeaderBoardCard({
score,
isFriend,
user,
}: LeaderBoardCardProps) {
export function LeaderBoardCard({ score, user }: LeaderBoardCardProps) {
return (
<div className="flex flex-row justify-between items-center py-3 bg-black42-200 p-4 rounded-lg w-full">
<ProfilePopOver name={user.login} score={score} id={user.id}>
Expand All @@ -27,18 +22,9 @@ export function LeaderBoardCard({
</ProfilePopOver>
<div className="flex flex-row justify-between items-center space-x-4">
<div className="flex flex-row justify-start items-center w-[50px]">
<Trophy className="text-purple42-200 mr-2" size={24} />
<Trophy className="text-yellow-600 mr-2" size={24} />
<span className="text-xl text-white">{score}</span>
</div>
<div>
{isFriend && (
<UserPlus
className="text-purple42-200 cursor-pointer"
size={24}
alt="Adicionar amigo"
/>
)}
</div>
</div>
</div>
);
Expand Down
60 changes: 26 additions & 34 deletions frontend/src/components/ProfilePopOver/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { api } from "@/services/apiClient";
import { queryClient } from "@/services/queryClient";
import { Popover } from "@headlessui/react";
import { ListNumbers, Play, UserPlus } from "@phosphor-icons/react";
import { useMutation } from "@tanstack/react-query";
import Link from "next/link";
import { useState } from "react";
Expand Down Expand Up @@ -60,46 +61,37 @@ export default function ProfilePopOver({
>
<div className="p-3">
<div className="flex items-center space-x-4 mb-4">
<button
type="button"
className="text-white bg-purple42-200 hover:bg-purple42-300 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-xs px-3 py-1.5 focus:outline-none "
<UserPlus
color="white"
className="text-white font-bold rounded-lg bg-purple42-200 transition-all hover:bg-purple42-300
flex items-center justify-center w-9 h-9 p-2 cursor-pointer"
size={14}
onClick={handleAddFriend}
>
Add amigo
</button>
<button
type="button"
className="text-white bg-purple42-200 hover:bg-purple42-300 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-xs px-3 py-1.5 focus:outline-none "
>
Jogar
</button>
<Link href={`/game/history/${id}`} passHref>
<button
type="button"
className="text-white bg-purple42-200 hover:bg-purple42-300 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-xs px-3 py-1.5 focus:outline-none "
>
Histórico
</button>
alt="Adicionar amigo"
/>
<Play
color="white"
className="text-white font-bold rounded-lg bg-purple42-200 transition-all hover:bg-purple42-300
flex items-center justify-center w-9 h-9 p-2 cursor-pointer"
size={14}
onClick={() => console.log("jogar")}
alt="Jogar"
/>

<Link href={`/game/history/${id}`} passHref title="Histórico">
<ListNumbers
color="white"
className="text-white font-bold rounded-lg bg-purple42-200 transition-all hover:bg-purple42-300
flex items-center justify-center w-9 h-9 p-2 cursor-pointer"
size={14}
/>
</Link>
</div>
<p className="text-base font-semibold leading-none text-white">
<a href="#">{name}</a>
</p>
<p className="mb-3 text-sm font-normal text-white">
<a href="#" className="hover:underline">
@{name}
</a>
</p>
<p className="mb-4 text-sm text-white">
Open-source contributor. Building{" "}
<a
href="#"
className="text-blue-600 dark:text-blue-500 hover:underline"
>
{name}@42org.br
</a>
</p>
<ul className="flex text-sm">

<ul className="flex text-sm mt-2">
<li className="mr-2">
<a href="#" className=" text-white">
<span className="font-semibold mr-2">{score}</span>
Expand Down
Loading