mirror of
https://github.com/remvze/moodist.git
synced 2025-12-17 17:04:15 +00:00
Compare commits
No commits in common. "main" and "v1.4.2" have entirely different histories.
275 changed files with 2961 additions and 19561 deletions
|
|
@ -1,12 +1,15 @@
|
|||
{
|
||||
"root": true,
|
||||
|
||||
"env": {
|
||||
"browser": true,
|
||||
"amd": true,
|
||||
"node": true,
|
||||
"es2022": true
|
||||
},
|
||||
|
||||
"parser": "@typescript-eslint/parser",
|
||||
|
||||
"parserOptions": {
|
||||
"ecmaVersion": "latest",
|
||||
"sourceType": "module",
|
||||
|
|
@ -14,6 +17,7 @@
|
|||
"jsx": true
|
||||
}
|
||||
},
|
||||
|
||||
"extends": [
|
||||
"eslint:recommended",
|
||||
"plugin:@typescript-eslint/recommended",
|
||||
|
|
@ -24,9 +28,9 @@
|
|||
"plugin:jsx-a11y/recommended",
|
||||
"plugin:react-hooks/recommended",
|
||||
"plugin:astro/recommended",
|
||||
"prettier",
|
||||
"plugin:storybook/recommended"
|
||||
"prettier"
|
||||
],
|
||||
|
||||
"plugins": [
|
||||
"@typescript-eslint",
|
||||
"typescript-sort-keys",
|
||||
|
|
@ -34,6 +38,7 @@
|
|||
"sort-destructure-keys",
|
||||
"prettier"
|
||||
],
|
||||
|
||||
"rules": {
|
||||
"@typescript-eslint/ban-ts-comment": "off",
|
||||
"prettier/prettier": "error",
|
||||
|
|
@ -41,8 +46,6 @@
|
|||
"sort-destructure-keys/sort-destructure-keys": "warn",
|
||||
"jsx-a11y/no-static-element-interactions": "off",
|
||||
"jsx-a11y/media-has-caption": "off",
|
||||
"jsx-a11y/no-noninteractive-tabindex": "off",
|
||||
"jsx-a11y/label-has-associated-control": "off",
|
||||
"react/jsx-sort-props": [
|
||||
"warn",
|
||||
{
|
||||
|
|
@ -51,40 +54,48 @@
|
|||
}
|
||||
]
|
||||
},
|
||||
|
||||
"settings": {
|
||||
"react": {
|
||||
"version": "detect"
|
||||
},
|
||||
|
||||
"import/parsers": {
|
||||
"@typescript-eslint/parser": [".ts", ".tsx", ".js", ".jsx"]
|
||||
},
|
||||
|
||||
"import/resolver": {
|
||||
"typescript": true,
|
||||
"node": true,
|
||||
|
||||
"alias": {
|
||||
"extensions": [".js", ".jsx", ".ts", ".tsx", ".d.ts"],
|
||||
"map": [["@", "./src"]]
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
"overrides": [
|
||||
{
|
||||
"files": ["**/*.astro"],
|
||||
"parser": "astro-eslint-parser",
|
||||
|
||||
"parserOptions": {
|
||||
"parser": "@typescript-eslint/parser",
|
||||
"extraFileExtensions": [".astro"]
|
||||
},
|
||||
|
||||
"rules": {
|
||||
"prettier/prettier": "error",
|
||||
"react/no-unknown-property": "off",
|
||||
"react/jsx-key": "off",
|
||||
"react/jsx-no-undef": "off"
|
||||
"react/jsx-key": "off"
|
||||
},
|
||||
|
||||
"globals": {
|
||||
"Astro": "readonly"
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
"files": ["**/*.astro/*.js"],
|
||||
"rules": {
|
||||
|
|
|
|||
2
.github/workflows/build_docker.yml
vendored
2
.github/workflows/build_docker.yml
vendored
|
|
@ -34,7 +34,7 @@ jobs:
|
|||
GIT_TAG=${GIT_TAG#refs/tags/}
|
||||
|
||||
docker buildx build \
|
||||
--platform linux/amd64,linux/arm64 \
|
||||
--platform linux/amd64,linux/arm64,linux/arm/v7 \
|
||||
-t $IMAGE_NAME:latest \
|
||||
-t $IMAGE_NAME:$GIT_TAG \
|
||||
--push .
|
||||
|
|
|
|||
2
.gitignore
vendored
2
.gitignore
vendored
|
|
@ -19,5 +19,3 @@ pnpm-debug.log*
|
|||
|
||||
# macOS-specific files
|
||||
.DS_Store
|
||||
|
||||
*storybook.log
|
||||
|
|
@ -1,46 +0,0 @@
|
|||
import path from 'node:path';
|
||||
|
||||
import type { StorybookConfig } from '@storybook/react-vite';
|
||||
|
||||
const config: StorybookConfig = {
|
||||
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
|
||||
|
||||
addons: [
|
||||
'@storybook/addon-onboarding',
|
||||
'@storybook/addon-links',
|
||||
'@storybook/addon-essentials',
|
||||
'@chromatic-com/storybook',
|
||||
'@storybook/addon-interactions',
|
||||
'@storybook/addon-a11y',
|
||||
],
|
||||
|
||||
framework: {
|
||||
name: '@storybook/react-vite',
|
||||
options: {},
|
||||
},
|
||||
|
||||
docs: {
|
||||
autodocs: 'tag',
|
||||
},
|
||||
|
||||
viteFinal(config) {
|
||||
return {
|
||||
...config,
|
||||
|
||||
define: {
|
||||
'process.env.NODE_DEBUG': false, // https://github.com/storybookjs/storybook/issues/18920
|
||||
},
|
||||
|
||||
resolve: {
|
||||
alias: [
|
||||
{
|
||||
find: '@',
|
||||
replacement: path.resolve(__dirname, '../src'),
|
||||
},
|
||||
],
|
||||
},
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
export default config;
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
import '../src/styles/global.css';
|
||||
|
||||
import type { Preview } from '@storybook/react';
|
||||
|
||||
const preview: Preview = {
|
||||
parameters: {
|
||||
controls: {
|
||||
matchers: {
|
||||
color: /(background|color)$/i,
|
||||
date: /Date$/i,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export default preview;
|
||||
|
|
@ -8,8 +8,7 @@
|
|||
|
||||
"rules": {
|
||||
"import-notation": "string",
|
||||
"selector-class-pattern": null,
|
||||
"no-descending-specificity": null
|
||||
"selector-class-pattern": null
|
||||
},
|
||||
|
||||
"overrides": [
|
||||
|
|
|
|||
977
CHANGELOG.md
977
CHANGELOG.md
File diff suppressed because it is too large
Load diff
|
|
@ -1,25 +0,0 @@
|
|||
# Contributing Guidelines
|
||||
|
||||
Thank you for considering contributing to our project! We welcome your contributions.
|
||||
|
||||
## How to Contribute
|
||||
|
||||
1. Fork the repository.
|
||||
2. Create a new branch: `git checkout -b feature/your-feature-name`.
|
||||
3. Make your changes and commit them: `git commit -m 'feat: add some feature'`.
|
||||
4. Push to the branch: `git push origin feature/your-feature-name`.
|
||||
5. Submit a pull request. ⚡
|
||||
|
||||
⚠️ **Notice**: Commit messages should follow [Conventional Commits Specification](https://www.conventionalcommits.org/en/v1.0.0/).
|
||||
|
||||
## Report Bugs
|
||||
|
||||
To report a bug, please open an issue on GitHub and provide detailed information about the bug, including steps to reproduce it.
|
||||
|
||||
## Request Features
|
||||
|
||||
To request a new feature, open an issue on GitHub and describe the feature you would like to see added.
|
||||
|
||||
## License
|
||||
|
||||
By contributing, you agree that your contributions will be licensed under the project's [LICENSE](LICENSE).
|
||||
|
|
@ -1,11 +1,11 @@
|
|||
FROM docker.io/node:20-alpine3.18 AS build
|
||||
FROM node:20-alpine3.18 AS build
|
||||
WORKDIR /app
|
||||
COPY package*.json ./
|
||||
RUN npm install
|
||||
COPY . .
|
||||
RUN npm run build
|
||||
|
||||
FROM docker.io/nginx:alpine AS runtime
|
||||
FROM nginx:alpine AS runtime
|
||||
COPY ./docker/nginx/nginx.conf /etc/nginx/nginx.conf
|
||||
COPY --from=build /app/dist /usr/share/nginx/html
|
||||
|
||||
|
|
|
|||
87
README.md
87
README.md
|
|
@ -1,89 +1,6 @@
|
|||
<div align="center">
|
||||
<img src="/assets/banner.png" alt="Moodist Logo Banner" />
|
||||
<img src="/assets/banner.svg" alt="Moodist Logo Banner" />
|
||||
<h2>Moodist 🌲</h2>
|
||||
<p>Ambient sounds for focus and calm.</p>
|
||||
<a href="https://moodist.mvze.net">Visit <strong>Moodist</strong></a> | <a href="https://buymeacoffee.com/remvze">Buy Me a Coffee</a>
|
||||
<a href="https://moodist.app">Visit <strong>Moodist</strong></a> | <a href="https://buymeacoffee.com/remvze">Buy Me a Coffee</a>
|
||||
</div>
|
||||
|
||||
## Table of Contents
|
||||
|
||||
- ⚡ [Features](#features)
|
||||
- 🧰 [Tools](#tools)
|
||||
- 🔮 [Commands](#commands)
|
||||
- 🚧 [Contributing](#contributing)
|
||||
- ⭐ [Support](#support-moodist)
|
||||
- 📜 [License](#license)
|
||||
|
||||
## Features
|
||||
|
||||
1. 🎵 Over 75 ambient sounds.
|
||||
1. 📝 Persistent sound selection.
|
||||
1. ✈️ Sharing sound selections with others.
|
||||
1. 🧰 Custom sound presets.
|
||||
1. 🌙 Sleep timer for sounds.
|
||||
1. 📓 Notepad for quick notes.
|
||||
1. 🍅 Pomodoro timer.
|
||||
1. ✅ Simple to-do list (soon).
|
||||
1. ⏯️ Media controls.
|
||||
1. ⌨️ Keyboard shortcuts for everything.
|
||||
1. 🥷 Privacy focused: no data collection.
|
||||
1. 💰 Completely free, open-source, and self-hostable.
|
||||
|
||||
## Tools
|
||||
|
||||
- ⚡ **TypeScript**: Programming Language
|
||||
- 🔨 **React**: UI Library
|
||||
- 🧑🚀 **Astro**: Meta Framework
|
||||
- 🎨 **CSS Modules**: Styling
|
||||
- 🐻 **Zustand**: State Management
|
||||
- 🎭 **Framer Motion**: Animation Library
|
||||
- ⚙️ **Radix**: Accessible Components
|
||||
- 📕 **Storybook**: Component Documentation
|
||||
- 🧪 **Vitest**: Unit Testing (soon)
|
||||
- 🔭 **Playwright**: End-To-End Testing (soon)
|
||||
- 🔍 **ESLint**: Code Linting
|
||||
- 🧹 **Prettier**: Code Formatting
|
||||
- 🧼 **Stylelint**: CSS Linting
|
||||
- 🐶 **Husky**: Git Hooks
|
||||
- 📝 **Lint Staged**: Running Linters on Staged Files
|
||||
- 🧽 **Commitlint**: Git Commit Linting
|
||||
- 🧭 **Commitizen**: Git Commit Message Helper
|
||||
- 📓 **Standard Version**: Versioning and CHANGLOG Generation
|
||||
- 🧰 **PostCSS**: CSS Transformations
|
||||
|
||||
## Commands
|
||||
|
||||
- `npm run dev`: run development server
|
||||
- `npm run build`: build for production
|
||||
- `npm run preview`: preview the built app
|
||||
- `npm run lint`: lint files using ESLint
|
||||
- `npm run lint:fix`: lint and fix using ESLint
|
||||
- `npm run lint:style`: lint styles using Stylelint
|
||||
- `npm run lint:style:fix`: lint and fix styles using Stylelint
|
||||
- `npm run format`: format files using Prettier
|
||||
- `npm run commit`: commit message using Commitizen
|
||||
- `npm run release:major`: release major version
|
||||
- `npm run release:minor`: release minor version
|
||||
- `npm run release:patch`: release patch version
|
||||
- `npm run storybook`: run Storybook
|
||||
|
||||
## Contributing
|
||||
|
||||
🚧 Please check [CONTRIBUTING.md](CONTRIBUTING.md) file.
|
||||
|
||||
## Support Moodist
|
||||
|
||||
⭐ Give a star if you liked this project.
|
||||
|
||||
☕ [Buy Me a Coffee](https://buymeacoffee.com/remvze) to help me maintain Moodist.
|
||||
|
||||
## License
|
||||
|
||||
This project is licensed under the **MIT License** - see the [LICENSE](LICENSE) file for details.
|
||||
|
||||
### ⚠️ Third-Party Assets
|
||||
|
||||
Some sounds used in this project are sourced from third-party providers and **are subject to different licenses**:
|
||||
|
||||
- Sounds licensed under the **Pixabay Content License**: [Pixabay Content License](https://pixabay.com/service/license-summary/)
|
||||
- Sounds licensed under **CC0**: [Creative Commons Zero License](https://creativecommons.org/publicdomain/zero/1.0/)
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 193 KiB |
40
assets/banner.svg
Normal file
40
assets/banner.svg
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
<svg width="1200" height="400" viewBox="0 0 1200 400" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="1200" height="400" rx="25" fill="#09090B"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M600 237.5C620.711 237.5 637.5 220.711 637.5 200C637.5 179.289 620.711 162.5 600 162.5C579.289 162.5 562.5 179.289 562.5 200C562.5 220.711 579.289 237.5 600 237.5ZM600 218.75C610.355 218.75 618.75 210.355 618.75 200C618.75 189.645 610.355 181.25 600 181.25C589.645 181.25 581.25 189.645 581.25 200C581.25 210.355 589.645 218.75 600 218.75Z" fill="#FAFAFA"/>
|
||||
<path d="M562.5 162.5C541.789 162.5 525 179.289 525 200C525 220.711 541.789 237.5 562.5 237.5L562.5 218.75C552.145 218.75 543.75 210.355 543.75 200C543.75 189.645 552.145 181.25 562.5 181.25L562.5 162.5Z" fill="#D4D4D8"/>
|
||||
<path d="M637.5 162.5C637.5 141.789 620.711 125 600 125C579.289 125 562.5 141.789 562.5 162.5L581.25 162.5C581.25 152.145 589.645 143.75 600 143.75C610.355 143.75 618.75 152.145 618.75 162.5L637.5 162.5Z" fill="#D4D4D8"/>
|
||||
<path d="M637.5 237.5C658.211 237.5 675 220.711 675 200C675 179.289 658.211 162.5 637.5 162.5L637.5 181.25C647.855 181.25 656.25 189.645 656.25 200C656.25 210.355 647.855 218.75 637.5 218.75L637.5 237.5Z" fill="#D4D4D8"/>
|
||||
<path d="M562.5 237.5C562.5 258.211 579.289 275 600 275C620.711 275 637.5 258.211 637.5 237.5H618.75C618.75 247.855 610.355 256.25 600 256.25C589.645 256.25 581.25 247.855 581.25 237.5H562.5Z" fill="#D4D4D8"/>
|
||||
<path d="M543.75 162.5C543.75 152.145 552.145 143.75 562.5 143.75L562.5 125C541.789 125 525 141.789 525 162.5L543.75 162.5Z" fill="#A1A1AA"/>
|
||||
<path d="M637.5 143.75C647.855 143.75 656.25 152.145 656.25 162.5L675 162.5C675 141.789 658.211 125 637.5 125L637.5 143.75Z" fill="#A1A1AA"/>
|
||||
<path d="M656.25 237.5C656.25 247.855 647.855 256.25 637.5 256.25L637.5 275C658.211 275 675 258.211 675 237.5L656.25 237.5Z" fill="#A1A1AA"/>
|
||||
<path d="M562.5 256.25C552.145 256.25 543.75 247.855 543.75 237.5H525C525 258.211 541.789 275 562.5 275V256.25Z" fill="#A1A1AA"/>
|
||||
<path d="M693.75 237.5C693.75 247.855 685.355 256.25 675 256.25L675 275C695.711 275 712.5 258.211 712.5 237.5L693.75 237.5Z" fill="#18181B"/>
|
||||
<path d="M656.25 275C656.25 285.355 647.855 293.75 637.5 293.75L637.5 312.5C658.211 312.5 675 295.711 675 275L656.25 275Z" fill="#18181B"/>
|
||||
<path d="M525 256.25C514.645 256.25 506.25 247.855 506.25 237.5H487.5C487.5 258.211 504.289 275 525 275V256.25Z" fill="#18181B"/>
|
||||
<path d="M562.5 293.75C552.145 293.75 543.75 285.355 543.75 275H525C525 295.711 541.789 312.5 562.5 312.5V293.75Z" fill="#18181B"/>
|
||||
<path d="M562.5 331.25C552.145 331.25 543.75 322.855 543.75 312.5H525C525 333.211 541.789 350 562.5 350V331.25Z" fill="#18181B"/>
|
||||
<path d="M525 293.75C514.645 293.75 506.25 285.355 506.25 275H487.5C487.5 295.711 504.289 312.5 525 312.5V293.75Z" fill="#18181B"/>
|
||||
<path d="M487.5 256.25C477.145 256.25 468.75 247.855 468.75 237.5H450C450 258.211 466.789 275 487.5 275V256.25Z" fill="#18181B"/>
|
||||
<path d="M543.75 125C543.75 114.645 552.145 106.25 562.5 106.25L562.5 87.5C541.789 87.5 525 104.289 525 125L543.75 125Z" fill="#18181B"/>
|
||||
<path d="M506.25 162.5C506.25 152.145 514.645 143.75 525 143.75L525 125C504.289 125 487.5 141.789 487.5 162.5L506.25 162.5Z" fill="#18181B"/>
|
||||
<path d="M468.75 162.5C468.75 152.145 477.145 143.75 487.5 143.75L487.5 125C466.789 125 450 141.789 450 162.5L468.75 162.5Z" fill="#18181B"/>
|
||||
<path d="M506.25 125C506.25 114.645 514.645 106.25 525 106.25L525 87.5C504.289 87.5 487.5 104.289 487.5 125L506.25 125Z" fill="#18181B"/>
|
||||
<path d="M543.75 87.5C543.75 77.1447 552.145 68.75 562.5 68.75L562.5 50C541.789 50 525 66.7893 525 87.5L543.75 87.5Z" fill="#18181B"/>
|
||||
<path d="M675 143.75C685.355 143.75 693.75 152.145 693.75 162.5L712.5 162.5C712.5 141.789 695.711 125 675 125L675 143.75Z" fill="#18181B"/>
|
||||
<path d="M637.5 106.25C647.855 106.25 656.25 114.645 656.25 125L675 125C675 104.289 658.211 87.5 637.5 87.5L637.5 106.25Z" fill="#18181B"/>
|
||||
<path d="M637.5 68.75C647.855 68.75 656.25 77.1447 656.25 87.5L675 87.5C675 66.7893 658.211 50 637.5 50L637.5 68.75Z" fill="#18181B"/>
|
||||
<path d="M675 106.25C685.355 106.25 693.75 114.645 693.75 125L712.5 125C712.5 104.289 695.711 87.5 675 87.5L675 106.25Z" fill="#18181B"/>
|
||||
<path d="M712.5 143.75C722.855 143.75 731.25 152.145 731.25 162.5L750 162.5C750 141.789 733.211 125 712.5 125L712.5 143.75Z" fill="#18181B"/>
|
||||
<path d="M693.75 275C693.75 285.355 685.355 293.75 675 293.75L675 312.5C695.711 312.5 712.5 295.711 712.5 275L693.75 275Z" fill="#18181B"/>
|
||||
<path d="M731.25 237.5C731.25 247.855 722.855 256.25 712.5 256.25L712.5 275C733.211 275 750 258.211 750 237.5L731.25 237.5Z" fill="#18181B"/>
|
||||
<path d="M656.25 312.5C656.25 322.855 647.855 331.25 637.5 331.25L637.5 350C658.211 350 675 333.211 675 312.5L656.25 312.5Z" fill="#18181B"/>
|
||||
<path d="M525 162.5C504.289 162.5 487.5 179.289 487.5 200C487.5 220.711 504.289 237.5 525 237.5L525 218.75C514.645 218.75 506.25 210.355 506.25 200C506.25 189.645 514.645 181.25 525 181.25L525 162.5Z" fill="#18181B"/>
|
||||
<path d="M487.5 162.5C466.789 162.5 450 179.289 450 200C450 220.711 466.789 237.5 487.5 237.5L487.5 218.75C477.145 218.75 468.75 210.355 468.75 200C468.75 189.645 477.145 181.25 487.5 181.25L487.5 162.5Z" fill="#18181B"/>
|
||||
<path d="M637.5 125C637.5 104.289 620.711 87.5 600 87.5C579.289 87.5 562.5 104.289 562.5 125L581.25 125C581.25 114.645 589.645 106.25 600 106.25C610.355 106.25 618.75 114.645 618.75 125L637.5 125Z" fill="#18181B"/>
|
||||
<path d="M637.5 87.5C637.5 66.7893 620.711 50 600 50C579.289 50 562.5 66.7893 562.5 87.5L581.25 87.5C581.25 77.1447 589.645 68.75 600 68.75C610.355 68.75 618.75 77.1447 618.75 87.5L637.5 87.5Z" fill="#18181B"/>
|
||||
<path d="M675 237.5C695.711 237.5 712.5 220.711 712.5 200C712.5 179.289 695.711 162.5 675 162.5L675 181.25C685.355 181.25 693.75 189.645 693.75 200C693.75 210.355 685.355 218.75 675 218.75L675 237.5Z" fill="#18181B"/>
|
||||
<path d="M712.5 237.5C733.211 237.5 750 220.711 750 200C750 179.289 733.211 162.5 712.5 162.5L712.5 181.25C722.855 181.25 731.25 189.645 731.25 200C731.25 210.355 722.855 218.75 712.5 218.75L712.5 237.5Z" fill="#18181B"/>
|
||||
<path d="M562.5 275C562.5 295.711 579.289 312.5 600 312.5C620.711 312.5 637.5 295.711 637.5 275H618.75C618.75 285.355 610.355 293.75 600 293.75C589.645 293.75 581.25 285.355 581.25 275H562.5Z" fill="#18181B"/>
|
||||
<path d="M562.5 312.5C562.5 333.211 579.289 350 600 350C620.711 350 637.5 333.211 637.5 312.5H618.75C618.75 322.855 610.355 331.25 600 331.25C589.645 331.25 581.25 322.855 581.25 312.5H562.5Z" fill="#18181B"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 6.3 KiB |
|
|
@ -1,36 +1,8 @@
|
|||
import { defineConfig } from 'astro/config';
|
||||
|
||||
import react from '@astrojs/react';
|
||||
import AstroPWA from '@vite-pwa/astro';
|
||||
import react from "@astrojs/react";
|
||||
|
||||
// https://astro.build/config
|
||||
export default defineConfig({
|
||||
integrations: [
|
||||
react(),
|
||||
AstroPWA({
|
||||
manifest: {
|
||||
background_color: '#09090b',
|
||||
description: 'Ambient sounds for focus and calm.',
|
||||
display: 'standalone',
|
||||
icons: [
|
||||
...[72, 128, 144, 152, 192, 256, 512].map(size => ({
|
||||
sizes: `${size}x${size}`,
|
||||
src: `/assets/pwa/${size}.png`,
|
||||
type: 'image/png',
|
||||
})),
|
||||
],
|
||||
name: 'Moodist',
|
||||
orientation: 'any',
|
||||
scope: '/',
|
||||
short_name: 'Moodist',
|
||||
start_url: '/',
|
||||
theme_color: '#09090b',
|
||||
},
|
||||
registerType: 'prompt',
|
||||
workbox: {
|
||||
globPatterns: ['**/*'],
|
||||
maximumFileSizeToCacheInBytes: Number.MAX_SAFE_INTEGER,
|
||||
navigateFallback: '/',
|
||||
},
|
||||
}),
|
||||
],
|
||||
});
|
||||
integrations: [react()]
|
||||
});
|
||||
13917
package-lock.json
generated
13917
package-lock.json
generated
File diff suppressed because it is too large
Load diff
39
package.json
39
package.json
|
|
@ -1,14 +1,13 @@
|
|||
{
|
||||
"name": "moodist",
|
||||
"type": "module",
|
||||
"version": "2.4.0",
|
||||
"version": "1.4.2",
|
||||
"scripts": {
|
||||
"dev": "astro dev",
|
||||
"start": "astro dev",
|
||||
"build": "astro build",
|
||||
"preview": "astro preview",
|
||||
"astro": "astro",
|
||||
"test": "vitest",
|
||||
"lint": "eslint . --ext .js,.jsx,.ts,.tsx,.astro",
|
||||
"lint:fix": "npm run lint -- --fix",
|
||||
"lint:style": "stylelint ./**/*.{css,astro,html}",
|
||||
|
|
@ -19,51 +18,27 @@
|
|||
"release": "standard-version --no-verify",
|
||||
"release:major": "npm run release -- --release-as major",
|
||||
"release:minor": "npm run release -- --release-as minor",
|
||||
"release:patch": "npm run release -- --release-as patch",
|
||||
"storybook": "storybook dev -p 6006",
|
||||
"build-storybook": "storybook build"
|
||||
"release:patch": "npm run release -- --release-as patch"
|
||||
},
|
||||
"dependencies": {
|
||||
"@astrojs/react": "3.6.0",
|
||||
"@astrojs/react": "^3.0.3",
|
||||
"@floating-ui/react": "0.26.0",
|
||||
"@formkit/auto-animate": "0.8.2",
|
||||
"@radix-ui/react-checkbox": "1.1.4",
|
||||
"@radix-ui/react-dropdown-menu": "2.0.6",
|
||||
"@radix-ui/react-slider": "1.2.3",
|
||||
"@radix-ui/react-tooltip": "1.2.8",
|
||||
"@types/howler": "2.2.10",
|
||||
"@types/react": "^18.2.25",
|
||||
"@types/react-dom": "^18.2.10",
|
||||
"@vite-pwa/astro": "0.5.0",
|
||||
"astro": "4.10.3",
|
||||
"astro": "4.0.3",
|
||||
"deepmerge": "4.3.1",
|
||||
"focus-trap-react": "10.2.3",
|
||||
"framer-motion": "10.16.4",
|
||||
"howler": "2.2.4",
|
||||
"js-confetti": "0.12.0",
|
||||
"motion": "12.23.24",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-hotkeys-hook": "3.2.1",
|
||||
"react-icons": "4.11.0",
|
||||
"react-wrap-balancer": "1.1.0",
|
||||
"react-youtube": "10.1.0",
|
||||
"uuid": "10.0.0",
|
||||
"zustand": "4.4.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@chromatic-com/storybook": "1.3.3",
|
||||
"@commitlint/cli": "17.7.2",
|
||||
"@commitlint/config-conventional": "17.7.0",
|
||||
"@storybook/addon-a11y": "8.0.9",
|
||||
"@storybook/addon-essentials": "8.0.9",
|
||||
"@storybook/addon-interactions": "8.0.9",
|
||||
"@storybook/addon-links": "8.0.9",
|
||||
"@storybook/addon-onboarding": "8.0.9",
|
||||
"@storybook/blocks": "8.0.9",
|
||||
"@storybook/react": "8.0.9",
|
||||
"@storybook/react-vite": "8.0.9",
|
||||
"@storybook/test": "8.0.9",
|
||||
"@typescript-eslint/eslint-plugin": "6.7.4",
|
||||
"@typescript-eslint/parser": "6.7.4",
|
||||
"astro-eslint-parser": "0.16.0",
|
||||
|
|
@ -82,7 +57,6 @@
|
|||
"eslint-plugin-react-hooks": "4.6.0",
|
||||
"eslint-plugin-sort-destructure-keys": "1.5.0",
|
||||
"eslint-plugin-sort-keys-fix": "1.1.2",
|
||||
"eslint-plugin-storybook": "0.8.0",
|
||||
"eslint-plugin-typescript-sort-keys": "3.1.0",
|
||||
"husky": "8.0.3",
|
||||
"lint-staged": "14.0.1",
|
||||
|
|
@ -90,14 +64,11 @@
|
|||
"postcss-nesting": "12.0.1",
|
||||
"prettier": "3.0.3",
|
||||
"prettier-plugin-astro": "0.12.0",
|
||||
"prop-types": "15.8.1",
|
||||
"standard-version": "9.5.0",
|
||||
"storybook": "8.0.9",
|
||||
"stylelint": "15.10.3",
|
||||
"stylelint-config-html": "1.1.0",
|
||||
"stylelint-config-recess-order": "4.4.0",
|
||||
"stylelint-config-standard": "34.0.0",
|
||||
"stylelint-prettier": "4.0.2",
|
||||
"vitest": "1.6.0"
|
||||
"stylelint-prettier": "4.0.2"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 3.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.3 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.5 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 1.6 KiB |
BIN
public/og.png
BIN
public/og.png
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 32 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -1,156 +0,0 @@
|
|||
---
|
||||
import { Container } from '@/components/container';
|
||||
|
||||
import { count as soundCount } from '@/lib/sounds';
|
||||
|
||||
const count = soundCount();
|
||||
|
||||
const paragraphs = [
|
||||
{
|
||||
body: 'Craving a calming escape from the daily grind? Do you need the perfect soundscape to boost your focus or lull you into peaceful sleep? Look no further than Moodist, your free and open-source ambient sound generator! Ditch the subscriptions and registrations – with Moodist, you unlock a world of soothing and immersive audio experiences, entirely for free.',
|
||||
title: 'Free Ambient Sounds',
|
||||
},
|
||||
{
|
||||
body: `Dive into an expansive library of ${count} carefully curated sounds. Nature lovers will find solace in the gentle murmur of streams, the rhythmic crash of waves, or the crackling warmth of a campfire. Cityscapes come alive with the soft hum of cafes, the rhythmic clatter of trains, or the calming white noise of traffic. And for those seeking deeper focus or relaxation, Moodist offers binaural beats and color noise designed to enhance your state of mind.`,
|
||||
title: 'Carefully Curated Sounds',
|
||||
},
|
||||
{
|
||||
body: 'The beauty of Moodist lies in its simplicity and customization. No complex menus or confusing options – just choose your desired sounds, adjust the volume balance, and hit play. Want to blend the gentle chirping of birds with the soothing sound of rain? No problem! Layer as many sounds as you like to create your personalized soundscape oasis.',
|
||||
title: 'Create Your Soundscape',
|
||||
},
|
||||
{
|
||||
body: "Whether you're looking to unwind after a long day, enhance your focus during work, or lull yourself into a peaceful sleep, Moodist has the perfect soundscape waiting for you. The best part? It's completely free and open-source, so you can enjoy its benefits without any strings attached. Start using Moodist today and discover your new haven of tranquility and focus!",
|
||||
title: 'Sounds for Every Moment',
|
||||
},
|
||||
];
|
||||
---
|
||||
|
||||
<section class="about">
|
||||
<div class="effect"></div>
|
||||
|
||||
<Container tight>
|
||||
{
|
||||
paragraphs.map((paragraph, index) => (
|
||||
<div class="paragraph">
|
||||
<div class="counter">
|
||||
<span>0{index + 1}</span> / 0{paragraphs.length}
|
||||
</div>
|
||||
|
||||
<h2 class="title">{paragraph.title}</h2>
|
||||
<p class="body">{paragraph.body}</p>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
|
||||
<button class="button" id="use-moodist"> Use Moodist</button>
|
||||
</Container>
|
||||
</section>
|
||||
|
||||
<script lang="ts">
|
||||
const button = document.getElementById('use-moodist');
|
||||
|
||||
button.addEventListener('click', () => {
|
||||
const app = document.getElementById('app');
|
||||
|
||||
app?.scrollIntoView();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.about {
|
||||
padding-top: 10px;
|
||||
|
||||
& .effect {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
height: 80px;
|
||||
background: linear-gradient(var(--color-neutral-50), transparent);
|
||||
}
|
||||
|
||||
& .paragraph {
|
||||
padding: 30px 0;
|
||||
background: linear-gradient(
|
||||
transparent,
|
||||
var(--color-neutral-50) 10%,
|
||||
var(--color-neutral-50) 90%,
|
||||
transparent
|
||||
);
|
||||
|
||||
&:last-of-type {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
& .counter {
|
||||
width: max-content;
|
||||
padding: 6px 16px;
|
||||
margin-bottom: 16px;
|
||||
font-size: var(--font-xsm);
|
||||
color: var(--color-foreground-subtle);
|
||||
background: linear-gradient(var(--color-neutral-100), transparent);
|
||||
border: 1px solid var(--color-neutral-300);
|
||||
border-radius: 20px 20px 20px 8px;
|
||||
|
||||
& span {
|
||||
font-weight: 500;
|
||||
color: var(--color-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
& .title {
|
||||
margin-bottom: 8px;
|
||||
font-family: var(--font-heading);
|
||||
font-size: var(--font-md);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
& .body {
|
||||
line-height: 1.6;
|
||||
color: var(--color-foreground-subtle);
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 10px 16px;
|
||||
margin-top: 20px;
|
||||
font-size: var(--font-xsm);
|
||||
font-weight: 500;
|
||||
color: var(--color-foreground);
|
||||
cursor: pointer;
|
||||
background-color: transparent;
|
||||
border: 1px solid var(--color-neutral-200);
|
||||
border-radius: 50px;
|
||||
outline: none;
|
||||
transition: 0.2s;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
left: 50%;
|
||||
width: 70%;
|
||||
height: 1px;
|
||||
content: '';
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent,
|
||||
var(--color-neutral-300),
|
||||
transparent
|
||||
);
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus-visible {
|
||||
background-color: var(--color-neutral-100);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 2px solid var(--color-neutral-400);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
90
src/components/about/about.module.css
Normal file
90
src/components/about/about.module.css
Normal file
|
|
@ -0,0 +1,90 @@
|
|||
.about {
|
||||
padding-top: 10px;
|
||||
|
||||
& .effect {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
height: 80px;
|
||||
background: linear-gradient(var(--color-neutral-50), transparent);
|
||||
}
|
||||
|
||||
& .paragraph {
|
||||
padding: 30px 0;
|
||||
background: linear-gradient(
|
||||
transparent,
|
||||
var(--color-neutral-50) 10%,
|
||||
var(--color-neutral-50) 90%,
|
||||
transparent
|
||||
);
|
||||
|
||||
&:last-of-type {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
& .counter {
|
||||
width: max-content;
|
||||
padding: 6px 16px;
|
||||
margin-bottom: 16px;
|
||||
font-size: var(--font-xsm);
|
||||
color: var(--color-foreground-subtle);
|
||||
background: linear-gradient(var(--color-neutral-100), transparent);
|
||||
border: 1px solid var(--color-neutral-300);
|
||||
border-radius: 20px 20px 20px 8px;
|
||||
|
||||
& span {
|
||||
font-weight: 500;
|
||||
color: var(--color-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
& .title {
|
||||
margin-bottom: 8px;
|
||||
font-family: var(--font-heading);
|
||||
font-size: var(--font-md);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
& .body {
|
||||
line-height: 1.6;
|
||||
color: var(--color-foreground-subtle);
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 10px 16px;
|
||||
margin-top: 20px;
|
||||
font-size: var(--font-xsm);
|
||||
font-weight: 500;
|
||||
color: var(--color-foreground);
|
||||
cursor: pointer;
|
||||
background-color: transparent;
|
||||
border: 1px solid var(--color-neutral-200);
|
||||
border-radius: 50px;
|
||||
outline: none;
|
||||
transition: 0.2s;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
left: 50%;
|
||||
width: 70%;
|
||||
height: 1px;
|
||||
content: '';
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent,
|
||||
var(--color-neutral-300),
|
||||
transparent
|
||||
);
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-neutral-100);
|
||||
}
|
||||
}
|
||||
}
|
||||
60
src/components/about/about.tsx
Normal file
60
src/components/about/about.tsx
Normal file
|
|
@ -0,0 +1,60 @@
|
|||
import { Container } from '@/components/container';
|
||||
import { count as soundCount } from '@/lib/sounds';
|
||||
|
||||
import styles from './about.module.css';
|
||||
|
||||
export function About() {
|
||||
const count = soundCount();
|
||||
|
||||
const paragraphs = [
|
||||
{
|
||||
body: 'Craving a calming escape from the daily grind? Do you need the perfect soundscape to boost your focus or lull you into peaceful sleep? Look no further than Moodist, your free and open-source ambient sound generator! Ditch the subscriptions and registrations – with Moodist, you unlock a world of soothing and immersive audio experiences, entirely for free.',
|
||||
title: 'Free Ambient Sounds',
|
||||
},
|
||||
{
|
||||
body: `Dive into an expansive library of ${count} carefully curated sounds. Nature lovers will find solace in the gentle murmur of streams, the rhythmic crash of waves, or the crackling warmth of a campfire. Cityscapes come alive with the soft hum of cafes, the rhythmic clatter of trains, or the calming white noise of traffic. And for those seeking deeper focus or relaxation, Moodist offers binaural beats and color noise designed to enhance your state of mind.`,
|
||||
title: 'Carefully Curated Sounds',
|
||||
},
|
||||
{
|
||||
body: 'The beauty of Moodist lies in its simplicity and customization. No complex menus or confusing options – just choose your desired sounds, adjust the volume balance, and hit play. Want to blend the gentle chirping of birds with the soothing sound of rain? No problem! Layer as many sounds as you like to create your personalized soundscape oasis.',
|
||||
title: 'Create Your Soundscape',
|
||||
},
|
||||
// {
|
||||
// body: 'Moodist goes beyond just ambient sounds by offering a suite of productivity tools to help you stay organized and focused. Utilize the built-in pomodoro timer to structure your workday in focused intervals, jot down thoughts and ideas in the simple notepad, and keep track of your tasks with the handy to-do list. These tools seamlessly integrate with the ambient soundscapes, allowing you to create a personalized environment that fosters both focus and relaxation.',
|
||||
// title: 'A Productivity Toolbox',
|
||||
// },
|
||||
{
|
||||
body: "Whether you're looking to unwind after a long day, enhance your focus during work, or lull yourself into a peaceful sleep, Moodist has the perfect soundscape waiting for you. The best part? It's completely free and open-source, so you can enjoy its benefits without any strings attached. Start using Moodist today and discover your new haven of tranquility and focus!",
|
||||
title: 'Sounds for Every Moment',
|
||||
},
|
||||
];
|
||||
|
||||
const handleClick = () => {
|
||||
const app = document.getElementById('app');
|
||||
|
||||
app?.scrollIntoView();
|
||||
};
|
||||
|
||||
return (
|
||||
<section className={styles.about}>
|
||||
<div className={styles.effect} />
|
||||
|
||||
<Container tight>
|
||||
{paragraphs.map((paragraph, index) => (
|
||||
<div className={styles.paragraph} key={index}>
|
||||
<div className={styles.counter}>
|
||||
<span>0{index + 1}</span> / 0{paragraphs.length}
|
||||
</div>
|
||||
|
||||
<h2 className={styles.title}>{paragraph.title}</h2>
|
||||
<p className={styles.body}>{paragraph.body}</p>
|
||||
</div>
|
||||
))}
|
||||
|
||||
<button className={styles.button} onClick={handleClick}>
|
||||
Use Moodist
|
||||
</button>
|
||||
</Container>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
1
src/components/about/index.ts
Normal file
1
src/components/about/index.ts
Normal file
|
|
@ -0,0 +1 @@
|
|||
export { About } from './about';
|
||||
|
|
@ -3,7 +3,7 @@ import { useShallow } from 'zustand/react/shallow';
|
|||
import { BiSolidHeart } from 'react-icons/bi/index';
|
||||
import { Howler } from 'howler';
|
||||
|
||||
import { useSoundStore } from '@/stores/sound';
|
||||
import { useSoundStore } from '@/store';
|
||||
|
||||
import { Container } from '@/components/container';
|
||||
import { StoreConsumer } from '@/components/store-consumer';
|
||||
|
|
@ -12,21 +12,15 @@ import { Categories } from '@/components/categories';
|
|||
import { SharedModal } from '@/components/modals/shared';
|
||||
import { Toolbar } from '@/components/toolbar';
|
||||
import { SnackbarProvider } from '@/contexts/snackbar';
|
||||
import { MediaControls } from '@/components/media-controls';
|
||||
|
||||
import { sounds } from '@/data/sounds';
|
||||
import { FADE_OUT } from '@/constants/events';
|
||||
|
||||
import type { Sound } from '@/data/types';
|
||||
import { subscribe } from '@/lib/event';
|
||||
|
||||
export function App() {
|
||||
const categories = useMemo(() => sounds.categories, []);
|
||||
|
||||
const favorites = useSoundStore(useShallow(state => state.getFavorites()));
|
||||
const pause = useSoundStore(state => state.pause);
|
||||
const lock = useSoundStore(state => state.lock);
|
||||
const unlock = useSoundStore(state => state.unlock);
|
||||
|
||||
const favoriteSounds = useMemo(() => {
|
||||
const favoriteSounds = categories
|
||||
|
|
@ -58,19 +52,6 @@ export function App() {
|
|||
return () => document.removeEventListener('visibilitychange', onChange);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const unsubscribe = subscribe(FADE_OUT, (e: { duration: number }) => {
|
||||
lock();
|
||||
|
||||
setTimeout(() => {
|
||||
pause();
|
||||
unlock();
|
||||
}, e.duration);
|
||||
});
|
||||
|
||||
return unsubscribe;
|
||||
}, [pause, lock, unlock]);
|
||||
|
||||
const allCategories = useMemo(() => {
|
||||
const favorites = [];
|
||||
|
||||
|
|
@ -89,7 +70,6 @@ export function App() {
|
|||
return (
|
||||
<SnackbarProvider>
|
||||
<StoreConsumer>
|
||||
<MediaControls />
|
||||
<Container>
|
||||
<div id="app" />
|
||||
<Buttons />
|
||||
|
|
|
|||
|
|
@ -1,7 +0,0 @@
|
|||
---
|
||||
import { generateRandomBinaryString } from '@/helpers/binary';
|
||||
|
||||
const binary = generateRandomBinaryString(1000);
|
||||
---
|
||||
|
||||
<span>{binary}</span>
|
||||
|
|
@ -12,16 +12,13 @@
|
|||
background-color: var(--color-neutral-950);
|
||||
border: 1px solid var(--color-neutral-50);
|
||||
border-radius: 100px;
|
||||
outline: none;
|
||||
transition: 0.2s;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-neutral-800);
|
||||
}
|
||||
|
||||
&:not(.disabled):active {
|
||||
transform: scale(0.97);
|
||||
}
|
||||
|
||||
&:disabled,
|
||||
&.disabled {
|
||||
cursor: not-allowed;
|
||||
|
|
@ -30,9 +27,4 @@
|
|||
& span {
|
||||
font-size: var(--font-lg);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 2px solid var(--color-neutral-400);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,7 @@
|
|||
import { useCallback, useEffect } from 'react';
|
||||
import { useEffect } from 'react';
|
||||
import { BiPause, BiPlay } from 'react-icons/bi/index';
|
||||
import { useHotkeys } from 'react-hotkeys-hook';
|
||||
|
||||
import { useSoundStore } from '@/stores/sound';
|
||||
import { useSoundStore } from '@/store';
|
||||
import { useSnackbar } from '@/contexts/snackbar';
|
||||
import { cn } from '@/helpers/styles';
|
||||
|
||||
|
|
@ -13,40 +12,35 @@ export function PlayButton() {
|
|||
const pause = useSoundStore(state => state.pause);
|
||||
const toggle = useSoundStore(state => state.togglePlay);
|
||||
const noSelected = useSoundStore(state => state.noSelected());
|
||||
const locked = useSoundStore(state => state.locked);
|
||||
|
||||
const showSnackbar = useSnackbar();
|
||||
|
||||
const handleToggle = useCallback(() => {
|
||||
if (locked) return;
|
||||
|
||||
const handleClick = () => {
|
||||
if (noSelected) return showSnackbar('Please first select a sound to play.');
|
||||
|
||||
toggle();
|
||||
}, [showSnackbar, toggle, noSelected, locked]);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (isPlaying && noSelected) pause();
|
||||
}, [isPlaying, pause, noSelected]);
|
||||
|
||||
useHotkeys('shift+space', handleToggle, {}, [handleToggle]);
|
||||
|
||||
return (
|
||||
<button
|
||||
aria-disabled={noSelected}
|
||||
className={cn(styles.playButton, noSelected && styles.disabled)}
|
||||
onClick={handleToggle}
|
||||
onClick={handleClick}
|
||||
>
|
||||
{isPlaying ? (
|
||||
<>
|
||||
<span aria-hidden="true">
|
||||
<span>
|
||||
<BiPause />
|
||||
</span>{' '}
|
||||
Pause
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<span aria-hidden="true">
|
||||
<span>
|
||||
<BiPlay />
|
||||
</span>{' '}
|
||||
Play
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@
|
|||
background-color: var(--color-neutral-100);
|
||||
border: 1px solid var(--color-neutral-300);
|
||||
border-radius: 100px;
|
||||
outline: none;
|
||||
transition: 0.2s;
|
||||
|
||||
&:disabled,
|
||||
|
|
@ -19,19 +20,9 @@
|
|||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: scale(0.97);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus-visible {
|
||||
&:hover {
|
||||
background-color: var(--color-neutral-200);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 2px solid var(--color-neutral-400);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
|
|
|
|||
|
|
@ -1,11 +1,9 @@
|
|||
import { useCallback } from 'react';
|
||||
import { BiUndo, BiTrash } from 'react-icons/bi/index';
|
||||
import { AnimatePresence, motion } from 'motion/react';
|
||||
import { useHotkeys } from 'react-hotkeys-hook';
|
||||
import { AnimatePresence, motion } from 'framer-motion';
|
||||
|
||||
import { Tooltip } from '@/components/tooltip';
|
||||
|
||||
import { useSoundStore } from '@/stores/sound';
|
||||
import { useSoundStore } from '@/store';
|
||||
import { cn } from '@/helpers/styles';
|
||||
import { fade, mix, slideX } from '@/lib/motion';
|
||||
|
||||
|
|
@ -16,21 +14,12 @@ export function UnselectButton() {
|
|||
const restoreHistory = useSoundStore(state => state.restoreHistory);
|
||||
const hasHistory = useSoundStore(state => !!state.history);
|
||||
const unselectAll = useSoundStore(state => state.unselectAll);
|
||||
const locked = useSoundStore(state => state.locked);
|
||||
|
||||
const variants = {
|
||||
...mix(fade(), slideX(15)),
|
||||
exit: { opacity: 0 },
|
||||
};
|
||||
|
||||
const handleToggle = useCallback(() => {
|
||||
if (locked) return;
|
||||
if (hasHistory) restoreHistory();
|
||||
else if (!noSelected) unselectAll(true);
|
||||
}, [hasHistory, noSelected, unselectAll, restoreHistory, locked]);
|
||||
|
||||
useHotkeys('shift+r', handleToggle, {}, [handleToggle]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<AnimatePresence mode="wait">
|
||||
|
|
@ -41,31 +30,34 @@ export function UnselectButton() {
|
|||
initial="hidden"
|
||||
variants={variants}
|
||||
>
|
||||
<Tooltip.Provider delayDuration={0}>
|
||||
<Tooltip
|
||||
content={
|
||||
<Tooltip
|
||||
hideDelay={0}
|
||||
showDelay={0}
|
||||
content={
|
||||
hasHistory
|
||||
? 'Restore unselected sounds.'
|
||||
: 'Unselect all sounds.'
|
||||
}
|
||||
>
|
||||
<button
|
||||
disabled={noSelected && !hasHistory}
|
||||
aria-label={
|
||||
hasHistory
|
||||
? 'Restore unselected sounds.'
|
||||
: 'Unselect all sounds.'
|
||||
? 'Restore Unselected Sounds'
|
||||
: 'Unselect All Sounds'
|
||||
}
|
||||
className={cn(
|
||||
styles.unselectButton,
|
||||
noSelected && !hasHistory && styles.disabled,
|
||||
)}
|
||||
onClick={() => {
|
||||
if (hasHistory) restoreHistory();
|
||||
else if (!noSelected) unselectAll(true);
|
||||
}}
|
||||
>
|
||||
<button
|
||||
disabled={noSelected && !hasHistory}
|
||||
aria-label={
|
||||
hasHistory
|
||||
? 'Restore Unselected Sounds'
|
||||
: 'Unselect All Sounds'
|
||||
}
|
||||
className={cn(
|
||||
styles.unselectButton,
|
||||
noSelected && !hasHistory && styles.disabled,
|
||||
)}
|
||||
onClick={handleToggle}
|
||||
>
|
||||
{hasHistory ? <BiUndo /> : <BiTrash />}
|
||||
</button>
|
||||
</Tooltip>
|
||||
</Tooltip.Provider>
|
||||
{hasHistory ? <BiUndo /> : <BiTrash />}
|
||||
</button>
|
||||
</Tooltip>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { AnimatePresence } from 'motion/react';
|
||||
import { AnimatePresence } from 'framer-motion';
|
||||
|
||||
import { Category } from './category';
|
||||
import { Category } from '@/components/category';
|
||||
import { Donate } from './donate';
|
||||
|
||||
import type { Categories } from '@/data/types';
|
||||
|
|
|
|||
|
|
@ -1,47 +0,0 @@
|
|||
.wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
padding-bottom: 80px;
|
||||
|
||||
& .title {
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--font-lg);
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
& .categoryIconsWrapper {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 15px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
& .icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
font-size: var(--font-md);
|
||||
color: var(--color-foreground);
|
||||
cursor: pointer;
|
||||
background: linear-gradient(
|
||||
var(--color-neutral-50),
|
||||
var(--color-neutral-100)
|
||||
);
|
||||
border: 1px solid var(--color-neutral-300);
|
||||
border-radius: 50%;
|
||||
transition: 0.2s;
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(
|
||||
var(--color-neutral-100),
|
||||
var(--color-neutral-200)
|
||||
);
|
||||
transform: scale(1.15);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,42 +0,0 @@
|
|||
import { sounds } from '@/data/sounds';
|
||||
import { useMemo } from 'react';
|
||||
import styles from './category-icons.module.css';
|
||||
import { Container } from '@/components/container';
|
||||
import { Tooltip } from '@/components/tooltip';
|
||||
|
||||
export default function CategoryIcons() {
|
||||
const categories = useMemo(() => sounds.categories, []);
|
||||
|
||||
const goto = (id: string) => {
|
||||
const category = document.getElementById(`category-${id}`);
|
||||
category?.scrollIntoView();
|
||||
};
|
||||
|
||||
return (
|
||||
<Container>
|
||||
<div className={styles.wrapper}>
|
||||
<h3 className={styles.title}>Categories</h3>
|
||||
<div className={styles.categoryIconsWrapper}>
|
||||
<Tooltip.Provider delayDuration={0}>
|
||||
{categories.map(category => {
|
||||
return (
|
||||
<Tooltip
|
||||
content={category.title}
|
||||
key={category.id}
|
||||
placement="bottom"
|
||||
>
|
||||
<button
|
||||
className={styles.icon}
|
||||
onClick={() => goto(category.id)}
|
||||
>
|
||||
{category.icon}
|
||||
</button>
|
||||
</Tooltip>
|
||||
);
|
||||
})}
|
||||
</Tooltip.Provider>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
|
@ -20,10 +20,7 @@
|
|||
width: 45px;
|
||||
height: 45px;
|
||||
font-size: var(--font-md);
|
||||
background: linear-gradient(
|
||||
var(--color-neutral-50),
|
||||
var(--color-neutral-100)
|
||||
);
|
||||
background-color: var(--color-neutral-100);
|
||||
border: 1px solid var(--color-neutral-300);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
|
@ -34,16 +31,6 @@
|
|||
font-size: var(--font-lg);
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
|
||||
& span {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
var(--color-foreground),
|
||||
var(--color-foreground-subtle)
|
||||
);
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
& .desc {
|
||||
|
|
|
|||
|
|
@ -9,14 +9,12 @@ export function Donate() {
|
|||
<div className={styles.donate}>
|
||||
<div className={styles.iconContainer}>
|
||||
<div className={styles.tail} />
|
||||
<div aria-hidden="true" className={styles.icon}>
|
||||
<div className={styles.icon}>
|
||||
<FaCoffee />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.title}>
|
||||
<span>Support Me</span>
|
||||
</div>
|
||||
<div className={styles.title}>Support Me</div>
|
||||
<p className={styles.desc}>Help me keep Moodist ad-free.</p>
|
||||
<SpecialButton
|
||||
className={styles.button}
|
||||
|
|
|
|||
|
|
@ -22,10 +22,7 @@
|
|||
width: 45px;
|
||||
height: 45px;
|
||||
font-size: var(--font-md);
|
||||
background: linear-gradient(
|
||||
var(--color-neutral-50),
|
||||
var(--color-neutral-100)
|
||||
);
|
||||
background-color: var(--color-neutral-100);
|
||||
border: 1px solid var(--color-neutral-300);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
|
@ -16,12 +16,10 @@ export function Category({
|
|||
title,
|
||||
}: CategoryProps) {
|
||||
return (
|
||||
<div className={styles.category} id={`category-${id}`}>
|
||||
<div className={styles.category}>
|
||||
<div className={styles.iconContainer}>
|
||||
<div className={styles.tail} />
|
||||
<div aria-hidden="true" className={styles.icon}>
|
||||
{icon}
|
||||
</div>
|
||||
<div className={styles.icon}>{icon}</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.title}>{title}</div>
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
.checkboxRoot {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
cursor: pointer;
|
||||
background: var(--color-neutral-100);
|
||||
border: 2px solid var(--color-neutral-300);
|
||||
border-radius: 4px;
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
||||
.checkboxRoot[data-state='checked'] {
|
||||
background: var(--color-neutral-950);
|
||||
border: 2px solid var(--color-neutral-950);
|
||||
}
|
||||
|
||||
.checkboxIndicator {
|
||||
font-size: var(--font-2xsm);
|
||||
color: var(--color-neutral-50);
|
||||
transform: translateY(2px);
|
||||
}
|
||||
|
|
@ -1,38 +0,0 @@
|
|||
import * as RadixCheckbox from '@radix-ui/react-checkbox';
|
||||
import { FaCheck } from 'react-icons/fa6/index';
|
||||
|
||||
import styles from './checkbox.module.css';
|
||||
|
||||
type CheckboxInputProps = {
|
||||
checked?: boolean;
|
||||
className?: string;
|
||||
defaultChecked?: boolean;
|
||||
disabled?: boolean;
|
||||
onChange?: (checked: boolean) => void;
|
||||
};
|
||||
|
||||
export function Checkbox({
|
||||
checked,
|
||||
className,
|
||||
defaultChecked = false,
|
||||
disabled = false,
|
||||
onChange,
|
||||
}: CheckboxInputProps) {
|
||||
const handleCheckedChange = (checked: boolean) => {
|
||||
if (onChange) onChange(checked);
|
||||
};
|
||||
|
||||
return (
|
||||
<RadixCheckbox.Root
|
||||
checked={checked}
|
||||
className={`${styles.checkboxRoot} ${className}`}
|
||||
defaultChecked={defaultChecked}
|
||||
disabled={disabled}
|
||||
onCheckedChange={handleCheckedChange}
|
||||
>
|
||||
<RadixCheckbox.Indicator className={styles.checkboxIndicator}>
|
||||
<FaCheck />
|
||||
</RadixCheckbox.Indicator>
|
||||
</RadixCheckbox.Root>
|
||||
);
|
||||
}
|
||||
|
|
@ -1 +0,0 @@
|
|||
export { Checkbox } from './checkbox';
|
||||
|
|
@ -1,61 +0,0 @@
|
|||
import { useState, useEffect } from 'react';
|
||||
|
||||
interface CipherTextProps {
|
||||
interval?: number;
|
||||
text: string;
|
||||
}
|
||||
|
||||
const chars = '-_~`!@#$%^&*()+=[]{}|;:,.<>?';
|
||||
|
||||
export function CipherText({ interval = 50, text }: CipherTextProps) {
|
||||
const [outputText, setOutputText] = useState('');
|
||||
const [isMounted, setIsMounted] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setTimeout(() => setIsMounted(true), 2000);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isMounted) return;
|
||||
|
||||
let timer: NodeJS.Timeout;
|
||||
|
||||
if (outputText !== text) {
|
||||
timer = setInterval(() => {
|
||||
if (outputText.length < text.length) {
|
||||
setOutputText(prev => prev + text[prev.length]);
|
||||
} else {
|
||||
clearInterval(timer);
|
||||
}
|
||||
}, interval);
|
||||
}
|
||||
|
||||
return () => clearInterval(timer);
|
||||
}, [text, interval, outputText, isMounted]);
|
||||
|
||||
useEffect(() => {
|
||||
if (outputText === text) {
|
||||
setTimeout(() => setOutputText(''), 6000);
|
||||
}
|
||||
}, [outputText, text]);
|
||||
|
||||
const remainder =
|
||||
outputText.length < text.length
|
||||
? text
|
||||
.slice(outputText.length)
|
||||
.split('')
|
||||
.map(() => chars[Math.floor(Math.random() * chars.length)])
|
||||
.join('')
|
||||
: '';
|
||||
|
||||
if (!isMounted) {
|
||||
return <span>{text}</span>;
|
||||
}
|
||||
|
||||
return (
|
||||
<span className="text-white">
|
||||
{outputText}
|
||||
{remainder}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,57 +0,0 @@
|
|||
---
|
||||
import { Container } from './container';
|
||||
---
|
||||
|
||||
<Container>
|
||||
<section class="wrapper">
|
||||
<p class="text">
|
||||
Enjoy Moodist?{' '}
|
||||
<a
|
||||
href="https://buymeacoffee.com/remvze"
|
||||
rel="noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
Support with a donation!
|
||||
</a>
|
||||
</p>
|
||||
</section>
|
||||
</Container>
|
||||
|
||||
<style>
|
||||
.wrapper {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
padding: 16px;
|
||||
font-size: var(--font-xsm);
|
||||
color: var(--color-foreground-subtle);
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
width: 80%;
|
||||
height: 1px;
|
||||
content: '';
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent,
|
||||
var(--color-neutral-400),
|
||||
transparent
|
||||
);
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
& .text {
|
||||
text-align: center;
|
||||
|
||||
& a {
|
||||
font-weight: 500;
|
||||
color: var(--color-foreground);
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,29 +1,36 @@
|
|||
.timer {
|
||||
.wrapper {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
padding: 48px 0;
|
||||
font-size: var(--font-xlg);
|
||||
font-weight: 500;
|
||||
background-color: var(--color-neutral-50);
|
||||
border: 1px solid var(--color-neutral-200);
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
font-size: var(--font-xsm);
|
||||
color: var(--color-foreground-subtle);
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
bottom: -1px;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
width: 75%;
|
||||
width: 80%;
|
||||
height: 1px;
|
||||
content: '';
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent,
|
||||
var(--color-neutral-400),
|
||||
var(--color-neutral-200),
|
||||
transparent
|
||||
);
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
& .text {
|
||||
text-align: center;
|
||||
|
||||
& a {
|
||||
font-weight: 500;
|
||||
color: var(--color-foreground);
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
22
src/components/donate/donate.tsx
Normal file
22
src/components/donate/donate.tsx
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
import { Container } from '@/components/container';
|
||||
|
||||
import styles from './donate.module.css';
|
||||
|
||||
export function Donate() {
|
||||
return (
|
||||
<Container>
|
||||
<section className={styles.wrapper}>
|
||||
<p className={styles.text}>
|
||||
Enjoy Moodist?{' '}
|
||||
<a
|
||||
href="https://buymeacoffee.com/remvze"
|
||||
rel="noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
Support with a donation!
|
||||
</a>
|
||||
</p>
|
||||
</section>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
1
src/components/donate/index.ts
Normal file
1
src/components/donate/index.ts
Normal file
|
|
@ -0,0 +1 @@
|
|||
export { Donate } from './donate';
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
---
|
||||
import { Container } from './container';
|
||||
---
|
||||
|
||||
<footer class="footer">
|
||||
<Container>
|
||||
<p>
|
||||
Created by <a href="https://twitter.com/remvze">Maze ✦</a>
|
||||
</p>
|
||||
</Container>
|
||||
</footer>
|
||||
|
||||
<style>
|
||||
.footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100px;
|
||||
|
||||
& p {
|
||||
font-size: var(--font-sm);
|
||||
color: var(--color-foreground-subtle);
|
||||
text-align: center;
|
||||
|
||||
& a {
|
||||
font-weight: 500;
|
||||
color: var(--color-foreground);
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
17
src/components/footer/footer.module.css
Normal file
17
src/components/footer/footer.module.css
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
.footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100px;
|
||||
|
||||
& p {
|
||||
font-size: var(--font-sm);
|
||||
color: var(--color-foreground-subtle);
|
||||
text-align: center;
|
||||
|
||||
& a {
|
||||
font-weight: 500;
|
||||
color: var(--color-foreground);
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
15
src/components/footer/footer.tsx
Normal file
15
src/components/footer/footer.tsx
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
import { Container } from '@/components/container';
|
||||
|
||||
import styles from './footer.module.css';
|
||||
|
||||
export function Footer() {
|
||||
return (
|
||||
<footer className={styles.footer}>
|
||||
<Container>
|
||||
<p>
|
||||
Created by <a href="https://twitter.com/remvze">Maze ✦</a>
|
||||
</p>
|
||||
</Container>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
1
src/components/footer/index.ts
Normal file
1
src/components/footer/index.ts
Normal file
|
|
@ -0,0 +1 @@
|
|||
export { Footer } from './footer';
|
||||
|
|
@ -1,174 +0,0 @@
|
|||
---
|
||||
import { BsSoundwave } from 'react-icons/bs/index';
|
||||
|
||||
import { Container } from './container';
|
||||
|
||||
import { count as soundCount } from '@/lib/sounds';
|
||||
|
||||
const count = soundCount();
|
||||
---
|
||||
|
||||
<div class="hero">
|
||||
<Container>
|
||||
<div class="wrapper">
|
||||
<div class="pattern"></div>
|
||||
<div class="logo-wrapper">
|
||||
<img
|
||||
alt="Faded Moodist Logo"
|
||||
aria-hidden="true"
|
||||
class="logo"
|
||||
height={48}
|
||||
src="/logo.svg"
|
||||
width={48}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<h1 class="title">
|
||||
Ambient Sounds<span class="line">For Focus and Calm</span>
|
||||
</h1>
|
||||
<h2 class="desc">Free and Open-Source.</h2>
|
||||
|
||||
<p class="sounds">
|
||||
<span aria-hidden="true" class="icon">
|
||||
<BsSoundwave />
|
||||
</span>
|
||||
<span>{count} Sounds</span>
|
||||
</p>
|
||||
</div>
|
||||
</Container>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.hero {
|
||||
text-align: center;
|
||||
|
||||
.wrapper {
|
||||
position: relative;
|
||||
padding: 120px 0 80px;
|
||||
|
||||
& .pattern {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: radial-gradient(
|
||||
var(--color-neutral-500) 5%,
|
||||
transparent 5%
|
||||
);
|
||||
background-position: top center;
|
||||
background-size: 21px 21px;
|
||||
opacity: 0.8;
|
||||
mask-image: linear-gradient(#fff, transparent, transparent);
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
width: 300px;
|
||||
height: 100px;
|
||||
content: '';
|
||||
background: var(--color-neutral-200);
|
||||
filter: blur(50px);
|
||||
border-radius: 100%;
|
||||
opacity: 0.8;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& .logo-wrapper {
|
||||
mask-image: linear-gradient(#000, rgb(0 0 0 / 40%), rgb(0 0 0 / 5%));
|
||||
|
||||
& .logo {
|
||||
display: block;
|
||||
width: 48px;
|
||||
margin: 0 auto 20px;
|
||||
opacity: 1;
|
||||
animation-name: logo;
|
||||
animation-duration: 60s;
|
||||
animation-timing-function: linear;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
}
|
||||
|
||||
& .title {
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--font-xlg);
|
||||
font-weight: 600;
|
||||
line-height: 1.1;
|
||||
|
||||
& .line {
|
||||
display: block;
|
||||
margin-top: 2px;
|
||||
background: linear-gradient(
|
||||
var(--color-foreground-subtler),
|
||||
var(--color-foreground-subtle)
|
||||
);
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
& .desc {
|
||||
margin-top: 12px;
|
||||
line-height: 1.6;
|
||||
color: var(--color-foreground-subtle);
|
||||
}
|
||||
|
||||
& .sounds {
|
||||
position: relative;
|
||||
display: flex;
|
||||
column-gap: 8px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: max-content;
|
||||
height: 28px;
|
||||
padding-right: 12px;
|
||||
margin: 20px auto 0;
|
||||
font-size: var(--font-xsm);
|
||||
color: var(--color-foreground-subtle);
|
||||
background: linear-gradient(var(--color-neutral-100), transparent);
|
||||
border: 1px solid var(--color-neutral-200);
|
||||
border-radius: 100px;
|
||||
|
||||
& .icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
padding: 0 10px;
|
||||
color: var(--color-foreground);
|
||||
border-right: 1px solid var(--color-neutral-200);
|
||||
border-radius: 0 100px 100px 0;
|
||||
}
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
left: 50%;
|
||||
width: 70%;
|
||||
height: 1px;
|
||||
content: '';
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent,
|
||||
var(--color-neutral-400),
|
||||
transparent
|
||||
);
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes logo {
|
||||
0% {
|
||||
transform: rotate(0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
120
src/components/hero/hero.module.css
Normal file
120
src/components/hero/hero.module.css
Normal file
|
|
@ -0,0 +1,120 @@
|
|||
.hero {
|
||||
text-align: center;
|
||||
|
||||
.container {
|
||||
position: relative;
|
||||
padding: 100px 0 80px;
|
||||
|
||||
/* padding: 120px 0 60px; */
|
||||
|
||||
& .pattern {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: radial-gradient(
|
||||
var(--color-neutral-300) 5%,
|
||||
transparent 5%
|
||||
);
|
||||
background-position: top center;
|
||||
background-size: 31px 31px;
|
||||
opacity: 0.9;
|
||||
mask-image: linear-gradient(#fff, transparent, transparent);
|
||||
}
|
||||
}
|
||||
|
||||
& .logo {
|
||||
display: block;
|
||||
width: 45px;
|
||||
margin: 0 auto 12px;
|
||||
}
|
||||
|
||||
& .title {
|
||||
display: flex;
|
||||
column-gap: 15px;
|
||||
align-items: center;
|
||||
|
||||
& div {
|
||||
flex-grow: 1;
|
||||
height: 1px;
|
||||
|
||||
&.left {
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent,
|
||||
transparent,
|
||||
var(--color-neutral-200),
|
||||
var(--color-neutral-300)
|
||||
);
|
||||
}
|
||||
|
||||
&.right {
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
var(--color-neutral-300),
|
||||
var(--color-neutral-200),
|
||||
transparent,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
& h2 {
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--font-2xlg);
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
& .desc {
|
||||
margin-top: 5px;
|
||||
line-height: 1.6;
|
||||
color: var(--color-foreground-subtle);
|
||||
}
|
||||
|
||||
& .sounds {
|
||||
position: relative;
|
||||
display: flex;
|
||||
column-gap: 8px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: max-content;
|
||||
height: 28px;
|
||||
padding-right: 12px;
|
||||
margin: 20px auto 0;
|
||||
font-size: var(--font-xsm);
|
||||
color: var(--color-foreground-subtle);
|
||||
background: linear-gradient(var(--color-neutral-100), transparent);
|
||||
border: 1px solid var(--color-neutral-200);
|
||||
border-radius: 100px;
|
||||
|
||||
& .icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
padding: 0 10px;
|
||||
color: var(--color-foreground);
|
||||
border-right: 1px solid var(--color-neutral-200);
|
||||
border-radius: 0 100px 100px 0;
|
||||
}
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
left: 50%;
|
||||
width: 70%;
|
||||
height: 1px;
|
||||
content: '';
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent,
|
||||
var(--color-neutral-400),
|
||||
transparent
|
||||
);
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
42
src/components/hero/hero.tsx
Normal file
42
src/components/hero/hero.tsx
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
import { useMemo } from 'react';
|
||||
import { BsSoundwave } from 'react-icons/bs/index';
|
||||
|
||||
import { Container } from '@/components/container';
|
||||
import { count as soundCount } from '@/lib/sounds';
|
||||
|
||||
import styles from './hero.module.css';
|
||||
|
||||
export function Hero() {
|
||||
const count = useMemo(soundCount, []);
|
||||
|
||||
return (
|
||||
<div className={styles.hero}>
|
||||
<Container className={styles.container}>
|
||||
{/* <div className={styles.pattern} /> */}
|
||||
|
||||
<img
|
||||
alt="Faded Moodist Logo"
|
||||
className={styles.logo}
|
||||
height={45}
|
||||
src="/logo.svg"
|
||||
width={45}
|
||||
/>
|
||||
|
||||
<div className={styles.title}>
|
||||
<div className={styles.left}></div>
|
||||
<h2>Moodist</h2>
|
||||
<div className={styles.right}></div>
|
||||
</div>
|
||||
|
||||
<h1 className={styles.desc}>Ambient sounds for focus and calm.</h1>
|
||||
|
||||
<p className={styles.sounds}>
|
||||
<span className={styles.icon}>
|
||||
<BsSoundwave />
|
||||
</span>
|
||||
<span>{count} Sounds</span>
|
||||
</p>
|
||||
</Container>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
1
src/components/hero/index.ts
Normal file
1
src/components/hero/index.ts
Normal file
|
|
@ -0,0 +1 @@
|
|||
export { Hero } from './hero';
|
||||
|
|
@ -1 +0,0 @@
|
|||
export { MediaControls } from './media-controls';
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
import { MediaSessionTrack } from './media-session-track';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useSSR } from '@/hooks/use-ssr';
|
||||
|
||||
export function MediaControls() {
|
||||
const [mediaControlsEnabled, setMediaControlsEnabled] = useState(false);
|
||||
const { isBrowser } = useSSR();
|
||||
|
||||
useEffect(() => {
|
||||
if (!isBrowser) return;
|
||||
|
||||
setMediaControlsEnabled('mediaSession' in navigator);
|
||||
}, [isBrowser]);
|
||||
|
||||
if (!mediaControlsEnabled) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return <MediaSessionTrack />;
|
||||
}
|
||||
|
|
@ -1,98 +0,0 @@
|
|||
import { useCallback, useEffect, useRef } from 'react';
|
||||
|
||||
import { BrowserDetect } from '@/helpers/browser-detect';
|
||||
|
||||
import { useSoundStore } from '@/stores/sound';
|
||||
|
||||
import { useSSR } from '@/hooks/use-ssr';
|
||||
import { useDarkTheme } from '@/hooks/use-dark-theme';
|
||||
|
||||
const metadata: MediaMetadataInit = {
|
||||
artist: 'Moodist',
|
||||
title: 'Ambient Sounds for Focus and Calm',
|
||||
};
|
||||
|
||||
export function MediaSessionTrack() {
|
||||
const { isBrowser } = useSSR();
|
||||
const isDarkTheme = useDarkTheme();
|
||||
const isPlaying = useSoundStore(state => state.isPlaying);
|
||||
const play = useSoundStore(state => state.play);
|
||||
const pause = useSoundStore(state => state.pause);
|
||||
const masterAudioSoundRef = useRef<HTMLAudioElement>(null);
|
||||
const artworkURL = isDarkTheme ? '/logo-dark.png' : '/logo-light.png';
|
||||
|
||||
useEffect(() => {
|
||||
if (!isBrowser || !isPlaying) return;
|
||||
|
||||
navigator.mediaSession.metadata = new MediaMetadata({
|
||||
...metadata,
|
||||
artwork: [
|
||||
{
|
||||
sizes: '200x200',
|
||||
src: artworkURL,
|
||||
type: 'image/png',
|
||||
},
|
||||
],
|
||||
});
|
||||
}, [artworkURL, isBrowser, isDarkTheme, isPlaying]);
|
||||
|
||||
const startMasterAudio = useCallback(async () => {
|
||||
if (!masterAudioSoundRef.current) return;
|
||||
if (!masterAudioSoundRef.current.paused) return;
|
||||
|
||||
try {
|
||||
await masterAudioSoundRef.current.play();
|
||||
|
||||
navigator.mediaSession.playbackState = 'playing';
|
||||
navigator.mediaSession.setActionHandler('play', play);
|
||||
navigator.mediaSession.setActionHandler('pause', pause);
|
||||
} catch {
|
||||
// Do nothing
|
||||
}
|
||||
}, [pause, play]);
|
||||
|
||||
const stopMasterAudio = useCallback(() => {
|
||||
if (!masterAudioSoundRef.current) return;
|
||||
/**
|
||||
* Otherwise in Safari we cannot play the audio again
|
||||
* through the media session controls
|
||||
*/
|
||||
if (BrowserDetect.isSafari()) {
|
||||
masterAudioSoundRef.current.load();
|
||||
} else {
|
||||
masterAudioSoundRef.current.pause();
|
||||
}
|
||||
navigator.mediaSession.playbackState = 'paused';
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!masterAudioSoundRef.current) return;
|
||||
|
||||
if (isPlaying) {
|
||||
startMasterAudio();
|
||||
} else {
|
||||
stopMasterAudio();
|
||||
}
|
||||
}, [isPlaying, startMasterAudio, stopMasterAudio]);
|
||||
|
||||
useEffect(() => {
|
||||
const masterAudioSound = masterAudioSoundRef.current;
|
||||
|
||||
return () => {
|
||||
masterAudioSound?.pause();
|
||||
|
||||
navigator.mediaSession.setActionHandler('play', null);
|
||||
navigator.mediaSession.setActionHandler('pause', null);
|
||||
navigator.mediaSession.playbackState = 'none';
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<audio
|
||||
id="media-session-track"
|
||||
loop
|
||||
ref={masterAudioSoundRef}
|
||||
src="/sounds/silence.wav"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
display: flex;
|
||||
column-gap: 8px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
min-height: 40px;
|
||||
|
|
@ -24,20 +24,12 @@
|
|||
opacity: 0.4;
|
||||
}
|
||||
|
||||
&:not(:disabled):hover,
|
||||
&:not(:disabled):focus-visible {
|
||||
&:not(:disabled):hover {
|
||||
color: var(--color-foreground);
|
||||
background-color: var(--color-neutral-200);
|
||||
border: 1px solid var(--color-neutral-300);
|
||||
}
|
||||
|
||||
& .label {
|
||||
display: flex;
|
||||
column-gap: 8px;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
& .icon {
|
||||
color: var(--color-foreground);
|
||||
}
|
||||
|
|
@ -48,8 +40,4 @@
|
|||
background: var(--color-neutral-950);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
& .shortcut {
|
||||
font-size: var(--font-2xsm);
|
||||
}
|
||||
}
|
||||
33
src/components/menu/item/item.tsx
Normal file
33
src/components/menu/item/item.tsx
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
import styles from './item.module.css';
|
||||
|
||||
interface ItemProps {
|
||||
active?: boolean;
|
||||
disabled?: boolean;
|
||||
href?: string;
|
||||
icon: React.ReactElement;
|
||||
label: string;
|
||||
onClick?: () => void;
|
||||
}
|
||||
|
||||
export function Item({
|
||||
active,
|
||||
disabled = false,
|
||||
href,
|
||||
icon,
|
||||
label,
|
||||
onClick = () => {},
|
||||
}: ItemProps) {
|
||||
const Comp = href ? 'a' : 'button';
|
||||
|
||||
return (
|
||||
<Comp
|
||||
className={styles.item}
|
||||
disabled={disabled}
|
||||
onClick={onClick}
|
||||
{...(href ? { href, target: '_blank' } : {})}
|
||||
>
|
||||
<span className={styles.icon}>{icon}</span> {label}
|
||||
{active && <div className={styles.active} />}
|
||||
</Comp>
|
||||
);
|
||||
}
|
||||
7
src/components/menu/items/index.ts
Normal file
7
src/components/menu/items/index.ts
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
export { Shuffle as ShuffleItem } from './shuffle';
|
||||
export { Share as ShareItem } from './share';
|
||||
export { Donate as DonateItem } from './donate';
|
||||
export { Notepad as NotepadItem } from './notepad';
|
||||
export { Source as SourceItem } from './source';
|
||||
export { Pomodoro as PomodoroItem } from './pomodoro';
|
||||
export { Presets as PresetsItem } from './presets';
|
||||
|
|
@ -2,7 +2,7 @@ import { MdNotes } from 'react-icons/md/index';
|
|||
|
||||
import { Item } from '../item';
|
||||
|
||||
import { useNoteStore } from '@/stores/note';
|
||||
import { useNoteStore } from '@/store';
|
||||
|
||||
interface NotepadProps {
|
||||
open: () => void;
|
||||
|
|
@ -16,7 +16,6 @@ export function Notepad({ open }: NotepadProps) {
|
|||
active={!!note.length}
|
||||
icon={<MdNotes />}
|
||||
label="Notepad"
|
||||
shortcut="Shift + N"
|
||||
onClick={open}
|
||||
/>
|
||||
);
|
||||
|
|
@ -2,7 +2,7 @@ import { MdOutlineAvTimer } from 'react-icons/md/index';
|
|||
|
||||
import { Item } from '../item';
|
||||
|
||||
import { usePomodoroStore } from '@/stores/pomodoro';
|
||||
import { usePomodoroStore } from '@/store';
|
||||
|
||||
interface PomodoroProps {
|
||||
open: () => void;
|
||||
|
|
@ -16,7 +16,6 @@ export function Pomodoro({ open }: PomodoroProps) {
|
|||
active={running}
|
||||
icon={<MdOutlineAvTimer />}
|
||||
label="Pomodoro"
|
||||
shortcut="Shift + P"
|
||||
onClick={open}
|
||||
/>
|
||||
);
|
||||
|
|
@ -7,12 +7,5 @@ interface PresetsProps {
|
|||
}
|
||||
|
||||
export function Presets({ open }: PresetsProps) {
|
||||
return (
|
||||
<Item
|
||||
icon={<RiPlayListFill />}
|
||||
label="Your Presets"
|
||||
shortcut="Shift + Alt + P"
|
||||
onClick={open}
|
||||
/>
|
||||
);
|
||||
return <Item icon={<RiPlayListFill />} label="Your Presets" onClick={open} />;
|
||||
}
|
||||
|
|
@ -2,7 +2,7 @@ import { IoShareSocialSharp } from 'react-icons/io5/index';
|
|||
|
||||
import { Item } from '../item';
|
||||
|
||||
import { useSoundStore } from '@/stores/sound';
|
||||
import { useSoundStore } from '@/store';
|
||||
|
||||
interface ShareProps {
|
||||
open: () => void;
|
||||
|
|
@ -16,7 +16,6 @@ export function Share({ open }: ShareProps) {
|
|||
disabled={noSelected}
|
||||
icon={<IoShareSocialSharp />}
|
||||
label="Share Sounds"
|
||||
shortcut="Shift + S"
|
||||
onClick={open}
|
||||
/>
|
||||
);
|
||||
11
src/components/menu/items/shuffle.tsx
Normal file
11
src/components/menu/items/shuffle.tsx
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
import { BiShuffle } from 'react-icons/bi/index';
|
||||
|
||||
import { useSoundStore } from '@/store';
|
||||
|
||||
import { Item } from '../item';
|
||||
|
||||
export function Shuffle() {
|
||||
const shuffle = useSoundStore(state => state.shuffle);
|
||||
|
||||
return <Item icon={<BiShuffle />} label="Shuffle Sounds" onClick={shuffle} />;
|
||||
}
|
||||
33
src/components/menu/menu.module.css
Normal file
33
src/components/menu/menu.module.css
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
.wrapper {
|
||||
& .menuButton {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
font-size: var(--font-md);
|
||||
color: var(--color-foreground);
|
||||
cursor: pointer;
|
||||
background-color: var(--color-neutral-100);
|
||||
border: 1px solid var(--color-neutral-300);
|
||||
border-radius: 50%;
|
||||
transition: 0.2s;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-neutral-200);
|
||||
}
|
||||
}
|
||||
|
||||
& .menu {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 4px;
|
||||
width: 240px;
|
||||
height: max-content;
|
||||
padding: 4px;
|
||||
overflow: auto;
|
||||
background-color: var(--color-neutral-100);
|
||||
border: 1px solid var(--color-neutral-300);
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
117
src/components/menu/menu.tsx
Normal file
117
src/components/menu/menu.tsx
Normal file
|
|
@ -0,0 +1,117 @@
|
|||
import { useState } from 'react';
|
||||
import { IoMenu, IoClose } from 'react-icons/io5/index';
|
||||
import {
|
||||
useFloating,
|
||||
autoUpdate,
|
||||
offset,
|
||||
flip,
|
||||
shift,
|
||||
size,
|
||||
useClick,
|
||||
useDismiss,
|
||||
useRole,
|
||||
useInteractions,
|
||||
FloatingFocusManager,
|
||||
} from '@floating-ui/react';
|
||||
|
||||
import {
|
||||
ShuffleItem,
|
||||
ShareItem,
|
||||
DonateItem,
|
||||
NotepadItem,
|
||||
SourceItem,
|
||||
PomodoroItem,
|
||||
PresetsItem,
|
||||
} from './items';
|
||||
import { Divider } from './divider';
|
||||
import { ShareLinkModal } from '@/components/modals/share-link';
|
||||
import { PresetsModal } from '@/components/modals/presets';
|
||||
import { Notepad, Pomodoro } from '@/components/toolbox';
|
||||
|
||||
import styles from './menu.module.css';
|
||||
|
||||
export function Menu() {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
|
||||
const [showPresets, setShowPresets] = useState(false);
|
||||
const [showShareLink, setShowShareLink] = useState(false);
|
||||
const [showNotepad, setShowNotepad] = useState(false);
|
||||
const [showPomodoro, setShowPomodoro] = useState(false);
|
||||
|
||||
const { context, floatingStyles, refs } = useFloating({
|
||||
middleware: [
|
||||
offset(12),
|
||||
flip(),
|
||||
shift(),
|
||||
size({
|
||||
apply({ availableHeight, elements }) {
|
||||
Object.assign(elements.floating.style, {
|
||||
maxHeight: `${availableHeight}px`,
|
||||
});
|
||||
},
|
||||
padding: 10,
|
||||
}),
|
||||
],
|
||||
onOpenChange: setIsOpen,
|
||||
open: isOpen,
|
||||
placement: 'top-end',
|
||||
whileElementsMounted: autoUpdate,
|
||||
});
|
||||
|
||||
const click = useClick(context);
|
||||
const dismiss = useDismiss(context);
|
||||
const role = useRole(context);
|
||||
|
||||
const { getFloatingProps, getReferenceProps } = useInteractions([
|
||||
click,
|
||||
dismiss,
|
||||
role,
|
||||
]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className={styles.wrapper}>
|
||||
<button
|
||||
aria-label="Menu"
|
||||
className={styles.menuButton}
|
||||
ref={refs.setReference}
|
||||
onClick={() => setIsOpen(prev => !prev)}
|
||||
{...getReferenceProps()}
|
||||
>
|
||||
{isOpen ? <IoClose /> : <IoMenu />}
|
||||
</button>
|
||||
|
||||
{isOpen && (
|
||||
<FloatingFocusManager context={context} modal={false}>
|
||||
<div
|
||||
ref={refs.setFloating}
|
||||
style={floatingStyles}
|
||||
{...getFloatingProps()}
|
||||
className={styles.menu}
|
||||
>
|
||||
<PresetsItem open={() => setShowPresets(true)} />
|
||||
<ShareItem open={() => setShowShareLink(true)} />
|
||||
<ShuffleItem />
|
||||
<Divider />
|
||||
<NotepadItem open={() => setShowNotepad(true)} />
|
||||
<PomodoroItem open={() => setShowPomodoro(true)} />
|
||||
<Divider />
|
||||
<DonateItem />
|
||||
<SourceItem />
|
||||
</div>
|
||||
</FloatingFocusManager>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<ShareLinkModal
|
||||
show={showShareLink}
|
||||
onClose={() => setShowShareLink(false)}
|
||||
/>
|
||||
|
||||
<PresetsModal show={showPresets} onClose={() => setShowPresets(false)} />
|
||||
|
||||
<Notepad show={showNotepad} onClose={() => setShowNotepad(false)} />
|
||||
<Pomodoro show={showPomodoro} onClose={() => setShowPomodoro(false)} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -50,13 +50,7 @@
|
|||
cursor: pointer;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
outline: none;
|
||||
|
||||
&:focus-visible {
|
||||
outline: 2px solid var(--color-neutral-400);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,26 +0,0 @@
|
|||
import type { Meta, StoryObj } from '@storybook/react';
|
||||
|
||||
import { Modal } from './modal';
|
||||
|
||||
const meta: Meta<typeof Modal> = {
|
||||
component: Modal,
|
||||
title: 'Modal',
|
||||
};
|
||||
|
||||
export default meta;
|
||||
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
children: 'Hello World',
|
||||
show: true,
|
||||
},
|
||||
};
|
||||
|
||||
export const Wide: Story = {
|
||||
args: {
|
||||
...Default.args,
|
||||
wide: true,
|
||||
},
|
||||
};
|
||||
|
|
@ -1,7 +1,6 @@
|
|||
import { useEffect } from 'react';
|
||||
import { AnimatePresence, motion } from 'motion/react';
|
||||
import { AnimatePresence, motion } from 'framer-motion';
|
||||
import { IoClose } from 'react-icons/io5/index';
|
||||
import FocusTrap from 'focus-trap-react';
|
||||
|
||||
import { Portal } from '@/components/portal';
|
||||
|
||||
|
|
@ -14,18 +13,14 @@ interface ModalProps {
|
|||
children: React.ReactNode;
|
||||
lockBody?: boolean;
|
||||
onClose: () => void;
|
||||
persist?: boolean;
|
||||
show: boolean;
|
||||
wide?: boolean;
|
||||
}
|
||||
|
||||
const TRANSITION_DURATION = 300;
|
||||
|
||||
export function Modal({
|
||||
children,
|
||||
lockBody = true,
|
||||
onClose,
|
||||
persist = false,
|
||||
show,
|
||||
wide,
|
||||
}: ModalProps) {
|
||||
|
|
@ -36,72 +31,44 @@ export function Modal({
|
|||
|
||||
useEffect(() => {
|
||||
if (show && lockBody) {
|
||||
document.body.style.overflowY = 'hidden';
|
||||
document.body.style.overflow = 'hidden';
|
||||
} else if (lockBody) {
|
||||
// Wait for transition to finish before allowing scrollbar to return
|
||||
setTimeout(() => {
|
||||
document.body.style.overflowY = 'auto';
|
||||
}, TRANSITION_DURATION);
|
||||
document.body.style.overflow = 'auto';
|
||||
}
|
||||
}, [show, lockBody]);
|
||||
|
||||
useEffect(() => {
|
||||
function keyListener(e: KeyboardEvent) {
|
||||
if (show && e.key === 'Escape') {
|
||||
onClose();
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('keydown', keyListener);
|
||||
|
||||
return () => document.removeEventListener('keydown', keyListener);
|
||||
}, [onClose, show]);
|
||||
|
||||
const animationProps = persist
|
||||
? {
|
||||
animate: show ? 'show' : 'hidden',
|
||||
}
|
||||
: {
|
||||
animate: 'show',
|
||||
exit: 'hidden',
|
||||
initial: 'hidden',
|
||||
};
|
||||
|
||||
const content = (
|
||||
<FocusTrap active={show}>
|
||||
<div>
|
||||
<motion.div
|
||||
{...animationProps}
|
||||
className={styles.overlay}
|
||||
transition={{ duration: TRANSITION_DURATION / 1000 }}
|
||||
variants={variants.overlay}
|
||||
onClick={onClose}
|
||||
onKeyDown={onClose}
|
||||
/>
|
||||
<div className={styles.modal}>
|
||||
<motion.div
|
||||
{...animationProps}
|
||||
className={cn(styles.content, wide && styles.wide)}
|
||||
transition={{ duration: TRANSITION_DURATION / 1000 }}
|
||||
variants={variants.modal}
|
||||
>
|
||||
<button className={styles.close} onClick={onClose}>
|
||||
<IoClose />
|
||||
</button>
|
||||
{children}
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</FocusTrap>
|
||||
);
|
||||
|
||||
return (
|
||||
<Portal>
|
||||
{persist ? (
|
||||
<div style={{ display: show ? 'block' : 'none' }}>{content}</div>
|
||||
) : (
|
||||
<AnimatePresence>{show && content}</AnimatePresence>
|
||||
)}
|
||||
<AnimatePresence>
|
||||
{show && (
|
||||
<>
|
||||
<motion.div
|
||||
animate="show"
|
||||
className={styles.overlay}
|
||||
exit="hidden"
|
||||
initial="hidden"
|
||||
variants={variants.overlay}
|
||||
onClick={onClose}
|
||||
onKeyDown={onClose}
|
||||
/>
|
||||
<div className={styles.modal}>
|
||||
<motion.div
|
||||
animate="show"
|
||||
className={cn(styles.content, wide && styles.wide)}
|
||||
exit="hidden"
|
||||
initial="hidden"
|
||||
variants={variants.modal}
|
||||
>
|
||||
<button className={styles.close} onClick={onClose}>
|
||||
<IoClose />
|
||||
</button>
|
||||
|
||||
{children}
|
||||
</motion.div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</Portal>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Reference in a new issue