Victorious/gallery-frontend
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

header

Browse Source
This commit is contained in:
DavidK004 2025-12-03 14:12:02 +01:00
parent 3d9dfa237d
commit efb6392fc7
16 changed files with 2006 additions and 453 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
index.html
View File

@ -1,8 +1,14 @@
<!doctype html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap"
rel="stylesheet"
/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>gallery-frontend</title> <title>gallery-frontend</title>
</head> </head>

1857
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

36
package.json
View File

@ -1,5 +1,5 @@
{ {
"name": "gallery-frontend", "name": "test-ai",
"private": true, "private": true,
"version": "0.0.0", "version": "0.0.0",
"type": "module", "type": "module",
@ -10,21 +10,29 @@
"preview": "vite preview" "preview": "vite preview"
}, },
"dependencies": { "dependencies": {
"react": "^19.2.0", "@emotion/react": "^11.14.0",
"react-dom": "^19.2.0" "@emotion/styled": "^11.14.1",
"@mui/icons-material": "^7.3.5",
"@mui/material": "^7.3.5",
"@tanstack/react-query": "^5.90.7",
"axios": "^1.13.2",
"react": "^19.1.1",
"react-dom": "^19.1.1",
"react-router-dom": "^7.9.5",
"react-toastify": "^11.0.5"
}, },
"devDependencies": { "devDependencies": {
"@eslint/js": "^9.39.1", "@eslint/js": "^9.36.0",
"@types/node": "^24.10.1", "@types/node": "^24.6.0",
"@types/react": "^19.2.5", "@types/react": "^19.1.16",
"@types/react-dom": "^19.2.3", "@types/react-dom": "^19.1.9",
"@vitejs/plugin-react": "^5.1.1", "@vitejs/plugin-react": "^5.0.4",
"eslint": "^9.39.1", "eslint": "^9.36.0",
"eslint-plugin-react-hooks": "^7.0.1", "eslint-plugin-react-hooks": "^5.2.0",
"eslint-plugin-react-refresh": "^0.4.24", "eslint-plugin-react-refresh": "^0.4.22",
"globals": "^16.5.0", "globals": "^16.4.0",
"typescript": "~5.9.3", "typescript": "~5.9.3",
"typescript-eslint": "^8.46.4", "typescript-eslint": "^8.45.0",
"vite": "^7.2.4" "vite": "^7.1.7"
} }
} }

42
src/App.css
View File

