Skip to content

Commit 0c834fb

Browse files
ansidevansidev
authored
Merge pull request #22 from ansidev/feature/component-leetcode-difficulty
Feature: Component LeetCodeDifficulty
2 parents 322f5a6 + 75c3a57 commit 0c834fb

File tree

8 files changed

+143
-22
lines changed

8 files changed

+143
-22
lines changed

‎package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@
2828
"@iconify-json/bi": "^1.1.15",
2929
"@tailwindcss/typography": "^0.5.9",
3030
"@types/lodash.get": "^4.4.7",
31+
"@types/lodash.kebabcase": "^4.1.7",
3132
"@types/node": "^18.14.1",
3233
"@typescript-eslint/eslint-plugin": "^5.53.0",
3334
"@typescript-eslint/parser": "^5.53.0",
@@ -38,6 +39,7 @@
3839
"eslint-plugin-simple-import-sort": "^10.0.0",
3940
"husky": "^8.0.3",
4041
"lodash.get": "^4.4.2",
42+
"lodash.kebabcase": "^4.1.1",
4143
"sass": "^1.58.3",
4244
"tailwindcss-themer": "^3.0.1",
4345
"typescript": "^4.9.5"

‎pnpm-lock.yaml‎

Lines changed: 10 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/components/LeetCodeDifficulty.astro‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
---
2+
import kebabCase from 'lodash.kebabcase'
3+
4+
export interface Props {
5+
difficulty: string
6+
}
7+
8+
const { difficulty } = Astro.props
9+
const difficultyStyleMap: Record<string, string> = {
10+
Easy: 'difficulty-easy',
11+
Medium: 'difficulty-medium',
12+
Hard: 'difficulty-hard',
13+
}
14+
15+
const getDifficultyCssClass: (difficulty: string) => string = (
16+
difficulty: string
17+
) => {
18+
return Object.keys(difficultyStyleMap).includes(difficulty)
19+
? difficultyStyleMap[difficulty] || ''
20+
: ''
21+
}
22+
---
23+
24+
<a
25+
href={`/difficulties/${kebabCase(difficulty)}`}
26+
class:list={['px-2 py-1', getDifficultyCssClass(difficulty)]}
27+
>
28+
{difficulty}
29+
</a>
30+
31+
<style lang="scss">
32+
$difficulties: 'easy', 'medium', 'hard';
33+
34+
@each $difficulty in $difficulties {
35+
.difficulty-#{$difficulty} {
36+
@apply bg-difficulty-#{$difficulty};
37+
@apply border-2;
38+
@apply border-difficulty-#{$difficulty};
39+
@apply text-difficulty-#{$difficulty};
40+
@apply hover:bg-transparent;
41+
@apply hover:border-difficulty-#{$difficulty}-hover;
42+
@apply hover:text-difficulty-#{$difficulty}-hover;
43+
}
44+
}
45+
</style>

