Feature/ratings #16
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
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 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,43 @@ | ||
| import { Rating } from "react-simple-star-rating"; | ||
|
|
||
|
|
||
| type CardSize = "sm" | "md" | "lg"; | ||
|
|
||
| const sizeStyles = { | ||
| sm: { card: "w-80 p-4 gap-4 min-h-24", text: "text-sm", col: "w-32", starSize: 12 }, | ||
| md: { card: "w-120 p-6 gap-6 min-h-36", text: "text-xl", col: "w-44", starSize: 16 }, | ||
| lg: { card: "w-160 p-8 gap-8 min-h-48", text: "text-2xl", col: "w-56", starSize: 20 }, | ||
| }; | ||
|
|
||
| interface RatingProps { | ||
| rating: number; | ||
| user: string; | ||
| description: string; | ||
| size?: CardSize; | ||
| } | ||
|
|
||
| const RatingCard = ({ rating, user, description, size = "md" }: RatingProps) => { | ||
| const s = sizeStyles[size]; | ||
| return ( | ||
| <div className={`rounded-2xl border flex drop-shadow-2xl items-center ${s.card}`}> | ||
| <div className={`flex flex-col justify-center items-center shrink-0 ${s.col}`}> | ||
| <div className="flex items-center gap-2 shrink-0"> | ||
| <span className="w-3 h-3 rounded-full bg-blue-400 shrink-0" /> | ||
| <span className={`${s.text} break-all`}>{user}</span> | ||
| </div> | ||
| <div className="flex items-center justify-center"> | ||
| <Rating | ||
| size={s.starSize} | ||
| initialValue={rating} | ||
| readonly | ||
| allowFraction | ||
| /> | ||
| </div> | ||
| </div> | ||
| <div className={`font-light leading-snug ${s.text}`}> | ||
| "{description}" | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default RatingCard; | ||
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 |
|---|---|---|
| @@ -1,30 +1,50 @@ | ||
| import { useEffect, useState } from "react"; | ||
| import PrimaryButton from "./buttons/PrimaryButton"; | ||
|
|
||
|
|
||
| interface WaitListJoinProps { | ||
| imageSrc?: string; | ||
| } | ||
|
Contributor
Author
There was a problem hiding this comment. added image src for an optional centy image ;) |
||
|
|
||
| const WaitListJoin = ({ imageSrc }: WaitListJoinProps) => { | ||
| const [, setIsSmallPhone] = useState(false); | ||
|
|
||
| useEffect(() => { | ||
| setIsSmallPhone(window.innerWidth < 376); | ||
| }, []); | ||
|
|
||
| return ( | ||
| <div className="flex justify-center px-4 mb-8"> | ||
| <div className="relative bg-white max-w-lg h-auto w-75 flex | ||
| flex-col items-center justify-center mx-auto tracking-wide | ||
| rounded-2xl border-2 border-[#52AEEF] shadow-[10px_10px_0px_#ABD8F6] | ||
| md:shadow-[15px_15px_0px_#ABD8F6] px-6 md:px-8 md:w-100 py-8 md:py-10 lg:w-1/2"> | ||
|
|
||
| {imageSrc && ( | ||
| <img | ||
| src={imageSrc} | ||
| className="absolute -bottom-7 -right-21 scale-x-[-1] h-32 z-50 md:w-100 md:h-auto md:-right-73 md:-bottom-8 lg:top-3" | ||
| /> | ||
| )} | ||
|
|
||
| <p className="text-center! font-semibold! text-2xl! md:text-4xl! tracking-normal! leading-snug! pb-6! m-0!"> | ||
| Start spending and <br /> | ||
| saving with{" "} | ||
| <span className="text-[#52AEEF] font-normal" style={{ fontFamily: '"gooddog-new", sans-serif' }}> | ||
|
Contributor
Author
There was a problem hiding this comment. added props here |
||
| confidence. | ||
| </span> | ||
| </p> | ||
| <PrimaryButton | ||
| buttonColor="#F5A243" | ||
| borderColor="#F5A243" | ||
| textColor="#ffffff" | ||
| buttonWidth="150px" | ||
| buttonHeight="40px" | ||
| fontSize="20px" | ||
| /> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default WaitListJoin; | ||
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
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.
keep my changes, here used this library for ratings