Skip to content

Commit a3921fc

Browse files
author
Roshan Jossy
authored
Merge pull request #17 from firstcontributions/update-nav-bar
2 parents 58580a3 + e2867b8 commit a3921fc

File tree

18 files changed

+262
-331
lines changed

18 files changed

+262
-331
lines changed

‎.eslintrc.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,5 +17,9 @@
1717
"ecmaVersion": 12,
1818
"sourceType": "module"
1919
},
20+
"rules": {
21+
"@next/next/no-html-link-for-pages": "off",
22+
"@next/next/no-img-element": "off"
23+
},
2024
"plugins": ["@typescript-eslint"]
2125
}

‎src/components/Button.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ const Button = ({ children, onClick: onClick }: ButtonProps) => {
99
return (
1010
<button
1111
type="button"
12-
className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
12+
className="text-white font-bold bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
1313
onClick={onClick}
1414
>
1515
{children}

‎src/components/Card.tsx

Lines changed: 18 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,19 @@
1-
import { ReactNode } from "react";
1+
import { ReactNode } from 'react'
22

3-
export default function Card ({children, classes}: {children: ReactNode, classes?: string}) {
4-
return(
5-
<div className={`py-4 px-8 bg-white rounded-lg ${classes}`}>
6-
{children}
7-
</div>
8-
)
9-
}
3+
export default function Card({
4+
children,
5+
classes,
6+
}: {
7+
children: ReactNode
8+
classes?: string
9+
}) {
10+
return (
11+
<div
12+
className={`py-4 px-8 bg-white dark:bg-dark-700 rounded-lg ${
13+
classes || ''
14+
}`}
15+
>
16+
{children}
17+
</div>
18+
)
19+
}

‎src/components/Layout.tsx

Lines changed: 25 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,30 @@
1-
import React, { ReactNode } from "react";
2-
import Navbar from "./navbar/Navbar";
1+
import React, { ReactNode } from 'react'
2+
import Navbar from './navbar/Navbar'
33

44
type LayoutProps = {
5-
sidebarContentLeft?: ReactNode
6-
children: ReactNode
5+
sidebarContentLeft?: ReactNode
6+
children: ReactNode
77
sidebarContentRight: ReactNode
88
}
99

10-
export default function Layout ({sidebarContentLeft, children, sidebarContentRight}: LayoutProps) {
11-
return (
12-
<div className="mx-auto bg-gray-100 min-h-screen">
13-
<Navbar />
14-
<div className="grid grid-cols-9 gap-10 mt-10 px-20 pt-10">
15-
{sidebarContentLeft && (
16-
<aside className="col-span-2">
17-
{sidebarContentLeft}
18-
</aside>)}
19-
<main className={ sidebarContentLeft ? "col-span-5": "col-span-7"}>
20-
{children}
21-
</main>
22-
<aside className="col-span-2">
23-
{sidebarContentRight}
24-
</aside>
25-
</div>
26-
<div>
27-
</div>
28-
</div>
29-
)
30-
}
10+
export default function Layout({
11+
sidebarContentLeft,
12+
children,
13+
sidebarContentRight,
14+
}: LayoutProps) {
15+
return (
16+
<div className="mx-auto bg-gray-100 dark:bg-dark-800 min-h-screen">
17+
<Navbar />
18+
<div className="grid grid-cols-9 gap-10 mt-10 px-20 pt-10">
19+
{sidebarContentLeft && (
20+
<aside className="col-span-2">{sidebarContentLeft}</aside>
21+
)}
22+
<main className={sidebarContentLeft ? 'col-span-5' : 'col-span-7'}>
23+
{children}
24+
</main>
25+
<aside className="col-span-2">{sidebarContentRight}</aside>
26+
</div>
27+
<div></div>
28+
</div>
29+
)
30+
}

‎src/components/UserDetails/Badges/Badge.tsx

Lines changed: 47 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,53 @@
1-
import { graphql, useFragment } from "react-relay"
2-
import BadgeIcon from "./BadgeIcon"
3-
import Hexagon from "./Hexagon"
1+
import { graphql, useFragment } from 'react-relay'
2+
import { Badge_node$key } from '../../../queries/__generated__/Badge_node.graphql'
3+
import BadgeIcon, { LanguageName } from './BadgeIcon'
4+
import Hexagon from './Hexagon'
45

5-
const Badge = ({badge}: any) => {
6-
const data = useFragment(
7-
graphql`
8-
fragment Badge_node on Badge {
9-
displayName
10-
progressPercentageToNextLevel
11-
currentLevel
12-
}
13-
`, badge
14-
)
6+
const Badge = ({ badge }: { badge: Badge_node$key }) => {
7+
const data = useFragment(
8+
graphql`
9+
fragment Badge_node on Badge {
10+
displayName
11+
progressPercentageToNextLevel
12+
currentLevel
13+
}
14+
`,
15+
badge
16+
)
1517

16-
return (
17-
<div className="flex items-center ">
18-
<Hexagon size={60} color="red" >
19-
<BadgeIcon displayName={data.displayName} />
20-
</Hexagon>
21-
<div className=" ml-8">
22-
<span className="font-bold block">Level: {data.currentLevel}</span>
23-
<span className="text-sm block">524 lines to next level</span>
24-
<div className="progress-bar">
25-
<style jsx>
26-
{`
27-
.progress-bar {
28-
position: relative;
29-
height: 10px;
30-
width: 120px;
31-
background-color: #ccc;
32-
border-radius: 5px;
33-
box-shadow: inset 0.3em 0.3em 1em rgba(0,0,0,0.3);
34-
}
35-
.progress-bar:after {
36-
content: '';
37-
position: absolute;
38-
width: ${1.2 * data.progressPercentageToNextLevel}px;
39-
height: inherit;
40-
background-color: red;
41-
border-radius: 5px;
42-
}
43-
`}
44-
</style>
45-
</div>
46-
</div>
18+
return (
19+
<div className="flex items-center ">
20+
<Hexagon size={60} color="red">
21+
<BadgeIcon displayName={data.displayName as LanguageName} />
22+
</Hexagon>
23+
<div className=" ml-8 dark:text-gray-300">
24+
<span className="font-bold block">Level: {data.currentLevel}</span>
25+
<span className="text-sm block">524 lines to next level</span>
26+
<div className="progress-bar">
27+
<style jsx>
28+
{`
29+
.progress-bar {
30+
position: relative;
31+
height: 10px;
32+
width: 120px;
33+
background-color: #ccc;
34+
border-radius: 5px;
35+
box-shadow: inset 0.3em 0.3em 1em rgba(0, 0, 0, 0.3);
36+
}
37+
.progress-bar:after {
38+
content: '';
39+
position: absolute;
40+
width: ${1.2 * data.progressPercentageToNextLevel}px;
41+
height: inherit;
42+
background-color: red;
43+
border-radius: 5px;
44+
}
45+
`}
46+
</style>
4747
</div>
48-
)
48+
</div>
49+
</div>
50+
)
4951
}
5052

5153
export default Badge

‎src/components/UserDetails/Badges/BadgeIcon.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,8 +25,10 @@ const iconMap = {
2525
PHP: <SiPhp />,
2626
}
2727

28+
export type LanguageName = keyof typeof iconMap
29+
2830
type BadgeIconProps = {
29-
displayName: keyof typeof iconMap
31+
displayName: LanguageName
3032
}
3133

3234
export default function BadgeIcon({ displayName }: BadgeIconProps) {

‎src/components/UserDetails/Badges/BadgeList.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ const BadgeList = ({ user }: any) => {
3636
))}
3737
{hasNext ? (
3838
<button
39+
className="text-gray-600 dark:text-gray-300"
3940
onClick={() => {
4041
loadNext(2)
4142
}}

‎src/components/UserDetails/Badges/CircularProgress.tsx

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

‎src/components/UserDetails/Bio.tsx

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,6 @@ const Bio = ({ user }: BioProps) => {
3131
)
3232
const onChange = (evt: any) => setBio(evt.target.textContent)
3333
const onSubmit = () => {
34-
console.log(bio)
3534
commitMutation({
3635
variables: {
3736
input: { id: data.id, bio: bio },
@@ -40,7 +39,12 @@ const Bio = ({ user }: BioProps) => {
4039
}
4140

4241
return (
43-
<p contentEditable={true} onInput={onChange} onBlur={onSubmit}>
42+
<p
43+
contentEditable={true}
44+
onInput={onChange}
45+
onBlur={onSubmit}
46+
className="dark:text-gray-300"
47+
>
4448
{data.bio}
4549
</p>
4650
)

0 commit comments

Comments
 (0)