forked from lugnitdgp/digital_fortress_frontend
-
Notifications
You must be signed in to change notification settings - Fork 1
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 #2 from Ankit-Roy-CSE/main
leaderboard cards
- Loading branch information
Showing
15 changed files
with
313 additions
and
55 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 was deleted.
Oops, something went wrong.
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| import Canvas from "./Canvas" | ||
| import styles from "./Positions.module.scss" | ||
|
|
||
| interface CardProps{ | ||
| pos : any ; | ||
| username : string ; | ||
| avatar : string ; | ||
| score : string ; | ||
| } | ||
|
|
||
| const Card : React.FC<CardProps> = ({ pos , username , avatar , score })=>{ | ||
| let color , height ; | ||
| if(pos=='first') | ||
|
|
||
| return ( | ||
| <div className={`${styles.leaderboardItem}`}> | ||
| <div className={styles.canvasContainer}> | ||
| <Canvas /> | ||
| <div className={`${styles.userInfo} , ${styles.pos}`} | ||
| style={{}}> | ||
| <h1 className={styles.position}>{pos}</h1> | ||
| <img src={avatar} alt="Avatar" className={styles.avatar}/> | ||
| <h1 className={styles.username}>{username}</h1> | ||
| <h1 className={styles.score}>{score}</h1> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ) ; | ||
| } | ||
|
|
||
| export default Card ; |
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,53 @@ | ||
| "use client" ; | ||
| import { useState } from 'react'; | ||
|
|
||
| import styles from './Positions.module.scss'; | ||
| import clsx from 'clsx'; | ||
| import Canvas from './Canvas'; | ||
| // import Matrix from './Matrix'; | ||
| import Card from "./Card" ; | ||
|
|
||
| export default function Positions() { | ||
| const [pos , setPos] = useState("first"); | ||
| return ( | ||
| <div className={styles.container}> | ||
| <div className={`${styles.leaderboardItem}`}> | ||
| <div className={styles.canvasContainer}> | ||
| <Canvas color="#c0c0c0"/> | ||
| <div className={`${styles.userInfo} , ${styles.second}`}> | ||
| <h1 className={styles.position}>Second</h1> | ||
| <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" className={styles.avatar}/> | ||
| <h1 className={styles.username}>John Doe</h1> | ||
| <h1 className={styles.score}>900</h1> | ||
| </div> | ||
| </div> | ||
|
|
||
| </div> | ||
| <Card pos={pos} username="Jane Doe" avatar="https://www.w3schools.com/howto/img_avatar.png" score="900" /> | ||
| {/* <div className={`${styles.leaderboardItem} , ${styles.first}`}> | ||
| <div className={styles.canvasContainer}> | ||
| <Canvas /> | ||
| <div className={`${styles.userInfo} , ${styles.first}`}> | ||
| <h1 className={styles.position}>First</h1> | ||
| <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" className={styles.avatar}/> | ||
| <h1 className={styles.username}>John Doe</h1> | ||
| <h1 className={styles.score}>900</h1> | ||
| </div> | ||
| </div> | ||
| </div> */} | ||
| <Card pos='first' username="John Doe" avatar="https://www.w3schools.com/howto/img_avatar.png" score="1000" /> | ||
| <div className={`${styles.leaderboardItem} , ${styles.third}`}> | ||
| <div className={styles.canvas}> | ||
| <Canvas color="#cd7f32"/> | ||
| </div> | ||
| <div className={styles.userInfo}> | ||
| <h1 className={styles.position}>Third</h1> | ||
| <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" className={styles.avatar}/> | ||
| <h1 className={styles.username}>John Doe</h1> | ||
| <h1 className={styles.score}>900</h1> | ||
| </div> | ||
| </div> | ||
| {/* <Card pos='third' username="Jack Doe" avatar="https://www.w3schools.com/howto/img_avatar.png" score="800" /> */} | ||
| </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,30 @@ | ||
| "use client" | ||
| import React from 'react' | ||
| import styles from './style.module.scss'; | ||
|
|
||
| export default function index({data , selectedProject} : any) { | ||
|
|
||
| const crop = (string: string, maxLength: number) => { | ||
| return string.substring(0, maxLength); | ||
| } | ||
|
|
||
| return ( | ||
| <div className={styles.descriptions}> | ||
| { | ||
| data.map( (project: { title: any; description: any; } , i: number) => { | ||
| const { title, description } = project; | ||
| return ( | ||
| <div | ||
| key={i} | ||
| className={styles.description} | ||
| style={{clipPath: selectedProject == i ? "inset(0 0 0)" : "inset(50% 0 50%"}} | ||
| > | ||
| <p>{crop(title, 9)}</p> | ||
| <p>{description}</p> | ||
| </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,36 @@ | ||
| .descriptions{ | ||
| position: absolute; | ||
| top: 3px; | ||
| height: 100%; | ||
| width: 100%; | ||
| z-index: 2; | ||
| pointer-events: none; | ||
| .description{ | ||
| background-color: #2CFF05; | ||
| display: flex; | ||
| justify-content: space-between; | ||
| align-items: center; | ||
| padding-left: 10%; | ||
| padding-right: 10%; | ||
| clip-path: inset(50% 0 50%); | ||
| transition: clip-path .4s; | ||
|
|
||
| p{ | ||
| &:nth-of-type(1){ | ||
| color: #010101; | ||
| text-transform: uppercase; | ||
| font-weight: 700; | ||
| font-size: 6vw; | ||
| line-height: 5.5vw; | ||
| margin: 0px; | ||
| position: relative; | ||
| z-index: 1; | ||
| } | ||
| &:nth-of-type(2){ | ||
| width: 40%; | ||
| font-size: 1vw; | ||
| font-weight: 700; | ||
| } | ||
| } | ||
| } | ||
| } |
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,48 @@ | ||
| 'use client'; | ||
| import { useState } from 'react'; | ||
| import styles from './style.module.scss'; | ||
| import Titles from './titles'; | ||
| import Descriptions from './descriptions'; | ||
|
|
||
| const data = [ | ||
| { | ||
| title: "Ford", | ||
| description: "Working on the Next-Generation HMI Experience without no driving experience.", | ||
| speed: 0.5 | ||
| }, | ||
| { | ||
| title: "UFC", | ||
| description: "Developed the Future of UFC Sports Ecosystem despite not being a sports fan.", | ||
| speed: 0.5 | ||
| }, | ||
| { | ||
| title: "Lincoln", | ||
| description: "Defined the visual concept and design language for the Lincoln Zephyr 2022 but never seen it in real life.", | ||
| speed: 0.67 | ||
| }, | ||
| { | ||
| title: "Royal Caribbean", | ||
| description: "I was just one person on a massive team that created an entire Royal Caribbean eco-system.", | ||
| speed: 0.8 | ||
| }, | ||
| { | ||
| title: "Sleepiq", | ||
| description: "Designed a 1M+ users product utilizing my best personal experience: sleeping.", | ||
| speed: 0.8 | ||
| }, | ||
| { | ||
| title: "NFL", | ||
| description: "Explored the Future of Fantasy Football while being in a country where football means a total different sport.", | ||
| speed: 0.8 | ||
| } | ||
| ] | ||
|
|
||
| export default function Projects() { | ||
| const [selectedProject, setSelectedProject] = useState(null) | ||
| return ( | ||
| <div className={styles.container}> | ||
| <Titles data={data} setSelectedProject={setSelectedProject}/> | ||
| <Descriptions data={data} selectedProject={selectedProject}/> | ||
| </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,5 @@ | ||
| .container{ | ||
| // position: absolute; | ||
| z-index: 1; | ||
| width: 100%; | ||
| } |
Oops, something went wrong.