‎src/components/post/PostItem.astro‎

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@ export interface Props {
99
const { title, href } = Astro.props
1010
---
1111

12-
<a href={href}>
13-
<div class="post-item flex items-center justify-between">
12+
<a href={href} class="post-item">
13+
<div class="flex items-center justify-between">
1414
<div>
1515
<h2>{title}</h2>
1616
</div>
@@ -20,8 +20,17 @@ const { title, href } = Astro.props
2020

2121
<style lang="scss">
2222
.post-item {
23-
@apply mx-3 my-2 p-3;
24-
@apply border-2 border-solid border-style-primary;
25-
@apply hover:bg-style-primary text-style-secondary hover:text-style-primary-inverted;
23+
&:first-child {
24+
@apply mt-4;
25+
}
26+
&:last-child {
27+
@apply mb-4;
28+
}
29+
30+
& > div {
31+
@apply mx-4 p-4;
32+
@apply border-2 border-solid border-style-primary;
33+
@apply hover:bg-style-primary text-style-secondary hover:text-style-primary-inverted;
34+
}
2635
}
2736
</style>

‎src/components/post/PostList.astro‎

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,19 +4,12 @@ import type { CollectionEntry } from 'astro:content'
44
import PostItem from '@/components/post/PostItem.astro'
55
66
export interface Props {
7-
posts: CollectionEntry<any>[];
7+
posts: CollectionEntry<any>[]
88
}
99
1010
const { posts = [] } = Astro.props
1111
---
1212

1313
<div role="list" class="grid grid-cols-1 gap-4">
14-
{
15-
posts.map((p) => (
16-
<PostItem
17-
title={`${p.data.title}`}
18-
href={`/${p.slug}`}
19-
/>
20-
))
21-
}
14+
{posts.map((p) => <PostItem title={`${p.data.title}`} href={`/${p.slug}`} />)}
2215
</div>

‎src/pages/index.astro‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
---
22
import { getCollection } from 'astro:content'
33
4+
import LeetCodeDifficulty from '@/components/LeetCodeDifficulty.astro'
45
import PostList from '@/components/post/PostList.astro'
56
import siteConfig from '@/configs/site'
67
import AppLayout from '@/layouts/AppLayout.astro'
@@ -17,6 +18,11 @@ const posts = await getCollection('leetcode-solutions')
1718
headerCssClasses="max-w-xl px-8"
1819
>
1920
<main class="mx-auto my-4 p-4 max-w-xl text-site-header-text">
21+
<div class="grid grid-flow-col auto-cols-max gap-2 m-4 justify-center">
22+
<LeetCodeDifficulty difficulty="Easy" />
23+
<LeetCodeDifficulty difficulty="Medium" />
24+
<LeetCodeDifficulty difficulty="Hard" />
25+
</div>
2026
<PostList posts={posts} />
2127
</main>
2228
</AppLayout>

‎tailwind.config.cjs‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,11 @@ const typography = require('@tailwindcss/typography')
66
module.exports = {
77
content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
88
theme: {
9-
extend: {},
9+
extend: {
10+
colors: {
11+
transparent: 'transparent',
12+
}
13+
},
1014
},
1115
plugins: [
1216
tailwindCssTheme(themeConfig),

‎theme.config.cjs‎

Lines changed: 59 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@ const themeColors = {
77
hard: '#ff2d55',
88
},
99
light: {
10-
secondary: colors.zinc['900'],
11-
tertiary: colors.zinc['50'],
10+
secondary: colors.gray['900'],
11+
tertiary: colors.gray['50'],
1212
},
1313
dark: {
1414
secondary: colors.zinc['100'],
@@ -25,6 +25,15 @@ const darkTheme = ({ primary, secondary, tertiary }) => {
2525
'link-hover': colors.pink['500'],
2626
}
2727

28+
const textDifficultyColors = {
29+
easy: baseColors['text-inverted'],
30+
medium: baseColors['text-inverted'],
31+
hard: baseColors['text-inverted'],
32+
'easy-hover': themeColors.leetcode.easy,
33+
'medium-hover': themeColors.leetcode.medium,
34+
'hard-hover': themeColors.leetcode.hard,
35+
}
36+
2837
return {
2938
textColor: {
3039
style: {
@@ -36,7 +45,10 @@ const darkTheme = ({ primary, secondary, tertiary }) => {
3645
'title': baseColors.text,
3746
'header-text': baseColors.text,
3847
'header-text-hover': baseColors.fill,
39-
}
48+
},
49+
difficulty: {
50+
...textDifficultyColors,
51+
},
4052
},
4153
backgroundColor: {
4254
style: {
@@ -48,6 +60,14 @@ const darkTheme = ({ primary, secondary, tertiary }) => {
4860
'bg': '#1a1a1a',
4961
'header-bg': '#282828',
5062
},
63+
difficulty: {
64+
easy: themeColors.leetcode.easy,
65+
'easy-hover': baseColors.text,
66+
medium: themeColors.leetcode.medium,
67+
'medium-hover': baseColors.text,
68+
hard: themeColors.leetcode.hard,
69+
'hard-hover': baseColors.text,
70+
},
5171
},
5272
borderColor: {
5373
style: {
@@ -57,7 +77,13 @@ const darkTheme = ({ primary, secondary, tertiary }) => {
5777
},
5878
site: {
5979
'header-border': colors.zinc['600'],
60-
}
80+
},
81+
difficulty: {
82+
...themeColors.leetcode,
83+
'easy-hover': themeColors.leetcode.easy,
84+
'medium-hover': themeColors.leetcode.medium,
85+
'hard-hover': themeColors.leetcode.hard,
86+
},
6187
},
6288
}
6389
}
@@ -71,6 +97,15 @@ const lightTheme = ({ primary, secondary, tertiary }) => {
7197
'link-hover': colors.pink['500'],
7298
}
7399

100+
const textDifficultyColors = {
101+
easy: baseColors.text,
102+
medium: baseColors.text,
103+
hard: baseColors.text,
104+
'easy-hover': themeColors.leetcode.easy,
105+
'medium-hover': themeColors.leetcode.medium,
106+
'hard-hover': themeColors.leetcode.hard,
107+
}
108+
74109
return {
75110
textColor: {
76111
style: {
@@ -82,7 +117,10 @@ const lightTheme = ({ primary, secondary, tertiary }) => {
82117
'title': baseColors['text-inverted'],
83118
'header-text': baseColors['text-inverted'],
84119
'header-text-hover': colors.gray['300'],
85-
}
120+
},
121+
difficulty: {
122+
...textDifficultyColors,
123+
},
86124
},
87125
backgroundColor: {
88126
style: {
@@ -94,6 +132,14 @@ const lightTheme = ({ primary, secondary, tertiary }) => {
94132
'bg': colors.white,
95133
'header-bg': primary,
96134
},
135+
difficulty: {
136+
easy: themeColors.leetcode.easy,
137+
'easy-hover': baseColors.text,
138+
medium: themeColors.leetcode.medium,
139+
'medium-hover': baseColors.text,
140+
hard: themeColors.leetcode.hard,
141+
'hard-hover': baseColors.text,
142+
},
97143
},
98144
borderColor: {
99145
style: {
@@ -105,13 +151,19 @@ const lightTheme = ({ primary, secondary, tertiary }) => {
105151
'header-border': primary,
106152
}
107153
},
154+
difficulty: {
155+
...themeColors.leetcode,
156+
'easy-hover': themeColors.leetcode.easy,
157+
'medium-hover': themeColors.leetcode.medium,
158+
'hard-hover': themeColors.leetcode.hard,
159+
},
108160
}
109161
}
110162

111163
const siteTheme = ({ primary, secondary, tertiary }, isDark = true) =>
112164
isDark
113165
? darkTheme({ primary, secondary, tertiary })
114-
: lightTheme(darkTheme({ primary, secondary, tertiary }))
166+
: lightTheme({ primary, secondary, tertiary })
115167

116168
module.exports = {
117169
defaultTheme: {
@@ -129,6 +181,6 @@ module.exports = {
129181
secondary: themeColors.light['secondary'],
130182
tertiary: themeColors.light['tertiary'],
131183
}, false)
132-
}
184+
},
133185
]
134186
}

0 commit comments

Comments
 (0)