Skip to content

Commit

Permalink
feat: tag cloud
Browse files Browse the repository at this point in the history
  • Loading branch information
@wkylin
wkylin committed Dec 3, 2024
1 parent 2303c4e commit 274ab66
Show file tree
Hide file tree
Showing 3 changed files with 48 additions and 1 deletion.
34 changes: 34 additions & 0 deletions src/components/stateless/TagCloud/index.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
import React from 'react'

Check failure on line 1 in src/components/stateless/TagCloud/index.jsx

View workflow job for this annotation

GitHub Actions / Qodana for JS

ESLint 

ESLint: Install the 'eslint' package
import styles from './index.module.less'

const TagCloud = () => {

return (
<div className="relative flex flex-col items-center justify-center overflow-hidden">
<div className="not-prose my-5 w-full">
<ul className="flex w-full flex-wrap items-center justify-center gap-3">
<li className="flex h-10 items-center justify-center rounded border border-[#DEDFE2] bg-gradient-to-b from-[#E8E9EC] to-[#D7D9E1] px-5 text-center text-sm font-medium dark:border-[#484F60] dark:from-[#343A4D] dark:to-[#2A3043] dark:font-normal sm:h-12 sm:px-7 sm:text-lg">'use server'</li>
<li className="flex h-10 items-center justify-center rounded border border-[#DEDFE2] bg-gradient-to-b from-[#E8E9EC] to-[#D7D9E1] px-5 text-center text-sm font-medium dark:border-[#484F60] dark:from-[#343A4D] dark:to-[#2A3043] dark:font-normal sm:h-12 sm:px-7 sm:text-lg">useOptimistic</li>
<li className="flex h-10 items-center justify-center rounded border border-[#DEDFE2] bg-gradient-to-b from-[#E8E9EC] to-[#D7D9E1] px-5 text-center text-sm font-medium dark:border-[#484F60] dark:from-[#343A4D] dark:to-[#2A3043] dark:font-normal sm:h-12 sm:px-7 sm:text-lg">React Server Components</li>
<li className="flex h-10 items-center justify-center rounded border border-[#DEDFE2] bg-gradient-to-b from-[#E8E9EC] to-[#D7D9E1] px-5 text-center text-sm font-medium dark:border-[#484F60] dark:from-[#343A4D] dark:to-[#2A3043] dark:font-normal sm:h-12 sm:px-7 sm:text-lg">Concurrent Rendering</li>
<li className="flex h-10 items-center justify-center rounded border border-[#DEDFE2] bg-gradient-to-b from-[#E8E9EC] to-[#D7D9E1] px-5 text-center text-sm font-medium dark:border-[#484F60] dark:from-[#343A4D] dark:to-[#2A3043] dark:font-normal sm:h-12 sm:px-7 sm:text-lg">useActionState</li>
<li className="flex h-10 items-center justify-center rounded border border-[#DEDFE2] bg-gradient-to-b from-[#E8E9EC] to-[#D7D9E1] px-5 text-center text-sm font-medium dark:border-[#484F60] dark:from-[#343A4D] dark:to-[#2A3043] dark:font-normal sm:h-12 sm:px-7 sm:text-lg">Improved Hydration</li>
<li className="flex h-10 items-center justify-center rounded border border-[#DEDFE2] bg-gradient-to-b from-[#E8E9EC] to-[#D7D9E1] px-5 text-center text-sm font-medium dark:border-[#484F60] dark:from-[#343A4D] dark:to-[#2A3043] dark:font-normal sm:h-12 sm:px-7 sm:text-lg">Form Actions</li>
<li className="flex h-10 items-center justify-center rounded border border-[#DEDFE2] bg-gradient-to-b from-[#E8E9EC] to-[#D7D9E1] px-5 text-center text-sm font-medium dark:border-[#484F60] dark:from-[#343A4D] dark:to-[#2A3043] dark:font-normal sm:h-12 sm:px-7 sm:text-lg">Server Actions</li>
<li className="flex h-10 items-center justify-center rounded border border-[#DEDFE2] bg-gradient-to-b from-[#E8E9EC] to-[#D7D9E1] px-5 text-center text-sm font-medium dark:border-[#484F60] dark:from-[#343A4D] dark:to-[#2A3043] dark:font-normal sm:h-12 sm:px-7 sm:text-lg">Suspense</li>
<li className="flex h-10 items-center justify-center rounded border border-[#DEDFE2] bg-gradient-to-b from-[#E8E9EC] to-[#D7D9E1] px-5 text-center text-sm font-medium dark:border-[#484F60] dark:from-[#343A4D] dark:to-[#2A3043] dark:font-normal sm:h-12 sm:px-7 sm:text-lg">'use client'</li>
<li className="flex h-10 items-center justify-center rounded border border-[#DEDFE2] bg-gradient-to-b from-[#E8E9EC] to-[#D7D9E1] px-5 text-center text-sm font-medium dark:border-[#484F60] dark:from-[#343A4D] dark:to-[#2A3043] dark:font-normal sm:h-12 sm:px-7 sm:text-lg">useTransition</li>
<li className="flex h-10 items-center justify-center rounded border border-[#DEDFE2] bg-gradient-to-b from-[#E8E9EC] to-[#D7D9E1] px-5 text-center text-sm font-medium dark:border-[#484F60] dark:from-[#343A4D] dark:to-[#2A3043] dark:font-normal sm:h-12 sm:px-7 sm:text-lg">React Compiler</li>
<li className="flex h-10 items-center justify-center rounded border border-[#DEDFE2] bg-gradient-to-b from-[#E8E9EC] to-[#D7D9E1] px-5 text-center text-sm font-medium dark:border-[#484F60] dark:from-[#343A4D] dark:to-[#2A3043] dark:font-normal sm:h-12 sm:px-7 sm:text-lg">Streaming</li>
<li className="flex h-10 items-center justify-center rounded border border-[#DEDFE2] bg-gradient-to-b from-[#E8E9EC] to-[#D7D9E1] px-5 text-center text-sm font-medium dark:border-[#484F60] dark:from-[#343A4D] dark:to-[#2A3043] dark:font-normal sm:h-12 sm:px-7 sm:text-lg">useFormStatus</li>
<li className="flex h-10 items-center justify-center rounded border border-[#DEDFE2] bg-gradient-to-b from-[#E8E9EC] to-[#D7D9E1] px-5 text-center text-sm font-medium dark:border-[#484F60] dark:from-[#343A4D] dark:to-[#2A3043] dark:font-normal sm:h-12 sm:px-7 sm:text-lg">New React Hooks</li>
<li className="flex h-10 items-center justify-center rounded border border-[#DEDFE2] bg-gradient-to-b from-[#E8E9EC] to-[#D7D9E1] px-5 text-center text-sm font-medium dark:border-[#484F60] dark:from-[#343A4D] dark:to-[#2A3043] dark:font-normal sm:h-12 sm:px-7 sm:text-lg">use()</li>
<li className="flex h-10 items-center justify-center rounded border border-[#DEDFE2] bg-gradient-to-b from-[#E8E9EC] to-[#D7D9E1] px-5 text-center text-sm font-medium dark:border-[#484F60] dark:from-[#343A4D] dark:to-[#2A3043] dark:font-normal sm:h-12 sm:px-7 sm:text-lg">Automatic Memoization</li>
</ul>
</div>
<div className={styles.mask}></div>
</div>
)
}

