forked from Scaffold-Stark/scaffold-stark-2
-
Notifications
You must be signed in to change notification settings - Fork 18
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
739ff58
commit 9ee786c
Showing
24 changed files
with
256 additions
and
160 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| import React, { ReactNode } from 'react'; | ||
|
|
||
| interface ButtonProps { | ||
| onClick: () => void; | ||
| children: ReactNode; | ||
| } | ||
|
|
||
| const Button: React.FC<ButtonProps> = ({ onClick, children }) => { | ||
| return ( | ||
| <button className="py-[10px] px-[20px] bg-[#0C0C4F] text-white rounded-[8px]" onClick={onClick} type="button"> | ||
| {children} | ||
| </button> | ||
| ); | ||
| }; | ||
|
|
||
| export default Button; |
44 changes: 44 additions & 0 deletions
44
packages/nextjs/components/ChallengeCard/ChallengeCard.tsx
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,44 @@ | ||
| import React from 'react'; | ||
| import Image from 'next/image'; | ||
| import Button from "~~/components/Button/Button"; | ||
|
|
||
| interface ChallengeCardProps { | ||
| challenge: string; | ||
| title: string; | ||
| description:string; | ||
| imageUrl: string; | ||
| buttonText: string; | ||
| onButtonClick: () => void; | ||
| border?:boolean; | ||
| end?:boolean | ||
|
|
||
| } | ||
|
|
||
| const ChallengeCard: React.FC<ChallengeCardProps> = ({ challenge, title, imageUrl, buttonText, onButtonClick,description,border=true, end=false }) => { | ||
| return ( | ||
| <div className={`flex max-w-[1280px] w-full ${border ? 'border-b border-[#191972]' : ''}`}> | ||
| <div className="flex"> | ||
| <div className={`w-[34px] ${end? "h-[50%] self-end":"flex"} border-l-[5px] border-[#191972]`}> | ||
| <div | ||
| className="w-[30px] h-[30px] rounded-full border-[#191972] border-[5px] self-center traslate-circule bg-white"></div> | ||
| </div> | ||
| </div> | ||
| <div className=" flex flex-1 justify-between py-10 px-10 "> | ||
| <div className="max-w-[500px] flex flex-col gap-4"> | ||
| <span>{challenge}</span> | ||
| <h2 className="text-2xl">{title}</h2> | ||
| <p>{description}</p> | ||
| <div> | ||
| <Button onClick={onButtonClick}>{buttonText}</Button> | ||
| </div> | ||
| </div> | ||
| <div> | ||
| <Image src={imageUrl} alt="image challenge" width={500} height={340}/> | ||
| </div> | ||
| </div> | ||
|
|
||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default ChallengeCard; |
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
19 changes: 19 additions & 0 deletions
19
packages/nextjs/components/StepInstruction/StepInstruction.tsx
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,19 @@ | ||
| import React from 'react'; | ||
|
|
||
| interface StepInstructionProps { | ||
| number: number; | ||
| text: string; | ||
| } | ||
|
|
||
| const StepInstruction: React.FC<StepInstructionProps> = ({ number, text }) => { | ||
| return ( | ||
| <div className=" flex flex-col items-center gap-3 max-w-[500px] justify-center "> | ||
| <div className="w-6 h-6 rounded-full bg-gradient-linear text-white text-center"> | ||
| {number} | ||
| </div> | ||
| <span className="text-center text-[16px]">{text}</span> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default StepInstruction; |
Oops, something went wrong.