mirror of
https://github.com/qier222/YesPlayMusic.git
synced 2025-03-16 01:45:15 +08:00
feat: 增加 storybook
This commit is contained in:
qier222
parent
8d7ae405a6
commit
0520af8466
5
.gitignore
vendored
5
.gitignore
vendored
@ -52,7 +52,8 @@ release
|
||||
.vscode/settings.json
|
||||
.turbo
|
||||
.env
|
||||
packages/web/bundle-stats-renderer.html
|
||||
packages/web/bundle-stats.html
|
||||
vercel.json
|
||||
.vercel
|
||||
packages/web/bundle-stats-renderer.html
|
||||
packages/web/bundle-stats.html
|
||||
packages/web/storybook-static
|
||||
|
||||
@ -18,12 +18,15 @@
|
||||
"build:web": "turbo run build:web",
|
||||
"dev": "turbo run dev --parallel",
|
||||
"lint": "turbo run lint",
|
||||
"format": "prettier --write \"**/*.{ts,tsx,js,jsx,md}\""
|
||||
"format": "prettier --write \"**/*.{ts,tsx,js,jsx,md}\"",
|
||||
"storybook": "pnpm -F web storybook",
|
||||
"storybook:build": "pnpm -F web storybook:build"
|
||||
},
|
||||
"devDependencies": {
|
||||
"eslint": "^8.15.0",
|
||||
"prettier": "^2.6.2",
|
||||
"turbo": "^1.2.9",
|
||||
"typescript": "^4.6.4"
|
||||
}
|
||||
},
|
||||
"dependencies": {}
|
||||
}
|
||||
|
||||
@ -8,7 +8,10 @@ const pkg = require(`${process.cwd()}/package.json`)
|
||||
const axios = require('axios')
|
||||
const { execSync } = require('child_process')
|
||||
const path = require('path')
|
||||
const { isLinux, isWindows, isMac } = require('../utils')
|
||||
|
||||
const isWindows = process.platform === 'win32'
|
||||
const isMac = process.platform === 'darwin'
|
||||
const isLinux = process.platform === 'linux'
|
||||
|
||||
const electronVersion = pkg.devDependencies.electron.replaceAll('^', '')
|
||||
const betterSqlite3Version = pkg.dependencies['better-sqlite3'].replaceAll(
|
||||
|
||||
36
packages/web/.storybook/main.js
Normal file
36
packages/web/.storybook/main.js
Normal file
@ -0,0 +1,36 @@
|
||||
const { mergeConfig } = require('vite')
|
||||
const { join } = require('path')
|
||||
const { createSvgIconsPlugin } = require('vite-plugin-svg-icons')
|
||||
console.log(join(__dirname, '../assets/icons'))
|
||||
|
||||
module.exports = {
|
||||
stories: [
|
||||
'../components/**/*.stories.mdx',
|
||||
'../components/**/*.stories.@(js|jsx|ts|tsx)',
|
||||
],
|
||||
addons: [
|
||||
'@storybook/addon-links',
|
||||
'@storybook/addon-essentials',
|
||||
'@storybook/addon-interactions',
|
||||
'@storybook/addon-postcss',
|
||||
'@storybook/addon-viewport',
|
||||
'storybook-tailwind-dark-mode',
|
||||
],
|
||||
framework: '@storybook/react',
|
||||
core: {
|
||||
builder: '@storybook/builder-vite',
|
||||
},
|
||||
viteFinal(config) {
|
||||
return mergeConfig(config, {
|
||||
plugins: [
|
||||
/**
|
||||
* @see https://github.com/vbenjs/vite-plugin-svg-icons
|
||||
*/
|
||||
createSvgIconsPlugin({
|
||||
iconDirs: [join(__dirname, '../assets/icons')],
|
||||
symbolId: 'icon-[name]',
|
||||
}),
|
||||
],
|
||||
})
|
||||
},
|
||||
}
|
||||
3
packages/web/.storybook/preview-head.html
Normal file
3
packages/web/.storybook/preview-head.html
Normal file
@ -0,0 +1,3 @@
|
||||
<script>
|
||||
window.global = window;
|
||||
</script>
|
||||
17
packages/web/.storybook/preview.js
Normal file
17
packages/web/.storybook/preview.js
Normal file
@ -0,0 +1,17 @@
|
||||
import 'virtual:svg-icons-register'
|
||||
import '../styles/global.scss'
|
||||
import '../styles/accentColor.scss'
|
||||
import viewports from './viewports'
|
||||
|
||||
export const parameters = {
|
||||
viewport: {
|
||||
viewports,
|
||||
},
|
||||
actions: { argTypesRegex: '^on[A-Z].*' },
|
||||
controls: {
|
||||
matchers: {
|
||||
color: /(background|color)$/i,
|
||||
date: /Date$/,
|
||||
},
|
||||
},
|
||||
}
|
||||
130
packages/web/.storybook/viewports.js
Normal file
130
packages/web/.storybook/viewports.js
Normal file
@ -0,0 +1,130 @@
|
||||
export default {
|
||||
iphone5: {
|
||||
name: 'iPhone 5',
|
||||
styles: {
|
||||
height: '568px',
|
||||
width: '320px',
|
||||
},
|
||||
type: 'mobile',
|
||||
},
|
||||
iphone6: {
|
||||
name: 'iPhone 6 / iPhone SE 2',
|
||||
styles: {
|
||||
height: '667px',
|
||||
width: '375px',
|
||||
},
|
||||
type: 'mobile',
|
||||
},
|
||||
iphone8p: {
|
||||
name: 'iPhone 8 Plus',
|
||||
styles: {
|
||||
height: '736px',
|
||||
width: '414px',
|
||||
},
|
||||
type: 'mobile',
|
||||
},
|
||||
iphonex: {
|
||||
name: 'iPhone X / iPhone 12 mini',
|
||||
styles: {
|
||||
height: '812px',
|
||||
width: '375px',
|
||||
},
|
||||
type: 'mobile',
|
||||
},
|
||||
iphonexr: {
|
||||
name: 'iPhone XR / iPhone XS Max',
|
||||
styles: {
|
||||
height: '896px',
|
||||
width: '414px',
|
||||
},
|
||||
type: 'mobile',
|
||||
},
|
||||
iphone12: {
|
||||
name: 'iPhone 12',
|
||||
styles: {
|
||||
height: '844px',
|
||||
width: '390px',
|
||||
},
|
||||
type: 'mobile',
|
||||
},
|
||||
iphone12promax: {
|
||||
name: 'iPhone 12 Pro Max',
|
||||
styles: {
|
||||
height: '926px',
|
||||
width: '428px',
|
||||
},
|
||||
type: 'mobile',
|
||||
},
|
||||
ipad: {
|
||||
name: 'iPad',
|
||||
styles: {
|
||||
height: '1024px',
|
||||
width: '768px',
|
||||
},
|
||||
type: 'tablet',
|
||||
},
|
||||
ipad10p: {
|
||||
name: 'iPad Pro 10.5-in',
|
||||
styles: {
|
||||
height: '1112px',
|
||||
width: '834px',
|
||||
},
|
||||
type: 'tablet',
|
||||
},
|
||||
ipad12p: {
|
||||
name: 'iPad Pro 12.9-in',
|
||||
styles: {
|
||||
height: '1366px',
|
||||
width: '1024px',
|
||||
},
|
||||
type: 'tablet',
|
||||
},
|
||||
galaxys5: {
|
||||
name: 'Galaxy S5',
|
||||
styles: {
|
||||
height: '640px',
|
||||
width: '360px',
|
||||
},
|
||||
type: 'mobile',
|
||||
},
|
||||
galaxys9: {
|
||||
name: 'Galaxy S9',
|
||||
styles: {
|
||||
height: '740px',
|
||||
width: '360px',
|
||||
},
|
||||
type: 'mobile',
|
||||
},
|
||||
nexus5x: {
|
||||
name: 'Nexus 5X',
|
||||
styles: {
|
||||
height: '660px',
|
||||
width: '412px',
|
||||
},
|
||||
type: 'mobile',
|
||||
},
|
||||
nexus6p: {
|
||||
name: 'Nexus 6P',
|
||||
styles: {
|
||||
height: '732px',
|
||||
width: '412px',
|
||||
},
|
||||
type: 'mobile',
|
||||
},
|
||||
pixel: {
|
||||
name: 'Pixel',
|
||||
styles: {
|
||||
height: '960px',
|
||||
width: '540px',
|
||||
},
|
||||
type: 'mobile',
|
||||
},
|
||||
pixelxl: {
|
||||
name: 'Pixel XL',
|
||||
styles: {
|
||||
height: '1280px',
|
||||
width: '720px',
|
||||
},
|
||||
type: 'mobile',
|
||||
},
|
||||
}
|
||||
@ -1,3 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M9.5 5L14.7363 10.6391C15.4489 11.4065 15.4489 12.5935 14.7363 13.3609L9.5 19" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/>
|
||||
<path d="M5.89791 17.7681C6.22939 17.7681 6.51566 17.6702 6.8396 17.4818L14.5614 12.9467C15.0059 12.683 15.2846 12.3741 15.375 12.005V16.8867C15.375 17.6024 15.7442 17.9715 16.4599 17.9715H18.2302C18.9459 17.9715 19.315 17.6024 19.315 16.8867V6.52061C19.315 5.78986 18.9459 5.43579 18.2302 5.43579H16.4599C15.7442 5.43579 15.375 5.80493 15.375 6.52061V11.3948C15.2846 11.0256 15.0134 10.7318 14.5614 10.4606L6.8396 5.92547C6.50813 5.73713 6.22939 5.6392 5.89038 5.6392C5.22743 5.6392 4.67749 6.1364 4.67749 7.05549V16.3518C4.67749 17.2709 5.23497 17.7681 5.89791 17.7681Z" fill="currentColor"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 257 B After Width: | Height: | Size: 698 B |
@ -1,3 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M17 5V19M16.0239 12.7809L8.6247 18.7002C7.96993 19.2241 7 18.7579 7 17.9194V6.08062C7 5.24212 7.96993 4.77595 8.6247 5.29976L16.0239 11.2191C16.5243 11.6195 16.5243 12.3805 16.0239 12.7809Z" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
||||
<path d="M5.89791 17.7681C6.22939 17.7681 6.51566 17.6702 6.8396 17.4818L14.5614 12.9467C15.0059 12.683 15.2846 12.3741 15.375 12.005V16.8867C15.375 17.6024 15.7442 17.9715 16.4599 17.9715H18.2302C18.9459 17.9715 19.315 17.6024 19.315 16.8867V6.52061C19.315 5.78986 18.9459 5.43579 18.2302 5.43579H16.4599C15.7442 5.43579 15.375 5.80493 15.375 6.52061V11.3948C15.2846 11.0256 15.0134 10.7318 14.5614 10.4606L6.8396 5.92547C6.50813 5.73713 6.22939 5.6392 5.89038 5.6392C5.22743 5.6392 4.67749 6.1364 4.67749 7.05549V16.3518C4.67749 17.2709 5.23497 17.7681 5.89791 17.7681Z" fill="currentColor"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 367 B After Width: | Height: | Size: 698 B |
@ -1,3 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M6 17.783V6.21701C6 5.03661 7.30033 4.31873 8.29922 4.94766L17.484 10.7307C18.4183 11.319 18.4183 12.681 17.484 13.2693L8.29922 19.0523C7.30033 19.6813 6 18.9634 6 17.783Z" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
||||
<path d="M8.0072 18.3181C8.32361 18.3181 8.60235 18.2051 8.94889 18.0017L17.8459 12.8563C18.4938 12.4796 18.765 12.1858 18.765 11.7112C18.765 11.2366 18.4938 10.9504 17.8459 10.5661L8.94889 5.42078C8.60235 5.21737 8.32361 5.10437 8.0072 5.10437C7.38946 5.10437 6.95251 5.57898 6.95251 6.32479V17.0977C6.95251 17.851 7.38946 18.3181 8.0072 18.3181Z" fill="currentColor"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 349 B After Width: | Height: | Size: 474 B |
@ -1,3 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M7 5V19M7.97609 12.7809L15.3753 18.7002C16.0301 19.2241 17 18.7579 17 17.9194V6.08062C17 5.24212 16.0301 4.77595 15.3753 5.29976L7.97609 11.2191C7.47568 11.6195 7.47568 12.3805 7.97609 12.7809Z" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
||||
<path d="M5.7623 17.9715H7.53267C8.24835 17.9715 8.61749 17.6024 8.61749 16.8867V12.005C8.58736 11.9071 8.57983 11.8091 8.57983 11.6961C8.57983 11.5906 8.58736 11.4852 8.61749 11.3948V6.52061C8.61749 5.78986 8.24835 5.44332 7.53267 5.43579H5.7623C5.04662 5.43579 4.67748 5.80493 4.67748 6.52061V16.8867C4.66995 17.6024 5.03909 17.9715 5.7623 17.9715ZM18.0946 17.7681C18.7576 17.7681 19.315 17.2709 19.315 16.3518V7.05549C19.315 6.1364 18.7651 5.6392 18.1021 5.6392C17.7707 5.6392 17.4844 5.73713 17.1529 5.92547L9.43111 10.4606C8.98663 10.7318 8.70789 11.0256 8.61749 11.3948V12.005C8.71543 12.3741 8.98663 12.683 9.43111 12.9467L17.1529 17.4818C17.4844 17.6702 17.7631 17.7681 18.0946 17.7681Z" fill="currentColor"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 371 B After Width: | Height: | Size: 821 B |
@ -1,8 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5 11.5V11C5 8.79086 6.79086 7 9 7H12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
||||
<path d="M19 12.5V13C19 15.2091 17.2091 17 15 17H8" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
||||
<path d="M10.5 9.34761V4.65239C10.5 4.57149 10.5911 4.52408 10.6573 4.57047L14.0111 6.91808C14.0679 6.95789 14.0679 7.04211 14.0111 7.08192L10.6573 9.42953C10.5911 9.47592 10.5 9.42851 10.5 9.34761Z" fill="currentColor" stroke="currentColor" stroke-linecap="round"/>
|
||||
<path d="M8 14.5597V19.2516C8 19.3355 7.90301 19.3821 7.83753 19.3297L4.48617 16.6486C4.43175 16.6051 4.43743 16.5206 4.49719 16.4848L7.84855 14.474C7.9152 14.434 8 14.482 8 14.5597Z" fill="currentColor" stroke="currentColor" stroke-linecap="round"/>
|
||||
<path d="M19 5V9.5" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
||||
<path d="M17 6L19 5" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
||||
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M22.7979 11.3691C23.4131 11.3691 23.7734 11.0352 23.7734 10.3672V6.24512C23.7734 5.54199 23.3076 5.07617 22.6133 5.07617C22.0508 5.07617 21.708 5.25195 21.2598 5.58594L20.126 6.44727C19.8623 6.64941 19.7656 6.84277 19.7656 7.08008C19.7656 7.43164 20.0205 7.7041 20.416 7.7041C20.5918 7.7041 20.7412 7.64258 20.8906 7.52832L21.7344 6.84277H21.8047V10.3672C21.8047 11.0352 22.1738 11.3691 22.7979 11.3691ZM4.12109 12.8984C4.12109 13.5225 4.5957 13.9971 5.21973 13.9971C5.85254 13.9971 6.31836 13.5225 6.31836 12.8984V12.3271C6.31836 10.8945 7.30273 9.97168 8.79688 9.97168H13.2441V11.8086C13.2441 12.3359 13.5781 12.6699 14.1055 12.6699C14.3428 12.6699 14.5713 12.582 14.7471 12.4414L18.21 9.55859C18.6318 9.20703 18.6318 8.63574 18.21 8.28418L14.7471 5.39258C14.5713 5.24316 14.3428 5.15527 14.1055 5.15527C13.5781 5.15527 13.2441 5.48926 13.2441 6.0166V7.80957H8.97266C5.99316 7.80957 4.12109 9.4707 4.12109 12.1162V12.8984ZM12.585 15.3066C12.585 14.7793 12.251 14.4365 11.7236 14.4365C11.4863 14.4365 11.2578 14.5332 11.082 14.6738L7.62793 17.5566C7.19727 17.8994 7.19727 18.4707 7.62793 18.8311L11.082 21.7227C11.2578 21.8721 11.4863 21.96 11.7236 21.96C12.251 21.96 12.585 21.626 12.585 21.0986V19.2969H19.0186C21.998 19.2969 23.8613 17.627 23.8613 14.9902V14.208C23.8613 13.5752 23.3867 13.1006 22.7627 13.1006C22.1387 13.1006 21.6641 13.5752 21.6641 14.208V14.7793C21.6641 16.2031 20.6885 17.1348 19.1855 17.1348H12.585V15.3066Z" fill="currentColor"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 1018 B After Width: | Height: | Size: 1.5 KiB |
@ -1,6 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M4.5 7H5.73524C7.14029 7 8.44232 7.7372 9.16521 8.94202L11 12L13.3057 15.2938C14.0542 16.3632 15.2774 17 16.5826 17H17" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
||||
<path d="M4.5 17H5.73524C7.14029 17 8.44232 16.2628 9.16521 15.058L11 12L13.3057 8.70615C14.0542 7.63685 15.2774 7 16.5826 7H17" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
||||
<path d="M16.5 9.34761V4.65239C16.5 4.57149 16.5911 4.52408 16.6573 4.57047L20.0111 6.91808C20.0679 6.95789 20.0679 7.04211 20.0111 7.08192L16.6573 9.42953C16.5911 9.47592 16.5 9.42851 16.5 9.34761Z" fill="currentColor" stroke="currentColor" stroke-linecap="round"/>
|
||||
<path d="M16.5 19.3476V14.6524C16.5 14.5715 16.5911 14.5241 16.6573 14.5705L20.0111 16.9181C20.0679 16.9579 20.0679 17.0421 20.0111 17.0819L16.6573 19.4295C16.5911 19.4759 16.5 19.4285 16.5 19.3476Z" fill="currentColor" stroke="currentColor" stroke-linecap="round"/>
|
||||
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M3.33887 18.3564C3.33887 18.9805 3.80469 19.4199 4.47266 19.4199H6.54688C8.11133 19.4199 9.06055 18.9541 10.124 17.6885L12.1191 15.3154L14.0791 17.6533C15.1689 18.9541 16.2412 19.4287 17.8145 19.4287H19.3789V21.3535C19.3789 21.8809 19.7129 22.2148 20.249 22.2148C20.4863 22.2148 20.7061 22.127 20.8818 21.9863L24.3447 19.1035C24.7754 18.752 24.7666 18.1807 24.3447 17.8291L20.8818 14.9375C20.7061 14.7881 20.4863 14.7002 20.249 14.7002C19.7129 14.7002 19.3789 15.0342 19.3789 15.5615V17.2842H17.8584C16.8652 17.2842 16.25 16.959 15.5293 16.1064L13.4902 13.6895L15.5381 11.2549C16.2676 10.3848 16.8301 10.0859 17.8057 10.0859H19.3789V11.835C19.3789 12.3623 19.7129 12.6963 20.249 12.6963C20.4863 12.6963 20.7061 12.6084 20.8818 12.4678L24.3447 9.58496C24.7754 9.2334 24.7666 8.66211 24.3447 8.31055L20.8818 5.41895C20.7061 5.26953 20.4863 5.18164 20.249 5.18164C19.7129 5.18164 19.3789 5.51562 19.3789 6.04297V7.94141H17.8232C16.1973 7.94141 15.1689 8.39844 14.0176 9.78711L12.1191 12.0459L10.124 9.68164C9.06055 8.41602 8.0498 7.94141 6.48535 7.94141H4.47266C3.80469 7.94141 3.33887 8.38965 3.33887 9.01367C3.33887 9.6377 3.81348 10.0859 4.47266 10.0859H6.40625C7.35547 10.0859 7.98828 10.4023 8.70898 11.2637L10.7393 13.6807L8.70898 16.1064C7.97949 16.9678 7.4082 17.2842 6.46777 17.2842H4.47266C3.81348 17.2842 3.33887 17.7324 3.33887 18.3564Z" fill="currentColor"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 1023 B After Width: | Height: | Size: 1.4 KiB |
24
packages/web/components/NowPlaying.stories.tsx
Normal file
24
packages/web/components/NowPlaying.stories.tsx
Normal file
@ -0,0 +1,24 @@
|
||||
import React from 'react'
|
||||
import { ComponentStory, ComponentMeta } from '@storybook/react'
|
||||
import { NowPlaying } from './NowPlaying'
|
||||
|
||||
export default {
|
||||
title: 'NowPlaying',
|
||||
component: NowPlaying,
|
||||
argTypes: {
|
||||
backgroundColor: { control: 'color' },
|
||||
},
|
||||
parameters: {
|
||||
viewport: {
|
||||
defaultViewport: 'iphone8p',
|
||||
},
|
||||
},
|
||||
} as ComponentMeta<typeof NowPlaying>
|
||||
|
||||
const Template: ComponentStory<typeof NowPlaying> = args => <NowPlaying />
|
||||
|
||||
export const Primary = Template.bind({})
|
||||
Primary.args = {
|
||||
primary: true,
|
||||
label: 'NowPlaying',
|
||||
}
|
||||
66
packages/web/components/NowPlaying.tsx
Normal file
66
packages/web/components/NowPlaying.tsx
Normal file
@ -0,0 +1,66 @@
|
||||
import React from 'react'
|
||||
import cx from 'classnames'
|
||||
import SvgIcon from './SvgIcon'
|
||||
|
||||
export const NowPlaying = () => {
|
||||
return (
|
||||
<div className='relative flex aspect-square w-full flex-col justify-end overflow-hidden rounded-3xl'>
|
||||
{/* Cover */}
|
||||
<img
|
||||
className='insert-0 absolute w-full'
|
||||
src='https://p2.music.126.net/8g2DIiWDpgZ2nSCoILc9kg==/109951165124745870.jpg?param=1024y1024'
|
||||
/>
|
||||
|
||||
{/* Info & Controls */}
|
||||
<div className='m-3 flex flex-col items-center rounded-[20px] bg-white/60 p-5 backdrop-blur-3xl dark:bg-black/70'>
|
||||
{/* Track Info */}
|
||||
<div className='text-lg text-black dark:text-white'>
|
||||
Life In Technicolor II
|
||||
</div>
|
||||
<div className='text-base text-black/30 dark:text-white/30'>
|
||||
Coldplay
|
||||
</div>
|
||||
|
||||
{/* Dividing line */}
|
||||
<div className='mt-2 h-px w-2/3 bg-black/10 dark:bg-white/10'></div>
|
||||
|
||||
{/* Progress */}
|
||||
<div className='mt-10 flex w-full flex-col'>
|
||||
{/* Slider */}
|
||||
<div className='relative h-[3px] rounded-full bg-black/10 dark:bg-white/10'>
|
||||
<div className='absolute left-0 top-0 bottom-0 w-2/3 rounded-full bg-black dark:bg-white'></div>
|
||||
</div>
|
||||
<div className='mt-1 flex justify-between text-[14px] font-semibold text-black/20 dark:text-white/20'>
|
||||
<span>00:54</span>
|
||||
<span>02:53</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Controls */}
|
||||
<div className='mt-4 flex w-full items-center justify-between'>
|
||||
<SvgIcon
|
||||
name='shuffle'
|
||||
className='h-7 w-7 text-black/90 dark:text-white/40'
|
||||
/>
|
||||
|
||||
<div className='text-black/95 dark:text-white/80'>
|
||||
<button className='rounded-full bg-black/10 p-[10px] dark:bg-white/10'>
|
||||
<SvgIcon name='previous' className='h-6 w-6 ' />
|
||||
</button>
|
||||
<button className='mx-2 rounded-full bg-black/10 p-[10px] dark:bg-white/10'>
|
||||
<SvgIcon name='play' className='h-6 w-6 ' />
|
||||
</button>
|
||||
<button className='rounded-full bg-black/10 p-[10px] dark:bg-white/10'>
|
||||
<SvgIcon name='next' className='h-6 w-6 ' />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<SvgIcon
|
||||
name='repeat-1'
|
||||
className='h-7 w-7 text-black/90 dark:text-white/40'
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -39,6 +39,7 @@ export type SvgName =
|
||||
| 'windows-maximize'
|
||||
| 'windows-un-maximize'
|
||||
| 'x'
|
||||
|
||||
const SvgIcon = ({
|
||||
name,
|
||||
className,
|
||||
|
||||
@ -11,7 +11,9 @@
|
||||
"test:types": "tsc --noEmit --project src/renderer/tsconfig.json",
|
||||
"lint": "eslint --ext .ts,.js,.tsx,.jsx ./",
|
||||
"analyze:css": "npx windicss-analysis",
|
||||
"analyze:js": "npm run build && open-cli bundle-stats-renderer.html"
|
||||
"analyze:js": "npm run build && open-cli bundle-stats-renderer.html",
|
||||
"storybook": "start-storybook -p 6006",
|
||||
"storybook:build": "build-storybook"
|
||||
},
|
||||
"engines": {
|
||||
"node": "^14.13.1 || >=16.0.0"
|
||||
@ -40,6 +42,15 @@
|
||||
"valtio": "^1.6.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/addon-actions": "^6.4.22",
|
||||
"@storybook/addon-essentials": "^6.4.22",
|
||||
"@storybook/addon-interactions": "^6.4.22",
|
||||
"@storybook/addon-links": "^6.4.22",
|
||||
"@storybook/addon-postcss": "^2.0.0",
|
||||
"@storybook/addon-viewport": "^6.4.22",
|
||||
"@storybook/builder-vite": "^0.1.33",
|
||||
"@storybook/react": "^6.4.22",
|
||||
"@storybook/testing-library": "^0.0.11",
|
||||
"@testing-library/react": "^13.1.1",
|
||||
"@types/howler": "^2.2.7",
|
||||
"@types/js-cookie": "^3.0.2",
|
||||
@ -65,6 +76,7 @@
|
||||
"prettier-plugin-tailwindcss": "^0.1.10",
|
||||
"rollup-plugin-visualizer": "^5.6.0",
|
||||
"sass": "^1.51.0",
|
||||
"storybook-tailwind-dark-mode": "^1.0.12",
|
||||
"tailwindcss": "^3.0.24",
|
||||
"typescript": "*",
|
||||
"vite": "^2.9.6",
|
||||
|
||||
@ -39,6 +39,6 @@ module.exports = {
|
||||
plugins: [
|
||||
require('tailwindcss'),
|
||||
require('autoprefixer'),
|
||||
replaceBrandColorWithCSSVar,
|
||||
// replaceBrandColorWithCSSVar,
|
||||
],
|
||||
}
|
||||
|
||||
@ -88,9 +88,11 @@
|
||||
url('@/web/assets/fonts/Barlow-Black.ttf') format('truetype');
|
||||
}
|
||||
|
||||
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
|
||||
|
||||
body,
|
||||
input {
|
||||
font-family: 'Barlow', ui-sans-serif, system-ui, -apple-system,
|
||||
font-family: 'Roboto', 'Barlow', ui-sans-serif, system-ui, -apple-system,
|
||||
BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei,
|
||||
Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, microsoft uighur,
|
||||
sans-serif;
|
||||
|
||||
@ -4,12 +4,23 @@ const pickedColors = require('./scripts/pickedColors.js')
|
||||
|
||||
module.exports = {
|
||||
content: ['./index.html', './**/*.{vue,js,ts,jsx,tsx}'],
|
||||
darkMode: 'media',
|
||||
darkMode: 'class',
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
...pickedColors,
|
||||
brand: colors.blue,
|
||||
brand: {
|
||||
50: '#FCFFF5',
|
||||
100: '#ECFEC1',
|
||||
200: '#DCFB8F',
|
||||
300: '#CDF764',
|
||||
400: '#BFF142',
|
||||
500: '#B2E928',
|
||||
600: '#A5DE16',
|
||||
700: '#98D00B',
|
||||
800: '#8BC003',
|
||||
900: '#8BC003',
|
||||
},
|
||||
gray: colors.neutral,
|
||||
},
|
||||
},
|
||||
|
||||
8878
pnpm-lock.yaml
generated
8878
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
Loading…
x
Reference in New Issue
Block a user