Skip to content

Commit 5e7c7b8

Browse files
vas3avas3a
committed
add results page & talent cards
1 parent 1ca8181 commit 5e7c7b8

File tree

20 files changed

+354
-19
lines changed

20 files changed

+354
-19
lines changed

‎.vscode/components.code-snippets‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@
2929
"const ${1:ComponentName}: FC<${1:ComponentName}Props> = props => {",
3030
"",
3131
" return (",
32-
" <div className={styles['wrap']}>",
32+
" <div className={styles.wrap}>",
3333
" </div>",
3434
" )",
3535
"}",

‎.vscode/settings.json‎

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎src/apps/talent-search/src/assets/user.jpg‎

36.3 KB
Loading

‎src/apps/talent-search/src/components/match-bar/MatchBar.module.scss‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
@import "@libs/ui/styles/includes";
2+
3+
.wrap {
4+
display: flex;
5+
align-items: center;
6+
justify-content: center;
7+
color: $tc-white;
8+
font-family: $font-barlow;
9+
10+
gap: $sp-2;
11+
12+
border-radius: 100px;
13+
padding-bottom: 2px;
14+
15+
background: rgb(130,234,207);
16+
background: linear-gradient(
17+
180deg,
18+
$turq-50 0%,
19+
$turq-50 45%,
20+
$turq-100 50%,
21+
$turq-100 67%,
22+
$turq-120 70%,
23+
$turq-140 80%,
24+
$turq-180 90%
25+
);
26+
background-size: 100% 3000px;
27+
background-position: 0 0;
28+
29+
&:global(.dark) {
30+
color: $black-100;
31+
}
32+
33+
strong {
34+
font-size: 26px;
35+
font-weight: $font-weight-medium;
36+
line-height: $sp-8;
37+
}
38+
}

‎src/apps/talent-search/src/components/match-bar/MatchBar.tsx‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import { FC } from 'react'
2+
import classNames from 'classnames'
3+
4+
import styles from './MatchBar.module.scss'
5+
6+
interface MatchBarProps {
7+
className?: string
8+
percent?: number
9+
}
10+
11+
const MatchBar: FC<MatchBarProps> = props => {
12+
const value = Math.round((props.percent ?? 0) * 100)
13+
14+
return (
15+
<div
16+
className={classNames(props.className, styles.wrap, value < 70 && 'dark')}
17+
style={{ backgroundPositionY: `${value}%` }}
18+
>
19+
<strong>
20+
{value}
21+
%
22+
</strong>
23+
<span className='body-medium-normal'>Match</span>
24+
</div>
25+
)
26+
}
27+
28+
export default MatchBar

‎src/apps/talent-search/src/components/match-bar/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default as MatchBar } from './MatchBar'

‎src/apps/talent-search/src/components/skill-pill/SkillPill.module.scss‎

Lines changed: 33 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,14 @@
55
border-radius: 40px;
66
color: $tc-white;
77
border: 1px solid $tc-white;
8-
padding: 8px 14px 8px 14px;
8+
padding: $sp-2 $sp-3;
99
text-align: center;
10+
box-sizing: border-box;
11+
display: flex;
12+
align-items: center;
13+
gap: $sp-1;
14+
15+
height: $sp-8;
1016

1117
&:hover {
1218
background-color: rgba($tc-white, 0.1);
@@ -15,5 +21,31 @@
1521
&.selected{
1622
background-color: rgba($tc-white, 0.3);
1723
}
24+
25+
.text {
26+
display: block;
27+
line-height: 16px;
28+
}
1829
}
1930

31+
.theme {
32+
&-verified {
33+
border: 2px solid $turq-120;
34+
color: $black-100;
35+
36+
svg {
37+
color: $turq-120;
38+
@include icon-size(14);
39+
}
40+
}
41+
42+
&-dark {
43+
border-color: $black-20;
44+
color: $black-100;
45+
}
46+
47+
&-etc {
48+
border-color: $black-20;
49+
color: $black-60;
50+
}
51+
}

‎src/apps/talent-search/src/components/skill-pill/SkillPill.tsx‎

Lines changed: 20 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,42 @@
1-
import { FC, useCallback } from 'react'
1+
import { FC, ReactNode, useCallback } from 'react'
22
import classNames from 'classnames'
33

4+
import { IconOutline } from '~/libs/ui'
45
import { Skill } from '~/libs/shared'
56

67
import styles from './SkillPill.module.scss'
78

89
export interface SkillPillProps {
9-
onClick: (skill: Skill) => void
10-
selected: boolean
10+
children?: ReactNode
11+
onClick?: (skill: Skill) => void
12+
selected?: boolean
1113
skill: Skill
14+
theme?: 'dark' | 'verified' | 'light' | 'etc'
15+
verified?: boolean
1216
}
1317