export default TagCloud
9 changes: 9 additions & 0 deletions src/components/stateless/TagCloud/index.module.less
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
.mask{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top:0;
z-index: 10;
background-image: linear-gradient(270deg, hsl(0, 0%, 100%) 0, hsl(0, 0%, 100%) 5%, rgba(17, 23, 41, 0) 49.8%, hsl(0, 0%, 100%) 95%, hsl(0, 0%, 100%) 100%)
}
6 changes: 5 additions & 1 deletion src/pages/home/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ import AnimateOnScreen from '@stateless/AnimateOnScreen'
import AnimateRipple from '@stateless/AnimateRipple'
import AnimateWave from '@stateless/AnimateWave'
import MeshGradientBackground from '@stateless/MeshGradientBackground'
import TagCloud from '@stateless/TagCloud'
import Masonry from '@container/masonryContainer'

import { oneApiChat, prettyObject } from '@utils/aidFn'
Expand Down Expand Up @@ -268,7 +269,7 @@ const Home = () => {
</button>
</section>

<section style={{ position: 'relative', margin: '80px 0 160px 50px' }}>
<section style={{ position: 'relative', margin: '80px 0 160px 100px' }}>
<div className={styles['circle-1']}></div>
<div className={styles['circle-2']}></div>
<div className={styles['circle-3']}></div>
Expand Down Expand Up @@ -300,6 +301,9 @@ const Home = () => {
<section style={{ margin: 20 }}>
<Masonry />
</section>
<section style={{ margin: 20 }}>
<TagCloud />
</section>

<section style={{ width: 600, margin: '30px 0' }}>
<Input defaultValue={apiKey} placeholder="api key" onChange={changeApiKey} style={{ marginBottom: 20 }} />
Expand Down

0 comments on commit 274ab66

Please sign in to comment.