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

Merge branch 'main' of http://192.168.1.163:3000/inmake/graff-mate-client

Browse Source
This commit is contained in:
c00b3r
2025-06-03 12:57:16 +05:00
parent a2bc0b13f0 74b256f601
commit 39b4815247
8 changed files with 163 additions and 9 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}
src/index.css
+1
View File
@@ -4,6 +4,7 @@
body {
font-family: "TTHovesPro", sans-serif;
background-color: #f2f0fe;
color: #141414;
}
button {
src/pages/DashboardPage.tsx
+2
View File
@@ -5,6 +5,7 @@ import { IServer } from "../types/IServer";
import DesktopCard from "../components/DesktopCard";
import Badge from "../components/Badge";
function DashboardPage() {
const { data: me } = useQuery({
queryKey: ["me"],
@@ -60,6 +61,7 @@ function DashboardPage() {
</div>
</div>
);
}
export default DashboardPage;
src/routes.tsx
+8 -2
View File
@@ -1,3 +1,4 @@
import Layout from "./components/Layout";
import DashboardPage from "./pages/DashboardPage";
import LoginPage from "./pages/LoginPage";
import ProtectedPage from "./pages/ProtectedPage";
@@ -8,8 +9,13 @@ export default [
element: <ProtectedPage />,
children: [
{
index: true,
element: <DashboardPage />,
element: <Layout />,
children: [
{
index: true,
element: <DashboardPage />,
},
],
},
],
},
vite.config.ts
+6
View File
@@ -5,4 +5,10 @@ import tailwindcss from "@tailwindcss/vite";
// https://vite.dev/config/
export default defineConfig({
plugins: [react(), tailwindcss()],
server: {
host: true,
},
preview: {
host: true,
},
});