Compare commits
2 Commits
5c13774e63
...
5ece8ca7eb
| Author | SHA1 | Date | |
|---|---|---|---|
| 5ece8ca7eb | |||
| 23c0f43526 |
3
.gitignore
vendored
3
.gitignore
vendored
@@ -23,3 +23,6 @@ dist-ssr
|
|||||||
*.njsproj
|
*.njsproj
|
||||||
*.sln
|
*.sln
|
||||||
*.sw?
|
*.sw?
|
||||||
|
|
||||||
|
# My
|
||||||
|
repomix-output.*
|
||||||
3
.vscode/settings.json
vendored
3
.vscode/settings.json
vendored
@@ -8,5 +8,6 @@
|
|||||||
"([\"'`][^\"'`]*.*?[\"'`])",
|
"([\"'`][^\"'`]*.*?[\"'`])",
|
||||||
"[\"'`]([^\"'`]*).*?[\"'`]"
|
"[\"'`]([^\"'`]*).*?[\"'`]"
|
||||||
]
|
]
|
||||||
]
|
],
|
||||||
|
"editor.formatOnSave": true
|
||||||
}
|
}
|
||||||
@@ -1,678 +0,0 @@
|
|||||||
This file is a merged representation of a subset of the codebase, containing files not matching ignore patterns, combined into a single document by Repomix.
|
|
||||||
|
|
||||||
<file_summary>
|
|
||||||
This section contains a summary of this file.
|
|
||||||
|
|
||||||
<purpose>
|
|
||||||
This file contains a packed representation of the entire repository's contents.
|
|
||||||
It is designed to be easily consumable by AI systems for analysis, code review,
|
|
||||||
or other automated processes.
|
|
||||||
</purpose>
|
|
||||||
|
|
||||||
<file_format>
|
|
||||||
The content is organized as follows:
|
|
||||||
1. This summary section
|
|
||||||
2. Repository information
|
|
||||||
3. Directory structure
|
|
||||||
4. Repository files, each consisting of:
|
|
||||||
- File path as an attribute
|
|
||||||
- Full contents of the file
|
|
||||||
</file_format>
|
|
||||||
|
|
||||||
<usage_guidelines>
|
|
||||||
- This file should be treated as read-only. Any changes should be made to the
|
|
||||||
original repository files, not this packed version.
|
|
||||||
- When processing this file, use the file path to distinguish
|
|
||||||
between different files in the repository.
|
|
||||||
- Be aware that this file may contain sensitive information. Handle it with
|
|
||||||
the same level of security as you would the original repository.
|
|
||||||
</usage_guidelines>
|
|
||||||
|
|
||||||
<notes>
|
|
||||||
- Some files may have been excluded based on .gitignore rules and Repomix's configuration
|
|
||||||
- Binary files are not included in this packed representation. Please refer to the Repository Structure section for a complete list of file paths, including binary files
|
|
||||||
- Files matching these patterns are excluded: bun.lock, node_modules/, .vscode/
|
|
||||||
- Files matching patterns in .gitignore are excluded
|
|
||||||
- Files matching default ignore patterns are excluded
|
|
||||||
- Files are sorted by Git change count (files with more changes are at the bottom)
|
|
||||||
</notes>
|
|
||||||
|
|
||||||
<additional_info>
|
|
||||||
|
|
||||||
</additional_info>
|
|
||||||
|
|
||||||
</file_summary>
|
|
||||||
|
|
||||||
<directory_structure>
|
|
||||||
public/
|
|
||||||
vite.svg
|
|
||||||
src/
|
|
||||||
assets/
|
|
||||||
preact.svg
|
|
||||||
components/
|
|
||||||
ui/
|
|
||||||
Button.module.scss
|
|
||||||
Button.tsx
|
|
||||||
Input.module.scss
|
|
||||||
Input.tsx
|
|
||||||
layout.tsx
|
|
||||||
menu.module.scss
|
|
||||||
menu.tsx
|
|
||||||
pages/
|
|
||||||
login.module.scss
|
|
||||||
login.tsx
|
|
||||||
profile.module.scss
|
|
||||||
profile.tsx
|
|
||||||
providers/
|
|
||||||
AuthProvider.tsx
|
|
||||||
utils/
|
|
||||||
class-merge.ts
|
|
||||||
app.module.scss
|
|
||||||
app.tsx
|
|
||||||
index.scss
|
|
||||||
main.tsx
|
|
||||||
vite-env.d.ts
|
|
||||||
.gitattributes
|
|
||||||
.gitignore
|
|
||||||
.prettierrc
|
|
||||||
eslint.config.mjs
|
|
||||||
index.html
|
|
||||||
package.json
|
|
||||||
postcss.config.mts
|
|
||||||
tsconfig.app.json
|
|
||||||
tsconfig.json
|
|
||||||
tsconfig.node.json
|
|
||||||
vite.config.ts
|
|
||||||
</directory_structure>
|
|
||||||
|
|
||||||
<files>
|
|
||||||
This section contains the contents of the repository's files.
|
|
||||||
|
|
||||||
<file path="src/providers/AuthProvider.tsx">
|
|
||||||
import { signal, Signal } from "@preact/signals";
|
|
||||||
import { createContext, JSX } from "preact";
|
|
||||||
import { useContext } from "preact/hooks";
|
|
||||||
|
|
||||||
interface AppContextValue {
|
|
||||||
isLoggedIn: Signal<boolean>;
|
|
||||||
}
|
|
||||||
|
|
||||||
const AppContext = createContext<AppContextValue>({
|
|
||||||
isLoggedIn: signal(false),
|
|
||||||
});
|
|
||||||
|
|
||||||
const AppProvider = ({ children }: { children: JSX.Element }) => {
|
|
||||||
const value: AppContextValue = {
|
|
||||||
isLoggedIn: signal(false),
|
|
||||||
};
|
|
||||||
|
|
||||||
return <AppContext.Provider value={value}>{children}</AppContext.Provider>;
|
|
||||||
};
|
|
||||||
|
|
||||||
const useAppContext = () => {
|
|
||||||
const context = useContext(AppContext);
|
|
||||||
if (!context) {
|
|
||||||
throw new Error("useAppContext must be used within AppProvider");
|
|
||||||
}
|
|
||||||
return context;
|
|
||||||
};
|
|
||||||
|
|
||||||
export { AppProvider, useAppContext };
|
|
||||||
</file>
|
|
||||||
|
|
||||||
<file path="public/vite.svg">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
|
||||||
</file>
|
|
||||||
|
|
||||||
<file path="src/assets/preact.svg">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="27.68" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 296"><path fill="#673AB8" d="m128 0l128 73.9v147.8l-128 73.9L0 221.7V73.9z"></path><path fill="#FFF" d="M34.865 220.478c17.016 21.78 71.095 5.185 122.15-34.704c51.055-39.888 80.24-88.345 63.224-110.126c-17.017-21.78-71.095-5.184-122.15 34.704c-51.055 39.89-80.24 88.346-63.224 110.126Zm7.27-5.68c-5.644-7.222-3.178-21.402 7.573-39.253c11.322-18.797 30.541-39.548 54.06-57.923c23.52-18.375 48.303-32.004 69.281-38.442c19.922-6.113 34.277-5.075 39.92 2.148c5.644 7.223 3.178 21.403-7.573 39.254c-11.322 18.797-30.541 39.547-54.06 57.923c-23.52 18.375-48.304 32.004-69.281 38.441c-19.922 6.114-34.277 5.076-39.92-2.147Z"></path><path fill="#FFF" d="M220.239 220.478c17.017-21.78-12.169-70.237-63.224-110.126C105.96 70.464 51.88 53.868 34.865 75.648c-17.017 21.78 12.169 70.238 63.224 110.126c51.055 39.889 105.133 56.485 122.15 34.704Zm-7.27-5.68c-5.643 7.224-19.998 8.262-39.92 2.148c-20.978-6.437-45.761-20.066-69.28-38.441c-23.52-18.376-42.74-39.126-54.06-57.923c-10.752-17.851-13.218-32.03-7.575-39.254c5.644-7.223 19.999-8.261 39.92-2.148c20.978 6.438 45.762 20.067 69.281 38.442c23.52 18.375 42.739 39.126 54.06 57.923c10.752 17.85 13.218 32.03 7.574 39.254Z"></path><path fill="#FFF" d="M127.552 167.667c10.827 0 19.603-8.777 19.603-19.604c0-10.826-8.776-19.603-19.603-19.603c-10.827 0-19.604 8.777-19.604 19.603c0 10.827 8.777 19.604 19.604 19.604Z"></path></svg>
|
|
||||||
</file>
|
|
||||||
|
|
||||||
<file path="src/components/layout.tsx">
|
|
||||||
import { useAppContext } from "@/providers/AuthProvider";
|
|
||||||
import { FunctionComponent } from "preact";
|
|
||||||
import { Route, Router, useLocation } from "preact-iso";
|
|
||||||
import { useEffect } from "preact/hooks";
|
|
||||||
import Menu from "./menu";
|
|
||||||
|
|
||||||
const Layout: FunctionComponent = () => {
|
|
||||||
const { isLoggedIn } = useAppContext();
|
|
||||||
const location = useLocation();
|
|
||||||
useEffect(() => {
|
|
||||||
console.log(isLoggedIn.value);
|
|
||||||
}, [isLoggedIn]);
|
|
||||||
return (
|
|
||||||
<div class="flex min-w-screen flex-row justify-between">
|
|
||||||
<div class="w-full overflow-x-auto">
|
|
||||||
<Router>
|
|
||||||
<Route
|
|
||||||
path="/"
|
|
||||||
component={() => {
|
|
||||||
// location.route("/settings");
|
|
||||||
return <h1>Home</h1>;
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<Route path="/settings" component={() => <h1>Test</h1>} />
|
|
||||||
<Route path="/tasks" component={() => <h1>Test2</h1>} />
|
|
||||||
<Route default component={() => <h1>404</h1>} />
|
|
||||||
</Router>
|
|
||||||
</div>
|
|
||||||
<Menu />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Layout;
|
|
||||||
</file>
|
|
||||||
|
|
||||||
<file path="src/pages/profile.module.scss">
|
|
||||||
@reference "../index.scss";
|
|
||||||
</file>
|
|
||||||
|
|
||||||
<file path="src/pages/profile.tsx">
|
|
||||||
import Layout from "@/components/layout";
|
|
||||||
import { FunctionComponent } from "preact";
|
|
||||||
|
|
||||||
const ProfilePage: FunctionComponent = () => {
|
|
||||||
return <Layout />;
|
|
||||||
};
|
|
||||||
|
|
||||||
export default ProfilePage;
|
|
||||||
</file>
|
|
||||||
|
|
||||||
<file path="src/utils/class-merge.ts">
|
|
||||||
import { ClassValue, clsx } from "clsx";
|
|
||||||
import { twMerge } from "tailwind-merge";
|
|
||||||
|
|
||||||
export function cn(...inputs: ClassValue[]) {
|
|
||||||
return twMerge(clsx(...inputs));
|
|
||||||
}
|
|
||||||
</file>
|
|
||||||
|
|
||||||
<file path="src/app.module.scss">
|
|
||||||
@reference "./index.scss";
|
|
||||||
|
|
||||||
.text {
|
|
||||||
@apply text-9xl text-red-500;
|
|
||||||
}
|
|
||||||
</file>
|
|
||||||
|
|
||||||
<file path="src/main.tsx">
|
|
||||||
import { render } from "preact";
|
|
||||||
import { App } from "./app.tsx";
|
|
||||||
import "./index.scss";
|
|
||||||
|
|
||||||
render(<App />, document.getElementById("app")!);
|
|
||||||
</file>
|
|
||||||
|
|
||||||
<file path="src/vite-env.d.ts">
|
|
||||||
/// <reference types="vite/client" />
|
|
||||||
</file>
|
|
||||||
|
|
||||||
<file path=".gitattributes">
|
|
||||||
* text=auto
|
|
||||||
bun.lock binary
|
|
||||||
</file>
|
|
||||||
|
|
||||||
<file path=".gitignore">
|
|
||||||
# Logs
|
|
||||||
logs
|
|
||||||
*.log
|
|
||||||
npm-debug.log*
|
|
||||||
yarn-debug.log*
|
|
||||||
yarn-error.log*
|
|
||||||
pnpm-debug.log*
|
|
||||||
lerna-debug.log*
|
|
||||||
|
|
||||||
node_modules
|
|
||||||
dist
|
|
||||||
dist-ssr
|
|
||||||
*.local
|
|
||||||
|
|
||||||
# Editor directories and files
|
|
||||||
.vscode/*
|
|
||||||
!.vscode/extensions.json
|
|
||||||
!.vscode/settings.json
|
|
||||||
.idea
|
|
||||||
.DS_Store
|
|
||||||
*.suo
|
|
||||||
*.ntvs*
|
|
||||||
*.njsproj
|
|
||||||
*.sln
|
|
||||||
*.sw?
|
|
||||||
</file>
|
|
||||||
|
|
||||||
<file path="eslint.config.mjs">
|
|
||||||
// @ts-check
|
|
||||||
|
|
||||||
import eslint from "@eslint/js";
|
|
||||||
import tseslint from "typescript-eslint";
|
|
||||||
|
|
||||||
export default tseslint.config({
|
|
||||||
extends: [eslint.configs.recommended, tseslint.configs.recommended],
|
|
||||||
ignores: ["*.d.ts"],
|
|
||||||
languageOptions: {
|
|
||||||
ecmaVersion: "latest",
|
|
||||||
sourceType: "module",
|
|
||||||
parserOptions: { ecmaFeatures: { jsx: true } },
|
|
||||||
},
|
|
||||||
settings: {
|
|
||||||
env: {
|
|
||||||
browser: true,
|
|
||||||
es6: true,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
</file>
|
|
||||||
|
|
||||||
<file path="postcss.config.mts">
|
|
||||||
export default {
|
|
||||||
plugins: {
|
|
||||||
"@tailwindcss/postcss": {},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</file>
|
|
||||||
|
|
||||||
<file path="tsconfig.app.json">
|
|
||||||
{
|
|
||||||
"compilerOptions": {
|
|
||||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
|
||||||
"target": "ES2020",
|
|
||||||
"useDefineForClassFields": true,
|
|
||||||
"module": "ESNext",
|
|
||||||
"lib": [
|
|
||||||
"ES2020",
|
|
||||||
"DOM",
|
|
||||||
"DOM.Iterable"
|
|
||||||
],
|
|
||||||
"skipLibCheck": true,
|
|
||||||
"paths": {
|
|
||||||
"react": [
|
|
||||||
"./node_modules/preact/compat/"
|
|
||||||
],
|
|
||||||
"react-dom": [
|
|
||||||
"./node_modules/preact/compat/"
|
|
||||||
],
|
|
||||||
"@/*": [
|
|
||||||
"./src/*"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
/* Bundler mode */
|
|
||||||
"moduleResolution": "bundler",
|
|
||||||
"allowImportingTsExtensions": true,
|
|
||||||
"isolatedModules": true,
|
|
||||||
"moduleDetection": "force",
|
|
||||||
"noEmit": true,
|
|
||||||
"jsx": "react-jsx",
|
|
||||||
"jsxImportSource": "preact",
|
|
||||||
/* Linting */
|
|
||||||
"strict": true,
|
|
||||||
"noUnusedLocals": true,
|
|
||||||
"noUnusedParameters": true,
|
|
||||||
"noFallthroughCasesInSwitch": true,
|
|
||||||
"noUncheckedSideEffectImports": true
|
|
||||||
},
|
|
||||||
"include": [
|
|
||||||
"src"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
</file>
|
|
||||||
|
|
||||||
<file path="tsconfig.json">
|
|
||||||
{
|
|
||||||
"files": [],
|
|
||||||
"references": [
|
|
||||||
{ "path": "./tsconfig.app.json" },
|
|
||||||
{ "path": "./tsconfig.node.json" }
|
|
||||||
]
|
|
||||||
}
|
|
||||||
</file>
|
|
||||||
|
|
||||||
<file path="tsconfig.node.json">
|
|
||||||
{
|
|
||||||
"compilerOptions": {
|
|
||||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
|
|
||||||
"target": "ES2022",
|
|
||||||
"lib": ["ES2023"],
|
|
||||||
"module": "ESNext",
|
|
||||||
"skipLibCheck": true,
|
|
||||||
|
|
||||||
/* Bundler mode */
|
|
||||||
"moduleResolution": "bundler",
|
|
||||||
"allowImportingTsExtensions": true,
|
|
||||||
"isolatedModules": true,
|
|
||||||
"moduleDetection": "force",
|
|
||||||
"noEmit": true,
|
|
||||||
|
|
||||||
/* Linting */
|
|
||||||
"strict": true,
|
|
||||||
"noUnusedLocals": true,
|
|
||||||
"noUnusedParameters": true,
|
|
||||||
"noFallthroughCasesInSwitch": true,
|
|
||||||
"noUncheckedSideEffectImports": true
|
|
||||||
},
|
|
||||||
"include": ["vite.config.ts"]
|
|
||||||
}
|
|
||||||
</file>
|
|
||||||
|
|
||||||
<file path="vite.config.ts">
|
|
||||||
import preact from '@preact/preset-vite';
|
|
||||||
import tailwindcss from '@tailwindcss/vite';
|
|
||||||
import { defineConfig } from 'vite';
|
|
||||||
import tsConfigPaths from 'vite-tsconfig-paths';
|
|
||||||
|
|
||||||
// https://vite.dev/config/
|
|
||||||
export default defineConfig({
|
|
||||||
plugins: [preact(), tailwindcss(), tsConfigPaths()],
|
|
||||||
});
|
|
||||||
</file>
|
|
||||||
|
|
||||||
<file path="src/components/ui/Button.module.scss">
|
|
||||||
@reference '../../index.scss';
|
|
||||||
|
|
||||||
.button {
|
|
||||||
@apply rounded-2xl border-2 py-3 font-semibold text-white transition-colors hover:cursor-pointer;
|
|
||||||
}
|
|
||||||
</file>
|
|
||||||
|
|
||||||
<file path="src/components/ui/Button.tsx">
|
|
||||||
import { FunctionComponent } from "preact";
|
|
||||||
import { tv } from "tailwind-variants";
|
|
||||||
import classes from "./Button.module.scss";
|
|
||||||
const button = tv({
|
|
||||||
base: classes.button,
|
|
||||||
variants: {
|
|
||||||
color: {
|
|
||||||
primary: "bg-blue-400 hover:bg-blue-500",
|
|
||||||
secondary: "bg-red-400 hover:bg-red-500",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const Button: FunctionComponent<{ onClick: () => void }> = (props) => {
|
|
||||||
return (
|
|
||||||
<button type="button" class={button({ color: "primary" })} onClick={props.onClick}>
|
|
||||||
{props.children}
|
|
||||||
</button>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Button;
|
|
||||||
</file>
|
|
||||||
|
|
||||||
<file path="src/components/ui/Input.tsx">
|
|
||||||
import { FunctionComponent } from "preact";
|
|
||||||
import { tv } from "tailwind-variants";
|
|
||||||
import classes from "./Input.module.scss";
|
|
||||||
|
|
||||||
const input = tv({
|
|
||||||
base: classes.input_field,
|
|
||||||
variants: {
|
|
||||||
"text-align": {
|
|
||||||
center: "text-center",
|
|
||||||
left: "text-left",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
defaultVariants: {
|
|
||||||
"text-align": "left",
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
interface InputProps {
|
|
||||||
isPassword?: boolean;
|
|
||||||
placeholder?: string;
|
|
||||||
textAlign?: "center" | "left";
|
|
||||||
}
|
|
||||||
|
|
||||||
const Input: FunctionComponent<InputProps> = ({ isPassword = false, placeholder = "", textAlign }: InputProps) => {
|
|
||||||
return (
|
|
||||||
<input
|
|
||||||
type={isPassword ? "password" : "text"}
|
|
||||||
class={input({ "text-align": textAlign })}
|
|
||||||
placeholder={placeholder}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Input;
|
|
||||||
</file>
|
|
||||||
|
|
||||||
<file path="src/components/menu.module.scss">
|
|
||||||
@reference "../index.scss";
|
|
||||||
|
|
||||||
.menu_container {
|
|
||||||
@apply flex min-h-8 min-w-screen flex-col items-center gap-4 border-l border-l-gray-500 px-5 pt-5 md:min-h-screen md:min-w-[300px];
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu_item {
|
|
||||||
@apply w-full cursor-pointer rounded-md px-6 py-2 text-center hover:bg-gray-200;
|
|
||||||
}
|
|
||||||
</file>
|
|
||||||
|
|
||||||
<file path="src/components/menu.tsx">
|
|
||||||
import { FunctionComponent } from "preact";
|
|
||||||
import { useLocation } from "preact-iso";
|
|
||||||
import { tv } from "tailwind-variants";
|
|
||||||
import classes from "./menu.module.scss";
|
|
||||||
|
|
||||||
interface MenuItemProps {
|
|
||||||
title: string;
|
|
||||||
link: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
const MenuItem: FunctionComponent<MenuItemProps> = ({ title, link }: MenuItemProps) => {
|
|
||||||
const location = useLocation();
|
|
||||||
const active = location.path === link;
|
|
||||||
const menuItemClasses = tv({
|
|
||||||
base: classes.menu_item,
|
|
||||||
variants: {
|
|
||||||
activity: {
|
|
||||||
active: "bg-gray-200",
|
|
||||||
inactive: "bg-gray-100",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
defaultVariants: {
|
|
||||||
activity: "inactive",
|
|
||||||
},
|
|
||||||
});
|
|
||||||
return (
|
|
||||||
<div class={menuItemClasses({ activity: active ? "active" : "inactive" })} onClick={() => location.route(link)}>
|
|
||||||
{title}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
interface MenuItems {
|
|
||||||
title: string;
|
|
||||||
link: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
const Menu: FunctionComponent = () => {
|
|
||||||
const menu_items: MenuItems[] = [
|
|
||||||
{
|
|
||||||
title: "Профиль",
|
|
||||||
link: "/profile",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Задачи",
|
|
||||||
link: "/tasks",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Календарь",
|
|
||||||
link: "/calendar",
|
|
||||||
},
|
|
||||||
];
|
|
||||||
return (
|
|
||||||
<div class={classes.menu_container}>
|
|
||||||
{menu_items.map(({ title, link }) => (
|
|
||||||
<MenuItem title={title} link={link} />
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Menu;
|
|
||||||
</file>
|
|
||||||
|
|
||||||
<file path="src/pages/login.module.scss">
|
|
||||||
@reference "../index.scss";
|
|
||||||
|
|
||||||
.login_container {
|
|
||||||
@apply flex min-h-screen flex-col items-center justify-center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.login_card {
|
|
||||||
@apply flex w-[95%] min-w-[300px] flex-col justify-center gap-2 rounded-md border-gray-400 p-5 shadow-md md:w-[350px];
|
|
||||||
}
|
|
||||||
</file>
|
|
||||||
|
|
||||||
<file path="src/pages/login.tsx">
|
|
||||||
import Button from "@/components/ui/Button";
|
|
||||||
import Input from "@/components/ui/Input";
|
|
||||||
import { useAppContext } from "@/providers/AuthProvider";
|
|
||||||
import { FunctionComponent } from "preact";
|
|
||||||
import { useLocation } from "preact-iso";
|
|
||||||
import classes from "./login.module.scss";
|
|
||||||
const LoginPage: FunctionComponent = () => {
|
|
||||||
const { isLoggedIn } = useAppContext();
|
|
||||||
const location = useLocation();
|
|
||||||
return (
|
|
||||||
<div class={classes.login_container}>
|
|
||||||
<div class={classes.login_card}>
|
|
||||||
<Input placeholder="Login" textAlign="center" />
|
|
||||||
<Input isPassword placeholder="Password" textAlign="center" />
|
|
||||||
<Button
|
|
||||||
onClick={() => {
|
|
||||||
isLoggedIn.value = true;
|
|
||||||
location.route("/profile/settings");
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Login
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default LoginPage;
|
|
||||||
</file>
|
|
||||||
|
|
||||||
<file path="src/index.scss">
|
|
||||||
@import "tailwindcss";
|
|
||||||
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
|
|
||||||
:root {
|
|
||||||
font-family: "Montserrat", sans-serif;
|
|
||||||
}
|
|
||||||
</file>
|
|
||||||
|
|
||||||
<file path="index.html">
|
|
||||||
<!doctype html>
|
|
||||||
<html lang="ru">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
|
||||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
||||||
<title>Антихвост</title>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div id="app"></div>
|
|
||||||
<script type="module" src="/src/main.tsx"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
</file>
|
|
||||||
|
|
||||||
<file path="src/components/ui/Input.module.scss">
|
|
||||||
@reference "../../index.scss";
|
|
||||||
|
|
||||||
.input_field {
|
|
||||||
@apply rounded-md border border-gray-300 p-2 placeholder:transition focus:outline-0 focus:placeholder:opacity-25;
|
|
||||||
}
|
|
||||||
</file>
|
|
||||||
|
|
||||||
<file path="src/app.tsx">
|
|
||||||
import { FunctionComponent } from "preact";
|
|
||||||
import { ErrorBoundary, lazy, LocationProvider, Route, Router, useLocation } from "preact-iso";
|
|
||||||
import "preact/debug";
|
|
||||||
import LoginPage from "./pages/login";
|
|
||||||
import { AppProvider } from "./providers/AuthProvider";
|
|
||||||
|
|
||||||
const HomePage: FunctionComponent = () => {
|
|
||||||
const location = useLocation();
|
|
||||||
location.route("/login");
|
|
||||||
return <div>Redirecting to login...</div>;
|
|
||||||
};
|
|
||||||
|
|
||||||
export function App() {
|
|
||||||
return (
|
|
||||||
<AppProvider>
|
|
||||||
<LocationProvider>
|
|
||||||
<ErrorBoundary>
|
|
||||||
<Router>
|
|
||||||
<Route path="/" component={HomePage} />
|
|
||||||
<Route path="/login" component={LoginPage} />
|
|
||||||
<Route path="/profile/*" component={lazy(() => import("./pages/profile"))} />
|
|
||||||
</Router>
|
|
||||||
</ErrorBoundary>
|
|
||||||
</LocationProvider>
|
|
||||||
</AppProvider>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
</file>
|
|
||||||
|
|
||||||
<file path=".prettierrc">
|
|
||||||
{
|
|
||||||
"tabWidth": 2,
|
|
||||||
"printWidth": 120,
|
|
||||||
"arrowParens": "always",
|
|
||||||
"singleQuote": false,
|
|
||||||
"trailingComma": "es5",
|
|
||||||
"useTabs": false,
|
|
||||||
"semi": true,
|
|
||||||
"bracketSpacing": true,
|
|
||||||
"plugins": ["prettier-plugin-tailwindcss"],
|
|
||||||
"tailwindFunctions": ["tv"]
|
|
||||||
}
|
|
||||||
</file>
|
|
||||||
|
|
||||||
<file path="package.json">
|
|
||||||
{
|
|
||||||
"name": "anti-hvost",
|
|
||||||
"private": true,
|
|
||||||
"version": "0.0.0",
|
|
||||||
"type": "module",
|
|
||||||
"scripts": {
|
|
||||||
"dev": "vite",
|
|
||||||
"build": "tsc -b && vite build",
|
|
||||||
"preview": "vite preview"
|
|
||||||
},
|
|
||||||
"dependencies": {
|
|
||||||
"@preact/signals": "^2.0.2",
|
|
||||||
"@tailwindcss/postcss": "^4.0.17",
|
|
||||||
"@tailwindcss/vite": "^4.0.17",
|
|
||||||
"clsx": "^2.1.1",
|
|
||||||
"postcss": "^8.5.3",
|
|
||||||
"preact": "^10.26.2",
|
|
||||||
"preact-iso": "^2.9.1",
|
|
||||||
"tailwind-merge": "^3.0.2",
|
|
||||||
"tailwind-variants": "^1.0.0",
|
|
||||||
"tailwindcss": "^4.0.17"
|
|
||||||
},
|
|
||||||
"devDependencies": {
|
|
||||||
"@eslint/js": "^9.23.0",
|
|
||||||
"@preact/preset-vite": "^2.10.1",
|
|
||||||
"@typescript-eslint/parser": "^8.28.0",
|
|
||||||
"eslint": "^9.23.0",
|
|
||||||
"eslint-config-prettier": "^10.1.1",
|
|
||||||
"prettier": "^3.5.3",
|
|
||||||
"prettier-eslint": "^16.3.0",
|
|
||||||
"prettier-plugin-tailwindcss": "^0.6.11",
|
|
||||||
"sass-embedded": "^1.86.0",
|
|
||||||
"typescript": "~5.7.2",
|
|
||||||
"typescript-eslint": "^8.28.0",
|
|
||||||
"vite": "^6.2.0",
|
|
||||||
"vite-tsconfig-paths": "^5.1.4"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</file>
|
|
||||||
|
|
||||||
</files>
|
|
||||||
@@ -19,9 +19,10 @@ import {
|
|||||||
MagnifyingGlassIcon,
|
MagnifyingGlassIcon,
|
||||||
PencilIcon,
|
PencilIcon,
|
||||||
TrashIcon,
|
TrashIcon,
|
||||||
|
XMarkIcon,
|
||||||
} from "@heroicons/react/24/outline";
|
} from "@heroicons/react/24/outline";
|
||||||
import { FunctionComponent } from "preact";
|
import { FunctionComponent } from "preact";
|
||||||
import { useEffect, useMemo, useState } from "preact/hooks";
|
import { useEffect, useMemo, useRef, useState } from "preact/hooks";
|
||||||
import { Nullable } from "primereact/ts-helpers";
|
import { Nullable } from "primereact/ts-helpers";
|
||||||
import { SubmitHandler, useForm } from "react-hook-form";
|
import { SubmitHandler, useForm } from "react-hook-form";
|
||||||
import { v4 as uuid } from "uuid";
|
import { v4 as uuid } from "uuid";
|
||||||
@@ -37,6 +38,8 @@ const ProfileTasks: FunctionComponent = () => {
|
|||||||
const [openModal, setIsOpen] = useState(false); // Открыта модалка
|
const [openModal, setIsOpen] = useState(false); // Открыта модалка
|
||||||
const [openModalCalendar, setOpenModalCalendar] = useState(false); // Открыта модалка календаря
|
const [openModalCalendar, setOpenModalCalendar] = useState(false); // Открыта модалка календаря
|
||||||
const [openModalTags, setOpenModalTags] = useState(false); // Открыта модалка тегов
|
const [openModalTags, setOpenModalTags] = useState(false); // Открыта модалка тегов
|
||||||
|
const [openSearchModal, setOpenSearchModal] = useState(false); // Открыто окно поиска
|
||||||
|
const [openFilterModal, setOpenFilterModal] = useState(false);
|
||||||
const [isEdit, setIsEdit] = useState(false); // Открыта задача
|
const [isEdit, setIsEdit] = useState(false); // Открыта задача
|
||||||
const [isEditModal, setIsEditModal] = useState(false); // Включено редактирование задачи
|
const [isEditModal, setIsEditModal] = useState(false); // Включено редактирование задачи
|
||||||
const [isCreating, setIsCreating] = useState(false); // Включено создание задачи
|
const [isCreating, setIsCreating] = useState(false); // Включено создание задачи
|
||||||
@@ -44,6 +47,10 @@ const ProfileTasks: FunctionComponent = () => {
|
|||||||
const [calendarDate, setCalendarDate] = useState<Nullable<Date>>(); // Выбранная в календаре дата
|
const [calendarDate, setCalendarDate] = useState<Nullable<Date>>(); // Выбранная в календаре дата
|
||||||
const [tags, setTags] = useState<ITags>({ first: "", second: "" });
|
const [tags, setTags] = useState<ITags>({ first: "", second: "" });
|
||||||
const [showDeleteDialog, setShowDeleteDialog] = useState(false);
|
const [showDeleteDialog, setShowDeleteDialog] = useState(false);
|
||||||
|
const [searchQuery, setSearchQuery] = useState(""); // Текст поиска
|
||||||
|
const [filterTags, setFilterTags] = useState<ITags>({ first: "", second: "" });
|
||||||
|
const [openFirstList, setOpenFirstList] = useState(false);
|
||||||
|
const [openSecondList, setOpenSecondList] = useState(false);
|
||||||
const getDate = useMemo(() => {
|
const getDate = useMemo(() => {
|
||||||
const date = new Date();
|
const date = new Date();
|
||||||
const formatter = new Intl.DateTimeFormat("ru-RU", { month: "long", day: "numeric" });
|
const formatter = new Intl.DateTimeFormat("ru-RU", { month: "long", day: "numeric" });
|
||||||
@@ -172,6 +179,35 @@ const ProfileTasks: FunctionComponent = () => {
|
|||||||
setShowDeleteDialog(false);
|
setShowDeleteDialog(false);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const filteredTasks = useMemo(() => {
|
||||||
|
let filtered = tasks;
|
||||||
|
|
||||||
|
// Фильтрация по поиску
|
||||||
|
if (searchQuery) {
|
||||||
|
filtered = filtered.filter(
|
||||||
|
(task) =>
|
||||||
|
task.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||||
|
task.description?.toLowerCase().includes(searchQuery.toLowerCase())
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Фильтрация по тегам
|
||||||
|
if (filterTags.first || filterTags.second) {
|
||||||
|
filtered = filtered.filter(
|
||||||
|
(task) =>
|
||||||
|
(!filterTags.first || task.tags[0] === filterTags.first) &&
|
||||||
|
(!filterTags.second || task.tags[1] === filterTags.second)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return filtered;
|
||||||
|
}, [tasks, searchQuery, filterTags]);
|
||||||
|
|
||||||
|
const searchInputRef = useRef<HTMLInputElement>(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (searchInputRef.current && openSearchModal) searchInputRef.current.focus();
|
||||||
|
}, [searchInputRef, openSearchModal]);
|
||||||
return (
|
return (
|
||||||
<div class={classes.container}>
|
<div class={classes.container}>
|
||||||
<ModalTags
|
<ModalTags
|
||||||
@@ -389,7 +425,8 @@ const ProfileTasks: FunctionComponent = () => {
|
|||||||
confirmText="Удалить"
|
confirmText="Удалить"
|
||||||
cancelText="Отмена"
|
cancelText="Отмена"
|
||||||
/>
|
/>
|
||||||
{tasks.length > 0 ? (
|
{!searchQuery && !filterTags.first && !filterTags.second ? (
|
||||||
|
filteredTasks.length > 0 ? (
|
||||||
<>
|
<>
|
||||||
<div class={classes.header}>Сегодня: {getDate}</div>
|
<div class={classes.header}>Сегодня: {getDate}</div>
|
||||||
<div class={classes.tasks_container}>
|
<div class={classes.tasks_container}>
|
||||||
@@ -458,6 +495,39 @@ const ProfileTasks: FunctionComponent = () => {
|
|||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<div class="flex w-full flex-1 flex-col items-center justify-center text-2xl">Начни уже сегодня!</div>
|
||||||
|
)
|
||||||
|
) : (
|
||||||
|
<div class={classes.tasks_container}>
|
||||||
|
<div class="mb-8 w-full text-3xl font-semibold md:text-5xl">
|
||||||
|
{searchQuery ? "Результаты поиска" : "Результаты фильтрации"}
|
||||||
|
</div>
|
||||||
|
{filteredTasks.length > 0 ? (
|
||||||
|
filteredTasks.map((task) => (
|
||||||
|
<Task
|
||||||
|
name={task.name}
|
||||||
|
key={task.id}
|
||||||
|
checked={task.checked}
|
||||||
|
onClick={() => {
|
||||||
|
setIsOpen(true);
|
||||||
|
setIsEdit(true);
|
||||||
|
setEditContent(task);
|
||||||
|
setCalendarDate(task.date);
|
||||||
|
}}
|
||||||
|
onMarkClick={() => {
|
||||||
|
setTasks(tasks.map((t) => (t.id === task.id ? { ...t, checked: !t.checked } : t)));
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
) : (
|
||||||
|
<div class="w-full text-center text-xl">
|
||||||
|
{searchQuery ? "Ничего не найдено" : "Нет задач с выбранными фильтрами"}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
<div class="group fixed right-1 bottom-16 flex flex-row items-center justify-start space-x-3 overflow-x-hidden py-2 md:right-[22rem] md:bottom-4">
|
<div class="group fixed right-1 bottom-16 flex flex-row items-center justify-start space-x-3 overflow-x-hidden py-2 md:right-[22rem] md:bottom-4">
|
||||||
<div
|
<div
|
||||||
class="flex aspect-square h-20 cursor-pointer items-center justify-center rounded-full bg-[rgb(251,194,199,0.53)] text-9xl text-white shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] transition-all duration-300 ease-out group-hover:ml-[12rem] hover:bg-[rgb(251,194,199,0.7)]"
|
class="flex aspect-square h-20 cursor-pointer items-center justify-center rounded-full bg-[rgb(251,194,199,0.53)] text-9xl text-white shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] transition-all duration-300 ease-out group-hover:ml-[12rem] hover:bg-[rgb(251,194,199,0.7)]"
|
||||||
@@ -469,30 +539,150 @@ const ProfileTasks: FunctionComponent = () => {
|
|||||||
<PlusIcon />
|
<PlusIcon />
|
||||||
</div>
|
</div>
|
||||||
<div class="absolute left-0 my-auto hidden flex-row space-x-3 opacity-0 transition-opacity duration-100 group-hover:opacity-100 md:flex">
|
<div class="absolute left-0 my-auto hidden flex-row space-x-3 opacity-0 transition-opacity duration-100 group-hover:opacity-100 md:flex">
|
||||||
<div class="pointer-events-none flex aspect-square h-20 cursor-pointer flex-col items-center justify-center rounded-full bg-[rgba(206,232,251,0.7)] text-xl text-gray-600 shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] group-hover:pointer-events-auto hover:bg-[rgba(206,232,251,0.9)]">
|
<div
|
||||||
|
class="pointer-events-none flex aspect-square h-20 cursor-pointer flex-col items-center justify-center rounded-full bg-[rgba(206,232,251,0.7)] text-xl text-gray-600 shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] group-hover:pointer-events-auto hover:bg-[rgba(206,232,251,0.9)]"
|
||||||
|
onClick={(e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
if (!openSearchModal) setOpenFilterModal(false);
|
||||||
|
setOpenSearchModal(!openSearchModal);
|
||||||
|
}}
|
||||||
|
>
|
||||||
<MagnifyingGlassIcon class="size-12" />
|
<MagnifyingGlassIcon class="size-12" />
|
||||||
</div>
|
</div>
|
||||||
<div class="pointer-events-none flex aspect-square h-20 cursor-pointer flex-col items-center justify-center rounded-full bg-[rgba(206,232,251,0.7)] text-xl text-gray-600 shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] group-hover:pointer-events-auto hover:bg-[rgba(206,232,251,0.9)]">
|
<div class="pointer-events-none flex aspect-square h-20 cursor-pointer flex-col items-center justify-center rounded-full bg-[rgba(206,232,251,0.7)] text-xl text-gray-600 shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] group-hover:pointer-events-auto hover:bg-[rgba(206,232,251,0.9)]">
|
||||||
<FunnelIcon class="size-12" />
|
<FunnelIcon
|
||||||
|
class="size-12"
|
||||||
|
onClick={(e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
if (!openFilterModal) setOpenSearchModal(false);
|
||||||
|
setOpenFilterModal(!openFilterModal);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</>
|
{openSearchModal && (
|
||||||
) : (
|
<div class="absolute right-24 bottom-28 z-50 w-80 rounded-lg bg-white p-4 shadow-lg md:right-[24rem] md:bottom-28">
|
||||||
<>
|
{/* Пофиксить разфокус при вводе */}
|
||||||
<div class="flex w-full flex-1 flex-col items-center justify-center text-2xl">Начни уже сегодня!</div>
|
<div class="flex items-center gap-2">
|
||||||
<div class="group fixed right-1 bottom-16 flex flex-row items-center justify-start space-x-3 overflow-x-hidden py-2 md:right-[22rem] md:bottom-4">
|
<MagnifyingGlassIcon class="size-6 text-gray-400" />
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
class="w-full rounded-lg border-0 px-4 py-2 outline-none"
|
||||||
|
placeholder="Поиск"
|
||||||
|
ref={searchInputRef}
|
||||||
|
value={searchQuery}
|
||||||
|
onInput={(e) => {
|
||||||
|
setSearchQuery((e.target as HTMLInputElement).value);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
{searchQuery && (
|
||||||
|
<XMarkIcon
|
||||||
|
class="size-5 cursor-pointer text-gray-400 hover:text-gray-600"
|
||||||
|
onClick={() => setSearchQuery("")}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{openFilterModal && (
|
||||||
|
<div class="absolute right-24 bottom-28 z-50 w-80 rounded-lg bg-white p-4 shadow-lg md:right-[24rem] md:bottom-28">
|
||||||
|
<div class="flex flex-col gap-4">
|
||||||
|
<div class="text-lg font-semibold">Фильтры</div>
|
||||||
|
<div class="flex flex-col gap-2">
|
||||||
|
<div class="relative">
|
||||||
<div
|
<div
|
||||||
class="flex aspect-square h-20 cursor-pointer items-center justify-center rounded-full bg-[rgb(251,194,199,0.53)] text-9xl text-white shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] transition-all duration-300 ease-out hover:bg-[rgb(251,194,199,0.7)]"
|
class={cn("flex cursor-pointer items-center gap-2 rounded-lg bg-[rgba(206,232,251,0.7)] px-4 py-2", {
|
||||||
|
"bg-[rgba(206,232,251,0.9)]": filterTags.first,
|
||||||
|
})}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
setIsCreating(true);
|
setOpenFirstList(!openFirstList);
|
||||||
setIsOpen(true);
|
setOpenSecondList(false);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<PlusIcon />
|
<BookOpenIcon class="size-5" />
|
||||||
|
<span>{filterTags.first || "Предмет"}</span>
|
||||||
|
</div>
|
||||||
|
{openFirstList && (
|
||||||
|
<div class="absolute top-0 right-full z-50 mr-2 w-64 rounded-lg bg-white p-2 shadow-lg">
|
||||||
|
{example_tags.first.map((tag) => (
|
||||||
|
<div
|
||||||
|
key={tag}
|
||||||
|
class="group flex cursor-pointer items-center gap-2 rounded-lg px-4 py-2 hover:bg-[rgba(206,232,251,0.3)]"
|
||||||
|
onClick={() => {
|
||||||
|
setFilterTags({ ...filterTags, first: tag });
|
||||||
|
setOpenFirstList(false);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class={cn("flex h-5 w-5 items-center justify-center rounded-full border-2", {
|
||||||
|
"border-[#FBC2C7] bg-[#FBC2C7]": filterTags.first === tag,
|
||||||
|
"border-[#D4D4D4]": filterTags.first !== tag,
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
{filterTags.first === tag && <div class="h-2.5 w-2.5 rounded-full bg-white" />}
|
||||||
|
</div>
|
||||||
|
<span class="text-sm font-medium text-[#404040]">{tag}</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="relative">
|
||||||
|
<div
|
||||||
|
class={cn("flex cursor-pointer items-center gap-2 rounded-lg bg-[rgba(206,232,251,0.7)] px-4 py-2", {
|
||||||
|
"bg-[rgba(206,232,251,0.9)]": filterTags.second,
|
||||||
|
})}
|
||||||
|
onClick={() => {
|
||||||
|
setOpenSecondList(!openSecondList);
|
||||||
|
setOpenFirstList(false);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<DocumentDuplicateIcon class="size-5" />
|
||||||
|
<span>{filterTags.second || "Задача"}</span>
|
||||||
|
</div>
|
||||||
|
{openSecondList && (
|
||||||
|
<div class="absolute top-0 right-full z-50 mr-2 w-64 rounded-lg bg-white p-2 shadow-lg">
|
||||||
|
{example_tags.second.map((tag) => (
|
||||||
|
<div
|
||||||
|
key={tag}
|
||||||
|
class="group flex cursor-pointer items-center gap-2 rounded-lg px-4 py-2 hover:bg-[rgba(206,232,251,0.3)]"
|
||||||
|
onClick={() => {
|
||||||
|
setFilterTags({ ...filterTags, second: tag });
|
||||||
|
setOpenSecondList(false);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class={cn("flex h-5 w-5 items-center justify-center rounded-full border-2", {
|
||||||
|
"border-[#FBC2C7] bg-[#FBC2C7]": filterTags.second === tag,
|
||||||
|
"border-[#D4D4D4]": filterTags.second !== tag,
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
{filterTags.second === tag && <div class="h-2.5 w-2.5 rounded-full bg-white" />}
|
||||||
|
</div>
|
||||||
|
<span class="text-sm font-medium text-[#404040]">{tag}</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{(filterTags.first || filterTags.second) && (
|
||||||
|
<button
|
||||||
|
class="mt-2 w-full rounded-lg bg-red-100 px-4 py-2 text-red-600 hover:bg-red-200"
|
||||||
|
onClick={() => {
|
||||||
|
setFilterTags({ first: "", second: "" });
|
||||||
|
setOpenFirstList(false);
|
||||||
|
setOpenSecondList(false);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Сбросить фильтры
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</>
|
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
Reference in New Issue
Block a user