From 8e4546edc50e9ecd5214b1e7eaba1344dcb6be53 Mon Sep 17 00:00:00 2001 From: Lanskikh Date: Wed, 11 Jun 2025 12:18:15 +0500 Subject: [PATCH] replace new button --- src/components/Button.tsx | 49 ++++++----- src/components/ClientCard.tsx | 6 +- src/components/CurrentSessionCard.tsx | 6 +- src/components/DesktopCard.tsx | 18 ++-- src/components/DesktopSelect.tsx | 88 ------------------- src/components/Layout.tsx | 6 +- src/components/ModalContainer.tsx | 6 +- src/components/Navbar.tsx | 22 ++--- src/components/NewButton.tsx | 55 ------------ src/components/NewSelect.tsx | 5 ++ src/components/ProjectSelector.tsx | 18 ++-- src/components/Select.tsx | 14 +-- src/components/SessionComments.tsx | 6 +- src/components/modals/CreateSessionModal.tsx | 6 +- src/components/modals/CurrentSessionModal.tsx | 14 +-- src/components/modals/EditTableModal.tsx | 10 +-- src/components/modals/EndSessionModal.tsx | 10 +-- src/components/modals/SessionModal.tsx | 14 +-- src/pages/DashboardPage.tsx | 14 +-- src/pages/LoginPage.tsx | 13 ++- 20 files changed, 130 insertions(+), 250 deletions(-) delete mode 100644 src/components/DesktopSelect.tsx delete mode 100644 src/components/NewButton.tsx create mode 100644 src/components/NewSelect.tsx diff --git a/src/components/Button.tsx b/src/components/Button.tsx index 0b40cce..f011972 100644 --- a/src/components/Button.tsx +++ b/src/components/Button.tsx @@ -1,40 +1,49 @@ -import React from 'react'; -import { clsx as cn } from 'clsx'; +import clsx from "clsx"; interface ButtonProps extends React.ButtonHTMLAttributes { children: React.ReactNode; - variant?: 'link' | 'primary' | 'secondary' | 'tertiary'; + variant: "critical" | "secondary" | "primary" | "cta" | "menu"; className?: string; - size?: 'small' | 'medium' | 'large'; - onlyIcon?: boolean; + size?: "small" | "medium" | "large"; ref?: React.RefObject; } function Button({ children, - variant = 'primary', - size = 'medium', - onlyIcon, + variant = "primary", + size = "medium", className, ref, + type, + onClick, ...props }: ButtonProps) { return ( ); } diff --git a/src/components/CurrentSessionCard.tsx b/src/components/CurrentSessionCard.tsx index beac39c..909897e 100644 --- a/src/components/CurrentSessionCard.tsx +++ b/src/components/CurrentSessionCard.tsx @@ -1,6 +1,6 @@ import FlashIcon from "./icons/FlashIcon"; import { Session } from "../types/ISession"; -import NewButton from "./NewButton"; +import Button from "./Button"; import ChevronRightIcon from "./icons/ChevronRightIcon"; import { motion } from "motion/react"; import CurrentSessionModal from "./modals/CurrentSessionModal"; @@ -71,12 +71,12 @@ function CurrentSessionCard({ - setModal()} > Завершить сеанс - + ); } diff --git a/src/components/DesktopCard.tsx b/src/components/DesktopCard.tsx index f5258c8..caad3d1 100644 --- a/src/components/DesktopCard.tsx +++ b/src/components/DesktopCard.tsx @@ -1,7 +1,7 @@ import { Server } from "../types/IServer"; import useModalStore from "../stores/useModalStore"; import CreateSessionModal from "./modals/CreateSessionModal"; -import NewButton from "./NewButton"; +import Button from "./Button"; import FlashIcon from "./icons/FlashIcon"; import CogIcon from "./icons/CogIcon"; import PlusIcon from "./icons/PlusIcon"; @@ -32,7 +32,7 @@ export default function DesktopCard({ server }: IDesktopCardProps) { server.status === "offline" && "opacity-40" )} > - - +
@@ -63,7 +63,7 @@ export default function DesktopCard({ server }: IDesktopCardProps) {
) : server.sessions?.[0]?.status === "started" ? (
- { if (server.sessions?.length && server.sessions?.[0]) { @@ -81,17 +81,17 @@ export default function DesktopCard({ server }: IDesktopCardProps) { - +
) : server.status === "offline" ? ( - + ) : ( -

Создать сеанс

- + )} diff --git a/src/components/DesktopSelect.tsx b/src/components/DesktopSelect.tsx deleted file mode 100644 index a9f4b7d..0000000 --- a/src/components/DesktopSelect.tsx +++ /dev/null @@ -1,88 +0,0 @@ -import { useState } from "react"; -import { Server } from "../types/IServer"; -import Button from "./Button"; -import { useClickAway } from "@uidotdev/usehooks"; -import ArrowDownIcon from "./icons/ArrowDownIcon"; - -interface Props { - servers: Server[] | undefined; - value: Server | undefined; - onChange: (server: Server) => void; -} - -export default function DesktopSelect({ servers, value, onChange }: Props) { - const [isOpen, setIsOpen] = useState(false); - const ref = useClickAway(() => setIsOpen(false)); - - return ( -
- - {isOpen && ( -
- {servers?.map((server) => ( - - ))} -
- )} -
- ); -} diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx index dcdd7d6..d06a9bd 100644 --- a/src/components/Layout.tsx +++ b/src/components/Layout.tsx @@ -5,7 +5,7 @@ import api from "../utils/api"; import CurrentSessionCard from "./CurrentSessionCard"; import { Session } from "../types/ISession"; import { AnimatePresence } from "motion/react"; -import NewButton from "./NewButton"; +import Button from "./Button"; import PlusIcon from "./icons/PlusIcon"; import useModalStore from "../stores/useModalStore"; import CreateSessionModal from "./modals/CreateSessionModal"; @@ -41,7 +41,7 @@ function Layout() { /> ))} - { @@ -53,7 +53,7 @@ function Layout() { Создать сеанс - + ); diff --git a/src/components/ModalContainer.tsx b/src/components/ModalContainer.tsx index 3ddb80b..2e484c5 100644 --- a/src/components/ModalContainer.tsx +++ b/src/components/ModalContainer.tsx @@ -4,7 +4,7 @@ import useModalStore from "../stores/useModalStore"; import { AnimatePresence, motion } from "motion/react"; import CloseIcon from "./icons/CloseIcon"; import { clsx as cn } from "clsx"; -import NewButton from "./NewButton"; +import Button from "./Button"; function ModalContainer() { const { modal, setModal, position } = useModalStore(); @@ -78,7 +78,7 @@ function ModalContainer() { // }} > {modal} - - + diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx index a174ffc..ba0135e 100644 --- a/src/components/Navbar.tsx +++ b/src/components/Navbar.tsx @@ -1,7 +1,7 @@ import { Link, useLocation } from "react-router"; import HomeIcon from "./icons/HomeIcon"; import DesktopIcon from "./icons/DesktopIcon"; -import NewButton from "./NewButton"; +import Button from "./Button"; import clsx from "clsx"; import PeopleIcon from "./icons/PeopleIcon"; import ClientIcon from "./icons/ClientIcon"; @@ -13,7 +13,7 @@ function Navbar() { return (
- Главная - + - Сеансы - + - Менеджеры - + - Клиенты - + - Проекты - +
); diff --git a/src/components/NewButton.tsx b/src/components/NewButton.tsx deleted file mode 100644 index e7da654..0000000 --- a/src/components/NewButton.tsx +++ /dev/null @@ -1,55 +0,0 @@ -import clsx from "clsx"; - -interface NewButtonProps extends React.ButtonHTMLAttributes { - children: React.ReactNode; - variant: "critical" | "secondary" | "primary" | "cta" | "menu"; - className?: string; - size?: "small" | "medium" | "large"; - ref?: React.RefObject; -} - -function NewButton({ - children, - variant = "primary", - size = "medium", - className, - ref, - type, - onClick, - ...props -}: NewButtonProps) { - return ( - - ); -} - -export default NewButton; diff --git a/src/components/NewSelect.tsx b/src/components/NewSelect.tsx new file mode 100644 index 0000000..2f979a6 --- /dev/null +++ b/src/components/NewSelect.tsx @@ -0,0 +1,5 @@ +function NewSelect() { + return
; +} + +export default NewSelect; diff --git a/src/components/ProjectSelector.tsx b/src/components/ProjectSelector.tsx index a497716..d509125 100644 --- a/src/components/ProjectSelector.tsx +++ b/src/components/ProjectSelector.tsx @@ -3,7 +3,7 @@ import { IApp } from "../types/IApp"; import ChevronLeftIcon from "./icons/ChevronLeftIcon"; import CloseIcon from "./icons/CloseIcon"; import LightningIcon from "./icons/LightningIcon"; -import NewButton from "./NewButton"; +import Button from "./Button"; import CheckIcon from "./icons/CheckIcon"; import ChevronDownIcon from "./icons/ChevronDownIcon"; @@ -51,13 +51,13 @@ function ProjectSelector({ {isOpen && (
- +

Смена проекта

- { @@ -68,7 +68,7 @@ function ProjectSelector({ - +
@@ -115,7 +115,7 @@ function ProjectSelector({ ))}
- { @@ -124,8 +124,8 @@ function ProjectSelector({ }} > Переключиться - - +
diff --git a/src/components/Select.tsx b/src/components/Select.tsx index ae196a5..430418b 100644 --- a/src/components/Select.tsx +++ b/src/components/Select.tsx @@ -2,7 +2,7 @@ import { useEffect, useState } from "react"; import { useClickAway } from "@uidotdev/usehooks"; import ArrowDownIcon from "./icons/ArrowDownIcon"; -import NewButton from "./NewButton"; +import Button from "./Button"; interface Props { options: string[]; // ["StroyProject"] @@ -29,9 +29,9 @@ export default function Select({ options, onChange }: Props) { return (
- { @@ -49,11 +49,11 @@ export default function Select({ options, onChange }: Props) { >
- + {isOpen && ( -
+
{options.map((option) => ( -

{option}

- + ))}
)} diff --git a/src/components/SessionComments.tsx b/src/components/SessionComments.tsx index efb1b8f..79a4583 100644 --- a/src/components/SessionComments.tsx +++ b/src/components/SessionComments.tsx @@ -1,6 +1,6 @@ import { useRef } from "react"; import SendIcon from "./icons/SendIcon"; -import NewButton from "./NewButton"; +import Button from "./Button"; import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"; import api from "../utils/api"; import { Comment } from "../types/IComments"; @@ -129,11 +129,11 @@ function SessionComments({ sessionId }: { sessionId: string }) { onInput={handleTextareaInput} onKeyDown={handleKeyDown} /> - + ); diff --git a/src/components/modals/CreateSessionModal.tsx b/src/components/modals/CreateSessionModal.tsx index d5f0458..d226ab1 100644 --- a/src/components/modals/CreateSessionModal.tsx +++ b/src/components/modals/CreateSessionModal.tsx @@ -8,7 +8,7 @@ import useModalStore from "../../stores/useModalStore.ts"; import TableSelector from "../TableSelector.tsx"; import NewInput from "../NewInput.tsx"; import StartSessionIcon from "../icons/StartSessionIcon.tsx"; -import NewButton from "../NewButton.tsx"; +import Button from "../Button.tsx"; import ProjectSelector from "../ProjectSelector.tsx"; import { useQueryClient, useMutation, useQuery } from "@tanstack/react-query"; @@ -226,7 +226,7 @@ export default function CreateSessionModal({ targetServerId }: Props) { )} -

Запустить сеанс

- + ); diff --git a/src/components/modals/CurrentSessionModal.tsx b/src/components/modals/CurrentSessionModal.tsx index 629bc20..be241d5 100644 --- a/src/components/modals/CurrentSessionModal.tsx +++ b/src/components/modals/CurrentSessionModal.tsx @@ -1,6 +1,6 @@ import { intervalToDuration } from "date-fns"; import FlashIcon from "../icons/FlashIcon"; -import NewButton from "../NewButton"; +import Button from "../Button"; import ChevronRightIcon from "../icons/ChevronRightIcon"; import useModalStore from "../../stores/useModalStore"; import { Session } from "../../types/ISession"; @@ -83,7 +83,7 @@ function CurrentSessionModal({ session }: { session: Session }) {

Параметры сеанса

- +
@@ -117,7 +117,7 @@ function CurrentSessionModal({ session }: { session: Session }) {
- Завершить сеанс - - +
diff --git a/src/components/modals/EditTableModal.tsx b/src/components/modals/EditTableModal.tsx index e77694a..0584573 100644 --- a/src/components/modals/EditTableModal.tsx +++ b/src/components/modals/EditTableModal.tsx @@ -1,6 +1,6 @@ import { useState } from "react"; import NewInput from "../NewInput"; -import NewButton from "../NewButton"; +import Button from "../Button"; import useModalStore from "../../stores/useModalStore"; import { Server } from "../../types/IServer"; import { useQueryClient } from "@tanstack/react-query"; @@ -62,7 +62,7 @@ function EditTable({ table }: { table: Server }) { )}
- updateTable()} >

Сохранить изменения

- - +
diff --git a/src/components/modals/EndSessionModal.tsx b/src/components/modals/EndSessionModal.tsx index d37d2a8..5063a10 100644 --- a/src/components/modals/EndSessionModal.tsx +++ b/src/components/modals/EndSessionModal.tsx @@ -2,7 +2,7 @@ import { useMutation } from "@tanstack/react-query"; import { useQueryClient } from "@tanstack/react-query"; import useModalStore from "../../stores/useModalStore"; import { Session } from "../../types/ISession"; -import NewButton from "../NewButton"; +import Button from "../Button"; import CurrentSessionModal from "./CurrentSessionModal"; import api from "../../utils/api"; import SpinIcon from "../icons/SpinIcon"; @@ -55,7 +55,7 @@ function EndSessionModal({ session }: { session: Session }) {

- Завершить сеанс - - +
diff --git a/src/components/modals/SessionModal.tsx b/src/components/modals/SessionModal.tsx index 5a1291a..429d330 100644 --- a/src/components/modals/SessionModal.tsx +++ b/src/components/modals/SessionModal.tsx @@ -3,7 +3,7 @@ import { format } from "date-fns"; import { ru } from "date-fns/locale"; import getIntervalDuration from "../../utils/interval-duration"; import MagicIcon from "../icons/MagicIcon"; -import NewButton from "../NewButton"; +import Button from "../Button"; import ChevronRightIcon from "../icons/ChevronRightIcon"; import Badge from "../Badge"; import ClientCard from "../ClientCard"; @@ -100,29 +100,29 @@ function SessionModal({ session }: { session: Session }) { согласование с семьей и выбор этажа. Необходимо подготовить предварительный договор к следующей встрече. - +

Документы по сеансу

- + +
diff --git a/src/pages/DashboardPage.tsx b/src/pages/DashboardPage.tsx index b3cd7e5..2a1a1c2 100644 --- a/src/pages/DashboardPage.tsx +++ b/src/pages/DashboardPage.tsx @@ -6,8 +6,9 @@ import DesktopCard from "../components/DesktopCard"; import Badge from "../components/Badge"; import { Session } from "../types/ISession"; import SessionCard from "../components/SessionCard"; -import NewButton from "../components/NewButton"; +import Button from "../components/Button"; import ChevronRightIcon from "../components/icons/ChevronRightIcon"; +import { useNavigate } from "react-router"; function DashboardPage() { const { data: me } = useQuery({ @@ -42,6 +43,8 @@ function DashboardPage() { // } // } + const navigate = useNavigate(); + return (
@@ -71,16 +74,17 @@ function DashboardPage() { ))}
- navigate("/sessions")} > -

Смотреть всё

+

Смотреть все

- +
diff --git a/src/pages/LoginPage.tsx b/src/pages/LoginPage.tsx index d201d51..7b282ef 100644 --- a/src/pages/LoginPage.tsx +++ b/src/pages/LoginPage.tsx @@ -1,5 +1,4 @@ import toast from "react-hot-toast"; -import Button from "../components/Button"; import Input from "../components/Input"; import useAuthStore from "../stores/useAuthStore"; import api from "../utils/api"; @@ -7,6 +6,7 @@ import { useState } from "react"; import { HTTPError } from "ky"; import { IError } from "../types/IError"; import { useNavigate } from "react-router"; +import Button from "../components/Button"; function LoginPage() { const navigate = useNavigate(); @@ -71,17 +71,22 @@ function LoginPage() { />
-
-
-