-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #42 from zacharyLYH/zac-refine-implementation
Zac refine implementation
- Loading branch information
Showing
38 changed files
with
502 additions
and
569 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,57 @@ | ||
| import { | ||
| Card, | ||
| CardContent, | ||
| CardDescription, | ||
| CardFooter, | ||
| CardHeader, | ||
| CardTitle, | ||
| } from "@/components/ui/card"; | ||
| import OverallRating from "./components/overall-rating"; | ||
| import Grid from "./util/arrange-rating-sections"; | ||
| import RatingSubmitButton from "./components/submit-rating-component"; | ||
| import UxRating from "./components/ux-rating"; | ||
| import FunRating from "./components/fun-rating"; | ||
| import { FeedbackModal } from "@/components/landing/feedback/feedback-modal"; | ||
|
|
||
| /* | ||
| Ratings are stored as per the following schema: | ||
| <Name of rating> : <Total Score-Number of rates> | ||
| For example: | ||
| - Overall_Rating : 500-100 | ||
| - This states that we currently have a total score of 500 over 100 ratings. Which means, on average, we get 5 stars from every rating. | ||
| - Ux_Rating : 100-30 | ||
| - Implies we have about 3.3333333... stars per rate | ||
| - Fun_Rating : 0-2345 | ||
| - We got 0 stars on average | ||
| */ | ||
| const RatingBodyServer = () => { | ||
| return ( | ||
| <div className='m-2 flex min-h-[60vh] items-center justify-center lg:m-6'> | ||
| <Card className='border-white lg:w-1/2'> | ||
| <CardHeader> | ||
| <CardTitle>Rate Tailspin</CardTitle> | ||
| <CardDescription> | ||
| 30 seconds of your time could translates to a lot of | ||
| feedback for the team! | ||
| </CardDescription> | ||
| </CardHeader> | ||
| <CardContent> | ||
| <Grid> | ||
| <OverallRating /> | ||
| <UxRating /> | ||
| <FunRating /> | ||
| </Grid> | ||
| </CardContent> | ||
| <CardFooter className='flex flex-col justify-between lg:flex-row'> | ||
| <div className='mb-4 w-[300] rounded-xl border border-white p-2 font-semibold text-muted-foreground md:mb-0'> | ||
| <FeedbackModal buttonName='(Optionally) Give us more feedback!' /> | ||
| </div> | ||
| <RatingSubmitButton /> | ||
| </CardFooter> | ||
| </Card> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default RatingBodyServer; |
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,57 +1,20 @@ | ||
| import { | ||
| Card, | ||
| CardContent, | ||
| CardDescription, | ||
| CardFooter, | ||
| CardHeader, | ||
| CardTitle, | ||
| } from "@/components/ui/card"; | ||
| import OverallRating from "./components/overall-rating"; | ||
| import Grid from "./util/arrange-rating-sections"; | ||
| import RatingSubmitButton from "./components/submit-rating-component"; | ||
| import UxRating from "./components/ux-rating"; | ||
| import FunRating from "./components/fun-rating"; | ||
| import { FeedbackModal } from "@/components/landing/feedback/feedback-modal"; | ||
| "use client"; | ||
|
|
||
| /* | ||
| Ratings are stored as per the following schema: | ||
| <Name of rating> : <Total Score-Number of rates> | ||
| import { loadFromLocalStorage } from "@/lib/localStorage"; | ||
| import RatingBodyServer from "./rating-component-server"; | ||
|
|
||
| For example: | ||
| - Overall_Rating : 500-100 | ||
| - This states that we currently have a total score of 500 over 100 ratings. Which means, on average, we get 5 stars from every rating. | ||
| - Ux_Rating : 100-30 | ||
| - Implies we have about 3.3333333... stars per rate | ||
| - Fun_Rating : 0-2345 | ||
| - We got 0 stars on average | ||
| */ | ||
| const RatingBody = () => { | ||
| return ( | ||
| <div className='m-2 flex min-h-[60vh] items-center justify-center lg:m-6'> | ||
| <Card className='border-white lg:w-1/2'> | ||
| <CardHeader> | ||
| <CardTitle>Rate Tailspin</CardTitle> | ||
| <CardDescription> | ||
| 30 seconds of your time could translates to a lot of | ||
| feedback for the team! | ||
| </CardDescription> | ||
| </CardHeader> | ||
| <CardContent> | ||
| <Grid> | ||
| <OverallRating /> | ||
| <UxRating /> | ||
| <FunRating /> | ||
| </Grid> | ||
| </CardContent> | ||
| <CardFooter className='flex flex-col justify-between lg:flex-row'> | ||
| <div className='mb-4 w-[300] rounded-xl border border-white p-2 font-semibold text-muted-foreground md:mb-0'> | ||
| <FeedbackModal buttonName='(Optionally) Give us more feedback!' /> | ||
| </div> | ||
| <RatingSubmitButton /> | ||
| </CardFooter> | ||
| </Card> | ||
| </div> | ||
| ); | ||
| const rated = loadFromLocalStorage("rating"); | ||
|
|
||
| if (!rated) { | ||
| return <RatingBodyServer />; | ||
| } else { | ||
| return ( | ||
| <p className='my-4 text-center text-sm font-bold text-muted-foreground'> | ||
| You've already rated Tailspin. Thanks! | ||
| </p> | ||
| ); | ||
| } | ||
| }; | ||
|
|
||
| export default RatingBody; |
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,75 @@ | ||
| import { Badge } from "@/components/ui/badge"; | ||
| import Link from "next/link"; | ||
| import { | ||
| Card, | ||
| CardContent, | ||
| CardDescription, | ||
| CardHeader, | ||
| CardTitle, | ||
| CardFooter, | ||
| } from "@/components/ui/card"; | ||
| import { Separator } from "@/components/ui/separator"; | ||
|
|
||
| interface ChallengeIntroProps { | ||
| button: () => React.ReactNode; | ||
| } | ||
|
|
||
| const ChallengeIntro: React.FC<ChallengeIntroProps> = ({ button }) => { | ||
| return ( | ||
| <Card className='mx-auto my-8 h-[420px] w-2/3 overflow-hidden rounded-2xl bg-gray-800'> | ||
| <CardHeader className='p-4'> | ||
| <CardTitle className='mb-4 text-3xl font-semibold text-white'> | ||
| 🥳 We're glad you're here! | ||
| </CardTitle> | ||
| <CardDescription> | ||
| <Badge className='mx-1 rounded-full bg-blue-400 px-2 py-1 text-white'> | ||
| Alpha | ||
| </Badge> | ||
| <Badge className='mx-1 rounded-full bg-blue-400 px-2 py-1 text-white'> | ||
| MVP | ||
| </Badge> | ||
| </CardDescription> | ||
| </CardHeader> | ||
| <Separator className='bg-gray-700' /> | ||
| <CardContent className='p-4'> | ||
| <p className='text-gray-300'> | ||
| It's simple. We'll provide you a coding | ||
| environment and a target image 🖼️. Your job is to recreate | ||
| that image using{" "} | ||
| <span className='font-semibold text-green-500'>HTML</span>{" "} | ||
| and{" "} | ||
| <span className='font-semibold text-green-500'> | ||
| TailwindCSS | ||
| </span> | ||
| . After you submit, we'll send your scores via Email | ||
| 📧. <br /> | ||
| <br /> Currently, we only provide a playground which | ||
| represents the core services of Tailspin. When you submit | ||
| code from our platform, we score your code and email the | ||
| result of similarity to you.{" "} | ||
| <span className='text-red-500'> | ||
| In this MVP, we don't have a way for you to track | ||
| all your previous submissions or rank yourself against | ||
| other developers trying out Tailspin. | ||
| </span> | ||
| </p> | ||
| </CardContent> | ||
| <CardFooter className='p-4'> | ||
| <p className='text-sm text-muted-foreground'> | ||
| At this stage, we're presenting a bare bones look at | ||
| what's to come for Tailspin and looking for{" "} | ||
| <Link href='#rating' className='text-blue-500 underline'> | ||
| feedback | ||
| </Link> | ||
| ! | ||
| </p> | ||
| </CardFooter> | ||
| <Separator className='bg-gray-700' /> | ||
| <div className='flex items-center justify-center p-4'> | ||
| {button()} | ||
| </div> | ||
| </Card> | ||
| ); | ||
| }; | ||
|
|
||
| export default ChallengeIntro; |
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,28 @@ | ||
| "use client"; | ||
|
|
||
| import { useState } from "react"; | ||
| import ChallengeIntro from "./challenge-intro"; | ||
| import StepperCard from "./stepper-pages/StepperCard"; | ||
| import { Button } from "@/components/ui/button"; | ||
| import { Code } from "lucide-react"; | ||
|
|
||
| const ChallengeMain = () => { | ||
| const [goToStepper, setGoToStepper] = useState(false); | ||
|
|
||
| const readyToCodeButton = () => { | ||
| return ( | ||
| <Button onClick={() => setGoToStepper(true)}> | ||
| <code>Ready to code</code> | ||
| <Code className='ml-2' /> | ||
| </Button> | ||
| ); | ||
| }; | ||
| return ( | ||
| <> | ||
| {!goToStepper && <ChallengeIntro button={readyToCodeButton} />} | ||
| {goToStepper && <StepperCard />} | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default ChallengeMain; |
File renamed without changes.
File renamed without changes.
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
File renamed without changes.
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
Oops, something went wrong.