@ -1,42 +0,0 @@
#root {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
text-align: center;
}
.logo {
height: 6em;
padding: 1.5em;
will-change: filter;
transition: filter 300ms;
}
.logo:hover {
filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.react:hover {
filter: drop-shadow(0 0 2em #61dafbaa);
}
@keyframes logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@media (prefers-reduced-motion: no-preference) {
a:nth-of-type(2) .logo {
animation: logo-spin infinite 20s linear;
}
}
.card {
padding: 2em;
}
.read-the-docs {
color: #888;
}

28
src/App.tsx
View File

@ -1,33 +1,13 @@
import { useState } from 'react' import { RouterProvider } from 'react-router-dom'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css' import './App.css'
import router from './router/router'
function App() { function App() {
const [count, setCount] = useState(0)
return ( return (
<> <>
<div> <RouterProvider router={router}/>
<a href="https://vite.dev" target="_blank">
<img src={viteLogo} className="logo" alt="Vite logo" />
</a>
<a href="https://react.dev" target="_blank">
<img src={reactLogo} className="logo react" alt="React logo" />
</a>
</div>
<h1>Vite + React</h1>
<div className="card">
<button onClick={() => setCount((count) => count + 1)}>
count is {count}
</button>
<p>
Edit <code>src/App.tsx</code> and save to test HMR
</p>
</div>
<p className="read-the-docs">
Click on the Vite and React logos to learn more
</p>
</> </>
) )
} }

14
src/MainLayout/Layout.styles.ts Normal file
View File

@ -0,0 +1,14 @@
import styled from "@emotion/styled";
export const LayoutWrapper = styled("div")({
minHeight: "100vh",
display: "flex",
flexDirection: "column",
});
export const PageWrapper = styled("div")({
flexGrow: 1,
display: "flex",
justifyContent: "center",
alignItems: "center",
});

20
src/MainLayout/MainLayout.tsx Normal file
View File

@ -0,0 +1,20 @@
import { Outlet } from "react-router-dom";
import { LayoutWrapper } from "./Layout.styles";
import { StyledDistance } from "../components/shared/StyledDistance";
import Header from "../components/Header/Header";
const MainLayout = () => {
return (
<>
<LayoutWrapper>
<Header />
<StyledDistance />
<Outlet />
</LayoutWrapper>
</>
);
};
export default MainLayout;

169
src/components/Header/Header.tsx Normal file
View File

@ -0,0 +1,169 @@
import * as React from "react";
import AppBar from "@mui/material/AppBar";
import Box from "@mui/material/Box";
import Toolbar from "@mui/material/Toolbar";
import IconButton from "@mui/material/IconButton";
import Typography from "@mui/material/Typography";
import Menu from "@mui/material/Menu";
import MenuIcon from "@mui/icons-material/Menu";
import Button from "@mui/material/Button";
import MenuItem from "@mui/material/MenuItem";
import { useNavigate } from "react-router-dom";
import { Container } from "@mui/material";
import CameraIcon from '@mui/icons-material/Camera';
function Header() {
const navigate = useNavigate();
const [anchorElNav, setAnchorElNav] = React.useState<null | HTMLElement>(
null
);
const handleOpenNavMenu = (event: React.MouseEvent<HTMLElement>) => {
setAnchorElNav(event.currentTarget);
};
const handleCloseNavMenu = () => {
setAnchorElNav(null);
};
const goToAdmin = () => navigate("/admin");
return (
<AppBar sx={{ backgroundColor: "#008080" }} position="static">
<Container>
<Toolbar disableGutters>
<CameraIcon sx={{ display: { xs: "none", md: "flex" }, mr: 1 }} />
<Typography
variant="h6"
noWrap
component="a"
href="/"
sx={{
mr: 2,
display: { xs: "none", md: "flex" },
fontFamily: "monospace",
fontWeight: 700,
letterSpacing: ".3rem",
color: "inherit",
textDecoration: "none",
}}
>
Gallery
</Typography>
<Box sx={{ flexGrow: 1, display: { xs: "flex", md: "none" } }}>
<IconButton
size="large"
aria-label="menu"
aria-controls="menu-appbar"
aria-haspopup="true"
onClick={handleOpenNavMenu}
color="inherit"
>
<MenuIcon />
</IconButton>
<Menu
id="menu-appbar"
anchorEl={anchorElNav}
anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
keepMounted
transformOrigin={{ vertical: "top", horizontal: "left" }}
open={Boolean(anchorElNav)}
onClose={handleCloseNavMenu}
sx={{ display: { xs: "block", md: "none" } }}
>
<MenuItem
onClick={() => {
handleCloseNavMenu();
navigate("/login");
}}
>
<Typography textAlign="center">Login</Typography>
</MenuItem>
<span>
<MenuItem
onClick={() => {
handleCloseNavMenu();
navigate("/profile");
}}
>
<Typography textAlign="center">Profile</Typography>
</MenuItem>
<MenuItem
onClick={() => {
handleCloseNavMenu();
goToAdmin();
}}
>
<Typography textAlign="center">
Admin Dashboard
</Typography>
</MenuItem>
</span>
</Menu>
</Box>
<CameraIcon sx={{ display: { xs: "flex", md: "none" }, mr: 1 }} />
<Typography
variant="h5"
noWrap
component="a"
href="/"
sx={{
mr: 2,
display: { xs: "flex", md: "none" },
flexGrow: 1,
fontFamily: "monospace",
fontWeight: 700,
letterSpacing: ".3rem",
color: "inherit",
textDecoration: "none",
}}
>
HoshiAI
</Typography>
<Box sx={{ flexGrow: 1, display: { xs: "none", md: "flex" } }}>
<Button
onClick={() => navigate("/login")}
sx={{ my: 2, color: "white", display: "block" }}
>
Login
</Button>
<>
<Button
onClick={() => navigate("/profile")}
sx={{ my: 2, color: "white", display: "block" }}
>
Profile
</Button>
<Button
onClick={goToAdmin}
sx={{ my: 2, color: "white", display: "block" }}
>
Admin Dashboard
</Button>
</>
</Box>
</Toolbar>
</Container>
</AppBar>
);
}
export default Header;

8
src/components/shared/Container/Container.styles.ts Normal file
View File

@ -0,0 +1,8 @@
import { styled } from "@mui/material/styles";
export const StyledContainer = styled("div")(() => ({
maxWidth: 1124,
width: "100%",
margin: "0 auto",
padding: "0 15px",
}));

8
src/components/shared/Container/Container.tsx Normal file
View File

@ -0,0 +1,8 @@
import type { OnlyChildrenProps } from "../types/OnlyChildrenProps";
import { StyledContainer } from "./Container.styles";
const Container = ({ children }: OnlyChildrenProps) => {
return <StyledContainer>{children}</StyledContainer>;
};
export default Container;

5
src/components/shared/StyledDistance.ts Normal file
View File

@ -0,0 +1,5 @@
import { styled } from "@mui/material";
export const StyledDistance = styled("div")(() => ({
height: 36,
}));

7
src/components/shared/types/OnlyChildrenProps.ts Normal file
View File

@ -0,0 +1,7 @@
import type { ReactNode } from "react";
export interface OnlyChildrenProps {
className?: string;
children?: ReactNode;
onClick?: () => void;
}

67
src/index.css
View File

@ -1,68 +1,3 @@
:root {
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 400;
color-scheme: light dark;
color: rgba(255, 255, 255, 0.87);
background-color: #242424;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a {
font-weight: 500;
color: #646cff;
text-decoration: inherit;
}
a:hover {
color: #535bf2;
}
body { body {
margin: 0; font-family: 'Roboto', sans-serif;
display: flex;
place-items: center;
min-width: 320px;
min-height: 100vh;
}
h1 {
font-size: 3.2em;
line-height: 1.1;
}
button {
border-radius: 8px;
border: 1px solid transparent;
padding: 0.6em 1.2em;
font-size: 1em;
font-weight: 500;
font-family: inherit;
background-color: #1a1a1a;
cursor: pointer;
transition: border-color 0.25s;
}
button:hover {
border-color: #646cff;
}
button:focus,
button:focus-visible {
outline: 4px auto -webkit-focus-ring-color;
}
@media (prefers-color-scheme: light) {
:root {
color: #213547;
background-color: #ffffff;
}
a:hover {
color: #747bff;
}
button {
background-color: #f9f9f9;
}
} }

1
src/main.tsx
View File

@ -1,5 +1,6 @@
import { StrictMode } from 'react' import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client' import { createRoot } from 'react-dom/client'
import './reset.css'
import './index.css' import './index.css'
import App from './App.tsx' import App from './App.tsx'

172
src/reset.css Normal file
View File

@ -0,0 +1,172 @@
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
nav ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: "";
content: none;
}
a {
margin: 0;
padding: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
text-decoration: none;
}
/* change colours to suit your needs */
ins {
background-color: #ff9;
color: #000;
text-decoration: none;
}
/* change colours to suit your needs */
mark {
background-color: #ff9;
color: #000;
font-style: italic;
font-weight: bold;
}
del {
text-decoration: line-through;
}
abbr[title],
dfn[title] {
border-bottom: 1px dotted;
cursor: help;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* change border colour to suit your needs */
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #cccccc;
margin: 1em 0;
padding: 0;
}
input,
select {
vertical-align: middle;
}
* {
box-sizing: border-box;
}
form {
width: 100%;
}

17
src/router/router.tsx Normal file
View File

@ -0,0 +1,17 @@
import { createBrowserRouter } from "react-router-dom";
import MainLayout from "../MainLayout/MainLayout";
import { Container } from "@mui/material";
const router = createBrowserRouter([
{
path: "/",
element: <MainLayout />,
children: [
{
index: true,
element: <Container>index page</Container>
}
]}
])
export default router;