1418
const SkillPill: FC<SkillPillProps> = props => {
15-
const handleClick = useCallback(() => props.onClick.call(undefined, props.skill), [
19+
const className = classNames(
20+
styles.pill,
21+
props.selected && styles.selected,
22+
styles[`theme-${props.verified ? 'verified' : (props.theme ?? 'light')}`],
23+
)
24+
25+
const handleClick = useCallback(() => props.onClick?.call(undefined, props.skill), [
1626
props.onClick, props.skill,
1727
])
1828

1929
return (
20-
<span
21-
className={classNames(styles.pill, props.selected && styles.selected)}
30+
<div
31+
className={className}
2232
onClick={handleClick}
2333
>
24-
<span className='body-main'>
34+
<span className={classNames('body-main', styles.text)}>
2535
{props.skill.name}
36+
{props.children}
2637
</span>
27-
</span>
38+
{props.verified && <IconOutline.CheckCircleIcon />}
39+
</div>
2840
)
2941
}
3042

‎src/apps/talent-search/src/components/talent-card/TalentCard.module.scss‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
@import "@libs/ui/styles/includes";
2+
3+
.wrap {
4+
display: flex;
5+
gap: $sp-10;
6+
7+
padding: $sp-55 $sp-8;
8+
border-radius: $sp-4;
9+
10+
background: $tc-white;
11+
12+
font-family: $font-barlow;
13+
color: $black-100;
14+
}
15+
16+
.profilePic {
17+
flex: 1 1 auto;
18+
19+
width: 200px;
20+
height: 200px;
21+
border-radius: 50%;
22+
overflow: hidden;
23+
24+
img {
25+
display: block;
26+
width: 100%;
27+
height: 100%;
28+
object-fit: contain;
29+
}
30+
}
31+
32+
.detailsContainer {
33+
flex: 1 1 auto;
34+
35+
padding: $sp-5 $sp-45 $sp-3 0;
36+
}
37+
38+
.talentInfo {
39+
display: flex;
40+
flex-direction: column;
41+
align-items: flex-start;
42+
gap: $sp-3;
43+
44+
&Name {
45+
font-size: 30px;
46+
line-height: 32px;
47+
color: $black-100;
48+
}
49+
50+
&Handle {
51+
color: $black-60;
52+
}
53+
54+
&Location {
55+
color: $black-100;
56+
57+
display: flex;
58+
align-items: center;
59+
gap: $sp-2;
60+
}
61+
62+
}
63+
64+
.matchBar {
65+
max-width: 330px;
66+
margin-top: $sp-8;
67+
}
68+
69+
.skillsWrap {
70+
display: flex;
71+
align-items: center;
72+
gap: $sp-2;
73+
flex-wrap: wrap;
74+
margin-top: $sp-5;
75+
}

‎src/apps/talent-search/src/components/talent-card/TalentCard.tsx‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import { FC } from 'react'
2+
3+
import { IconSolid } from '~/libs/ui'
4+
5+
import { MatchBar } from '../match-bar'
6+
import { SkillPill } from '../skill-pill'
7+
import UserAvatar from '../../assets/user.jpg'
8+
9+
import styles from './TalentCard.module.scss'
10+
11+
interface TalentCardProps {
12+
match?: number
13+
}
14+
15+
const TalentCard: FC<TalentCardProps> = props => {
16+
const a = 0
17+
console.log(a)
18+
19+
return (
20+
<div className={styles.wrap}>
21+
<div className={styles.profilePic}>
22+
<img src={UserAvatar} alt='/' />
23+
</div>
24+
<div className={styles.detailsContainer}>
25+
<div className={styles.talentInfo}>
26+
<div className={styles.talentInfoName}>
27+
Emily Johnson
28+
</div>
29+
<div className={styles.talentInfoHandle}>
30+
<span className='body-medium-normal'>CodeSprite</span>
31+
</div>
32+
<div className={styles.talentInfoLocation}>
33+
<IconSolid.LocationMarkerIcon className='icon-xxl' />
34+
<span className='body-main'>San Francisco, Ca, United States</span>
35+
</div>
36+
</div>
37+
<MatchBar className={styles.matchBar} percent={props.match} />
38+
<div className={styles.skillsWrap}>
39+
<SkillPill skill={{ emsiId: '1', name: 'HTML' }} verified />
40+
<SkillPill skill={{ emsiId: '1', name: 'LESS' }} theme='dark' />
41+
<SkillPill skill={{ emsiId: '1', name: '+45' }} theme='etc' />
42+
</div>
43+
</div>
44+
</div>
45+
)
46+
}
47+
48+
export default TalentCard

0 commit comments

Comments
 (0)