inmake/graff-mate-client
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

upd

Browse Source
This commit is contained in:
Lanskikh
2025-06-03 11:46:49 +05:00
parent 07b8576d26
commit 74b256f601
8 changed files with 162 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Layout.tsx
+17
View File
@@ -0,0 +1,17 @@
import { Outlet } from "react-router";
import Navbar from "./Navbar";
function Layout() {
return (
<div className="flex">
<div className="flex-1"></div>
<div className="w-[42.5vw] flex flex-col gap-[1.667vw]">
<Navbar />
<Outlet />
</div>
<div className="flex-1"></div>
</div>
);
}
export default Layout;
src/components/Navbar.tsx
+84
View File
@@ -0,0 +1,84 @@
import { NavLink } from "react-router";
import clsx from "clsx";
import HomeIcon from "./icons/HomeIcon";
import DesktopIcon from "./icons/DesktopIcon";
function Navbar() {
return (
<div className="flex 2xl:gap-[0.278vw] items-center">
<NavLink
to="/"
className={({ isActive }) =>
clsx(
"2xl:p-[1.493vw] 2xl:py-[1.111vw] px-[21.5px] py-4 transition-colors flex 2xl:gap-[0.556vw] gap-2 items-center text-[#7D7D7D] hover:text-[#7B60F3]",
isActive && "text-[#7B60F3]"
)
}
>
<span className="2xl:w-[1.111vw] 2xl:h-[1.111vw] w-4 h-4">
<HomeIcon />
</span>
<span className="2xl:text-[0.972vw] text-sm font-medium">Главная</span>
</NavLink>
<NavLink
to="/"
className={({ isActive }) =>
clsx(
"2xl:p-[1.493vw] 2xl:py-[1.111vw] px-[21.5px] py-4 transition-colors flex 2xl:gap-[0.556vw] gap-2 items-center text-[#7D7D7D] hover:text-[#7B60F3]",
isActive && "text-[#7B60F3]"
)
}
>
<span className="2xl:w-[1.111vw] 2xl:h-[1.111vw] w-4 h-4">
<DesktopIcon />
</span>
<span className="2xl:text-[0.972vw] text-sm font-medium">Сеансы</span>
</NavLink>
<NavLink
to="/"
className={({ isActive }) =>
clsx(
"2xl:p-[1.493vw] 2xl:py-[1.111vw] px-[21.5px] py-4 transition-colors flex 2xl:gap-[0.556vw] gap-2 items-center text-[#7D7D7D] hover:text-[#7B60F3]",
isActive && "text-[#7B60F3]"
)
}
>
<span className="2xl:w-[1.111vw] 2xl:h-[1.111vw] w-4 h-4">
<HomeIcon />
</span>
<span className="2xl:text-[0.972vw] text-sm font-medium">Главная</span>
</NavLink>
<NavLink
to="/"
className={({ isActive }) =>
clsx(
"2xl:p-[1.493vw] 2xl:py-[1.111vw] px-[21.5px] py-4 transition-colors flex 2xl:gap-[0.556vw] gap-2 items-center text-[#7D7D7D] hover:text-[#7B60F3]",
isActive && "text-[#7B60F3]"
)
}
>
<span className="2xl:w-[1.111vw] 2xl:h-[1.111vw] w-4 h-4">
<HomeIcon />
</span>
<span className="2xl:text-[0.972vw] text-sm font-medium">Главная</span>
</NavLink>
<NavLink
to="/"
className={({ isActive }) =>
clsx(
"2xl:p-[1.493vw] 2xl:py-[1.111vw] px-[21.5px] py-4 transition-colors flex 2xl:gap-[0.556vw] gap-2 items-center text-[#7D7D7D] hover:text-[#7B60F3]",
isActive && "text-[#7B60F3]"
)
}
>
<span className="2xl:w-[1.111vw] 2xl:h-[1.111vw] w-4 h-4">
<HomeIcon />
</span>
<span className="2xl:text-[0.972vw] text-sm font-medium">Главная</span>
</NavLink>
{/* */}
</div>
);
}
export default Navbar;
src/components/NewButton.tsx
+44
View File
@@ -0,0 +1,44 @@
import clsx from "clsx";
interface NewButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
children: React.ReactNode;
variant: "critical" | "secondary" | "primary" | "cta" | "menu";
className?: string;
size?: "small" | "medium" | "large";
ref?: React.RefObject<HTMLButtonElement | null>;
}
function NewButton({
children,
variant = "primary",
size = "medium",
className,
ref,
...props
}: NewButtonProps) {
return (
<button
ref={ref}
{...props}
className={clsx(
"transition-all 2xl:rounded-[0.556vw] rounded-lg flex 2xl:gap-[0.556vw] gap-2 items-center justify-between font-medium disabled:bg-[#F6F6F6] disabled:text-[#D6D6D6]",
variant === "critical" &&
"text-[#FF4517] bg-[#FEF3F2] hover:bg-[#FEE4E2]",
variant === "secondary" &&
"bg-[#F6F6F6] hover:bg-[#F0F0F0] active:text-[#7D7D7D] active:bg-[#F6F6F6]",
variant === "primary" &&
"bg-[#F8F7FE] text-[#7B60F3] hover:bg-[#E1DEFC] active:bg-[#F8F7FE]",
variant === "cta" &&
"bg-[#7B60F3] text-white hover:bg-[#9184F6] active:bg-[#B3AAF9]",
size === "large" && "2xl:p-[1.111vw] p-4",
size === "medium" && "2xl:p-[0.833vw] p-3",
size === "small" && "2xl:p-[0.556vw] p-2",
className
)}
>
{children}
</button>
);
}
export default NewButton;
src/components/icons/DesktopIcon.tsx
+1 -7
View File
@@ -1,12 +1,6 @@
export default function DesktopIcon() {
return (
<svg
width={20}
height={20}
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M17.083 2.5H2.917c-.69 0-1.25.56-1.25 1.25v10c0 .69.56 1.25 1.25 1.25h14.166c.69 0 1.25-.56 1.25-1.25v-10c0-.69-.56-1.25-1.25-1.25ZM10 15v2.917m-5.833 0h11.666"
opacity={0.8}