[ref] component result card #76
There are no files selected for viewing
This file contains hidden or 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 hidden or 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 hidden or 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,55 @@ | ||
| type Candidate = { | ||
| image: string; | ||
| candidate: string; | ||
| vice: string; | ||
| party: string; | ||
| percentage: string; | ||
| votes: string; | ||
| }; | ||
|
|
||
| const candidates: Candidate[] = [ | ||
| { | ||
| image: "https://picsum.photos/id/237/200/300", | ||
| candidate: "Jiji Ping Png", | ||
| vice: "Xinguilingui", | ||
| party: "PCC", | ||
| percentage: "35.2%", | ||
| votes: "3,200,000", | ||
| }, | ||
| { | ||
| image: "https://picsum.photos/id/444/200/300", | ||
| candidate: "Vladimir Putin", | ||
| vice: "Zelensky", | ||
| party: "ABC", | ||
| percentage: "28.1%", | ||
| votes: "2,550,000", | ||
| }, | ||
| { | ||
| image: "https://picsum.photos/id/398/200/300", | ||
| candidate: "Lulão da massa", | ||
| vice: "Xuxu", | ||
| party: "DEF", | ||
| percentage: "18.4%", | ||
| votes: "1,670,000", | ||
| }, | ||
| { | ||
| image: "https://picsum.photos/id/577/200/300", | ||
| candidate: "Biden", | ||
| vice: "Gagá", | ||
| party: "GHI", | ||
| percentage: "12.3%", | ||
| votes: "1,120,000", | ||
| }, | ||
| { | ||
| image: "https://picsum.photos/id/610/200/300", | ||
| candidate: "Trump", | ||
| vice: "Bolsonaro", | ||
| party: "JKL", | ||
| percentage: "6.0%", | ||
| votes: "540,000", | ||
| }, | ||
| ]; | ||
|
|
||
| export function getCandidates() { | ||
| return candidates; | ||
| } |
This file contains hidden or 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,45 @@ | ||
| import { Avatar, AvatarImage } from "@packages/shadcn-ui/ui/avatar"; | ||
| import { Card } from "@packages/shadcn-ui/ui/card"; | ||
|
|
||
| interface ElectionResult { | ||
| image: string; | ||
| candidate: string; | ||
| vice: string; | ||
| party: string; | ||
| percentagem: string; | ||
| votos: string; | ||
| } | ||
| function ResultCard({ | ||
| candidate, | ||
| vice, | ||
| party, | ||
| percentagem, | ||
| votos, | ||
|
|
||
| image, | ||
| }: ElectionResult) { | ||
| return ( | ||
| <Card className="flex flex-row w-[60vw] p-4 shadow-md shadow-gray-200"> | ||
| <div className="flex w-[40vw] gap-4"> | ||
| <Avatar className="w-16 h-16"> | ||
| <AvatarImage src={image} /> | ||
| </Avatar> | ||
| <div> | ||
| <p className="font-bold">Presidente: {candidate}</p> | ||
|
Contributor
There was a problem hiding this comment. It's ok to have portuguese on the text displayed to the user (we can enhance that with internationalization) but code and variables, always in colonizador language |
||
| <p className="text-sm">Vice: {vice}</p> | ||
| <p className="text-xs">{party}</p> | ||
| </div> | ||
| </div> | ||
| <div className="flex flex-col items-end justify-center w-1/2 gap-1"> | ||
| <p className="text-sm"> | ||
| Percentagem dos votos:{" "} | ||
| <span className="font-bold">{percentagem}</span> | ||
| </p> | ||
| <p className="text-sm"> | ||
| Total de votos: <span className="font-bold">{votos}</span> | ||
| </p> | ||
| </div> | ||
| </Card> | ||
| ); | ||
| } | ||
|
|
||
| export default ResultCard; | ||
This file contains hidden or 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,50 @@ | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| "use client"; | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| import * as AvatarPrimitive from "@radix-ui/react-avatar"; | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| import * as React from "react"; | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| import { cn } from "@packages/utils/shadcn-utils"; | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| const Avatar = React.forwardRef< | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| React.ElementRef<typeof AvatarPrimitive.Root>, | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| >(({ className, ...props }, ref) => ( | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| <AvatarPrimitive.Root | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| ref={ref} | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| className={cn( | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full", | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| className, | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| )} | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| {...props} | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| /> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| )); | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Avatar.displayName = AvatarPrimitive.Root.displayName; | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| const AvatarImage = React.forwardRef< | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| React.ElementRef<typeof AvatarPrimitive.Image>, | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| >(({ className, ...props }, ref) => ( | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| <AvatarPrimitive.Image | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| ref={ref} | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| className={cn("aspect-square h-full w-full", className)} | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| {...props} | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| /> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| )); | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| AvatarImage.displayName = AvatarPrimitive.Image.displayName; | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| const AvatarFallback = React.forwardRef< | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| React.ElementRef<typeof AvatarPrimitive.Fallback>, | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| >(({ className, ...props }, ref) => ( | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| <AvatarPrimitive.Fallback | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| ref={ref} | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| className={cn( | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| "flex h-full w-full items-center justify-center rounded-full bg-muted", | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| className, | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| )} | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| {...props} | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| /> | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| )); | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName; | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
Comment on lines
+35
to
+48
There was a problem hiding this comment. I personally found this code kind of ugly, code :( Maybe we can use something like: https://www.npmjs.com/package/tailwind-styled-components There was a problem hiding this comment. same issue for the shared components bellow
Member
There was a problem hiding this comment. That's what shadcn components looks like. Then maybe choose something else? or just create the components from scratch?
Contributor
There was a problem hiding this comment. Exactly, this is also code that we're not suposed to maintain, as zenha mentioned, this is shadcn's component, I don't see value on re-writing it. There was a problem hiding this comment. this is so sad I wanna die 😢 Warning I don't like shadcn There was a problem hiding this comment. Let me explain better my POV: How can we see a We intended to share some styles, but instead we created In my opinion, this code is challenging to maintain because it requires a deep understanding of the need for There was a problem hiding this comment. If you guys are saying that this is the shadcn way, I won't block this PR, BUT still ugly as hell Let's at least create a wrapper to hide this ugliness There was a problem hiding this comment. Suggested style wrapper
Suggested change
Then you can do something like const AvatarFallback = WithStyles(
AvatarPrimitive.Fallback,
"flex h-full w-full items-center justify-center rounded-full bg-muted",
)
const Avatar = WithStyles(
AvatarPrimitive.Root,
"flex h-full w-full items-center justify-center rounded-full bg-muted",
)
const AvatarImage = WithStyles(
AvatarPrimitive.Image,
"flex h-full w-full items-center justify-center rounded-full bg-muted",
) |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| export { Avatar, AvatarImage, AvatarFallback }; | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
This file contains hidden or 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,86 @@ | ||
| import * as React from "react"; | ||
|
|
||
| import { cn } from "@packages/utils/shadcn-utils"; | ||
|
|
||
| const Card = React.forwardRef< | ||
| HTMLDivElement, | ||
| React.HTMLAttributes<HTMLDivElement> | ||
| >(({ className, ...props }, ref) => ( | ||
| <div | ||
| ref={ref} | ||
| className={cn( | ||
| "rounded-lg border bg-card text-card-foreground shadow-sm", | ||
| className, | ||
| )} | ||
| {...props} | ||
| /> | ||
| )); | ||
| Card.displayName = "Card"; | ||
|
|
||
| const CardHeader = React.forwardRef< | ||
| HTMLDivElement, | ||
| React.HTMLAttributes<HTMLDivElement> | ||
| >(({ className, ...props }, ref) => ( | ||
| <div | ||
| ref={ref} | ||
| className={cn("flex flex-col space-y-1.5 p-6", className)} | ||
| {...props} | ||
| /> | ||
| )); | ||
| CardHeader.displayName = "CardHeader"; | ||
|
|
||
| const CardTitle = React.forwardRef< | ||
| HTMLParagraphElement, | ||
| React.HTMLAttributes<HTMLHeadingElement> | ||
| >(({ className, ...props }, ref) => ( | ||
| <h3 | ||
| ref={ref} | ||
| className={cn( | ||
| "text-2xl font-semibold leading-none tracking-tight", | ||
| className, | ||
| )} | ||
| {...props} | ||
| /> | ||
| )); | ||
| CardTitle.displayName = "CardTitle"; | ||
|
|
||
| const CardDescription = React.forwardRef< | ||
| HTMLParagraphElement, | ||
| React.HTMLAttributes<HTMLParagraphElement> | ||
| >(({ className, ...props }, ref) => ( | ||
| <p | ||
| ref={ref} | ||
| className={cn("text-sm text-muted-foreground", className)} | ||
| {...props} | ||
| /> | ||
| )); | ||
| CardDescription.displayName = "CardDescription"; | ||
|
|
||
| const CardContent = React.forwardRef< | ||
| HTMLDivElement, | ||
| React.HTMLAttributes<HTMLDivElement> | ||
| >(({ className, ...props }, ref) => ( | ||
| <div ref={ref} className={cn("p-6 pt-0", className)} {...props} /> | ||
| )); | ||
| CardContent.displayName = "CardContent"; | ||
|
|
||
| const CardFooter = React.forwardRef< | ||
| HTMLDivElement, | ||
| React.HTMLAttributes<HTMLDivElement> | ||
| >(({ className, ...props }, ref) => ( | ||
| <div | ||
| ref={ref} | ||
| className={cn("flex items-center p-6 pt-0", className)} | ||
| {...props} | ||
| /> | ||
| )); | ||
| CardFooter.displayName = "CardFooter"; | ||
|
|
||
| export { | ||
| Card, | ||
| CardHeader, | ||
| CardFooter, | ||
| CardTitle, | ||
| CardDescription, | ||
| CardContent, | ||
| }; |
This file contains hidden or 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.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Variable in portuguese