-
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.
feat(ui): review item component (#64)
- Loading branch information
Showing
21 changed files
with
400 additions
and
26 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 |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| import { CustomIcon, type CustomIconProps } from "./CustomIcon"; | ||
|
|
||
| export const ThumbUpFilledIcon = (props: CustomIconProps) => { | ||
| return ( | ||
| <CustomIcon fill="none" {...props}> | ||
| <path | ||
| d="M15 8H17.405C17.991 7.99991 18.5698 8.12857 19.1006 8.37688C19.6314 8.62518 20.1011 8.98708 20.4766 9.43696C20.852 9.88684 21.1241 10.4137 21.2735 10.9803C21.4228 11.547 21.4459 12.1395 21.341 12.716L20.431 17.716C20.2634 18.6373 19.7778 19.4706 19.059 20.0707C18.3401 20.6708 17.4334 20.9997 16.497 21H8V9L9.821 3.212C10.117 2.522 10.881 1.896 11.845 2.082C13.374 2.375 15 3.566 15 5.5V8ZM6 9C5.20435 9 4.44129 9.31607 3.87868 9.87868C3.31607 10.4413 3 11.2043 3 12V18C3 18.7956 3.31607 19.5587 3.87868 20.1213C4.44129 20.6839 5.20435 21 6 21V9Z" | ||
| fill="currentColor" | ||
| /> | ||
| </CustomIcon> | ||
| ); | ||
| }; |
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,20 +1,40 @@ | ||
| import { Button } from "@/common/components/Button"; | ||
| import { LockIcon } from "@/common/components/CustomIcon/LockIcon"; | ||
| import { lockCtaOverlayTheme } from "./LockCtaOverlay.theme"; | ||
| import { | ||
| lockCtaOverlayTheme, | ||
| type LockCtaOverlayVariants, | ||
| } from "./LockCtaOverlay.theme"; | ||
|
|
||
| export const LockCtaOverlay = () => { | ||
| const { wrapper, overlay, ctaTextContainer, icon } = lockCtaOverlayTheme(); | ||
| const ctaTextMap = { | ||
| rating: "to see rating", | ||
| review: "to see review", | ||
| } as const; | ||
|
|
||
| export type LockCtaOverlayProps = LockCtaOverlayVariants & { | ||
| ctaType?: keyof typeof ctaTextMap; | ||
| }; | ||
|
|
||
| export const LockCtaOverlay = ({ | ||
| variant, | ||
| size = "md", | ||
| ctaType = "rating", | ||
| }: LockCtaOverlayProps) => { | ||
| const { wrapper, overlay, ctaTextContainer, icon } = lockCtaOverlayTheme({ | ||
| variant, | ||
| size, | ||
| }); | ||
| return ( | ||
| <div className={overlay()}> | ||
| <> | ||
| <div className={overlay()}></div> | ||
| <div className={wrapper()}> | ||
| <LockIcon className={icon()} /> | ||
| <div className={ctaTextContainer()}> | ||
| <Button variant="link" as="a" href="/account/auth/login"> | ||
| Login | ||
| </Button> | ||
| <span>to see rating</span> | ||
| <span>{ctaTextMap[ctaType]}</span> | ||
| </div> | ||
| </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
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,17 @@ | ||
| import { reviewItemTheme, type ReviewItemVariants } from "./ReviewItem.theme"; | ||
|
|
||
| export type ProfileReviewerProps = ReviewItemVariants & { | ||
| name: string; | ||
| }; | ||
|
|
||
| export const ProfileReviewer = ({ name }: ProfileReviewerProps) => { | ||
| const { profileContainer, profileName, profileIcon } = reviewItemTheme(); | ||
| return ( | ||
| <div className={profileContainer()}> | ||
| <div className={profileIcon()}> | ||
| <div className="h-4 w-4 rounded-full bg-cyan-800"></div> | ||
| </div> | ||
| <div className={profileName()}>{name}</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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| import { reviewItemTheme, type ReviewItemVariants } from "./ReviewItem.theme"; | ||
|
|
||
| export type ProfileSchoolProps = ReviewItemVariants & { | ||
| courseCode: string; | ||
| }; | ||
|
|
||
| export const ProfileSchool = ({ courseCode }: ProfileSchoolProps) => { | ||
| const { schoolContainer, schoolCourseCode, schoolIcon } = reviewItemTheme(); | ||
| return ( | ||
| <div className={schoolContainer()}> | ||
| <div className={schoolIcon()}> | ||
| <div className="h-4 w-4 rounded-full bg-red-800"></div> | ||
| </div> | ||
| <div className={schoolCourseCode()}>{courseCode}</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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| import { Button } from "@/common/components/Button"; | ||
| import { reviewItemTheme, type ReviewItemVariants } from "./ReviewItem.theme"; | ||
| import { Review } from "./ReviewItem"; | ||
|
|
||
| export type ReviewBodyProps = ReviewItemVariants & { | ||
| review: Review; | ||
| isDetailed: boolean; | ||
| variant?: "home" | "subpage"; | ||
| }; | ||
|
|
||
| export const ReviewBody = ({ review, isDetailed }: ReviewBodyProps) => { | ||
| const { body, labels } = reviewItemTheme(); | ||
| return ( | ||
| <div className="flex flex-col gap-1"> | ||
| {isDetailed && ( | ||
| <div className={labels()}> | ||
| {review.labels | ||
| .filter((label) => label.typeof === "professor") | ||
| .map((label) => ( | ||
| <span key={label.name}>{label.name}</span> | ||
| ))} | ||
| </div> | ||
| )} | ||
| {isDetailed && ( | ||
| <div className={labels()}> | ||
| {review.labels | ||
| .filter((label) => label.typeof === "course") | ||
| .map((label) => ( | ||
| <span key={label.name}>{label.name}</span> | ||
| ))} | ||
| </div> | ||
| )} | ||
| <div className={body()}>{review.body}</div> | ||
| {isDetailed && <Button variant="link">Show more</Button>} | ||
| </div> | ||
| ); | ||
| }; |
Oops, something went wrong.