remade frontend
This commit is contained in:
parent
02281120dc
commit
36d99b1e35
45 changed files with 1290 additions and 4979 deletions
|
|
@ -1,4 +0,0 @@
|
||||||
.react-router
|
|
||||||
build
|
|
||||||
node_modules
|
|
||||||
README.md
|
|
||||||
|
|
@ -10,3 +10,4 @@ end_of_line = lf
|
||||||
charset = utf-8
|
charset = utf-8
|
||||||
trim_trailing_whitespace = false
|
trim_trailing_whitespace = false
|
||||||
insert_final_newline = false
|
insert_final_newline = false
|
||||||
|
max_line_length = 150
|
||||||
29
frontend/.gitignore
vendored
29
frontend/.gitignore
vendored
|
|
@ -1,7 +1,24 @@
|
||||||
.DS_Store
|
# Logs
|
||||||
.env
|
logs
|
||||||
/node_modules/
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
# React Router
|
node_modules
|
||||||
/.react-router/
|
dist
|
||||||
/build/
|
dist-ssr
|
||||||
|
*.local
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.idea
|
||||||
|
.DS_Store
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
|
|
|
||||||
|
|
@ -1,22 +0,0 @@
|
||||||
FROM node:20-alpine AS development-dependencies-env
|
|
||||||
COPY . /app
|
|
||||||
WORKDIR /app
|
|
||||||
RUN npm ci
|
|
||||||
|
|
||||||
FROM node:20-alpine AS production-dependencies-env
|
|
||||||
COPY ./package.json package-lock.json /app/
|
|
||||||
WORKDIR /app
|
|
||||||
RUN npm ci --omit=dev
|
|
||||||
|
|
||||||
FROM node:20-alpine AS build-env
|
|
||||||
COPY . /app/
|
|
||||||
COPY --from=development-dependencies-env /app/node_modules /app/node_modules
|
|
||||||
WORKDIR /app
|
|
||||||
RUN npm run build
|
|
||||||
|
|
||||||
FROM node:20-alpine
|
|
||||||
COPY ./package.json package-lock.json /app/
|
|
||||||
COPY --from=production-dependencies-env /app/node_modules /app/node_modules
|
|
||||||
COPY --from=build-env /app/build /app/build
|
|
||||||
WORKDIR /app
|
|
||||||
CMD ["npm", "run", "start"]
|
|
||||||
|
|
@ -1,87 +1,73 @@
|
||||||
# Welcome to React Router!
|
# React + TypeScript + Vite
|
||||||
|
|
||||||
A modern, production-ready template for building full-stack React applications using React Router.
|
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
|
||||||
|
|
||||||
[](https://stackblitz.com/github/remix-run/react-router-templates/tree/main/default)
|
Currently, two official plugins are available:
|
||||||
|
|
||||||
## Features
|
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
|
||||||
|
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
|
||||||
|
|
||||||
- 🚀 Server-side rendering
|
## React Compiler
|
||||||
- ⚡️ Hot Module Replacement (HMR)
|
|
||||||
- 📦 Asset bundling and optimization
|
|
||||||
- 🔄 Data loading and mutations
|
|
||||||
- 🔒 TypeScript by default
|
|
||||||
- 🎉 TailwindCSS for styling
|
|
||||||
- 📖 [React Router docs](https://reactrouter.com/)
|
|
||||||
|
|
||||||
## Getting Started
|
The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
|
||||||
|
|
||||||
### Installation
|
## Expanding the ESLint configuration
|
||||||
|
|
||||||
Install the dependencies:
|
If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
|
||||||
|
|
||||||
```bash
|
```js
|
||||||
npm install
|
export default defineConfig([
|
||||||
|
globalIgnores(['dist']),
|
||||||
|
{
|
||||||
|
files: ['**/*.{ts,tsx}'],
|
||||||
|
extends: [
|
||||||
|
// Other configs...
|
||||||
|
|
||||||
|
// Remove tseslint.configs.recommended and replace with this
|
||||||
|
tseslint.configs.recommendedTypeChecked,
|
||||||
|
// Alternatively, use this for stricter rules
|
||||||
|
tseslint.configs.strictTypeChecked,
|
||||||
|
// Optionally, add this for stylistic rules
|
||||||
|
tseslint.configs.stylisticTypeChecked,
|
||||||
|
|
||||||
|
// Other configs...
|
||||||
|
],
|
||||||
|
languageOptions: {
|
||||||
|
parserOptions: {
|
||||||
|
project: ['./tsconfig.node.json', './tsconfig.app.json'],
|
||||||
|
tsconfigRootDir: import.meta.dirname,
|
||||||
|
},
|
||||||
|
// other options...
|
||||||
|
},
|
||||||
|
},
|
||||||
|
])
|
||||||
```
|
```
|
||||||
|
|
||||||
### Development
|
You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
|
||||||
|
|
||||||
Start the development server with HMR:
|
```js
|
||||||
|
// eslint.config.js
|
||||||
|
import reactX from 'eslint-plugin-react-x'
|
||||||
|
import reactDom from 'eslint-plugin-react-dom'
|
||||||
|
|
||||||
```bash
|
export default defineConfig([
|
||||||
npm run dev
|
globalIgnores(['dist']),
|
||||||
|
{
|
||||||
|
files: ['**/*.{ts,tsx}'],
|
||||||
|
extends: [
|
||||||
|
// Other configs...
|
||||||
|
// Enable lint rules for React
|
||||||
|
reactX.configs['recommended-typescript'],
|
||||||
|
// Enable lint rules for React DOM
|
||||||
|
reactDom.configs.recommended,
|
||||||
|
],
|
||||||
|
languageOptions: {
|
||||||
|
parserOptions: {
|
||||||
|
project: ['./tsconfig.node.json', './tsconfig.app.json'],
|
||||||
|
tsconfigRootDir: import.meta.dirname,
|
||||||
|
},
|
||||||
|
// other options...
|
||||||
|
},
|
||||||
|
},
|
||||||
|
])
|
||||||
```
|
```
|
||||||
|
|
||||||
Your application will be available at `http://localhost:5173`.
|
|
||||||
|
|
||||||
## Building for Production
|
|
||||||
|
|
||||||
Create a production build:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npm run build
|
|
||||||
```
|
|
||||||
|
|
||||||
## Deployment
|
|
||||||
|
|
||||||
### Docker Deployment
|
|
||||||
|
|
||||||
To build and run using Docker:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
docker build -t my-app .
|
|
||||||
|
|
||||||
# Run the container
|
|
||||||
docker run -p 3000:3000 my-app
|
|
||||||
```
|
|
||||||
|
|
||||||
The containerized application can be deployed to any platform that supports Docker, including:
|
|
||||||
|
|
||||||
- AWS ECS
|
|
||||||
- Google Cloud Run
|
|
||||||
- Azure Container Apps
|
|
||||||
- Digital Ocean App Platform
|
|
||||||
- Fly.io
|
|
||||||
- Railway
|
|
||||||
|
|
||||||
### DIY Deployment
|
|
||||||
|
|
||||||
If you're familiar with deploying Node applications, the built-in app server is production-ready.
|
|
||||||
|
|
||||||
Make sure to deploy the output of `npm run build`
|
|
||||||
|
|
||||||
```
|
|
||||||
├── package.json
|
|
||||||
├── package-lock.json (or pnpm-lock.yaml, or bun.lockb)
|
|
||||||
├── build/
|
|
||||||
│ ├── client/ # Static assets
|
|
||||||
│ └── server/ # Server-side code
|
|
||||||
```
|
|
||||||
|
|
||||||
## Styling
|
|
||||||
|
|
||||||
This template comes with [Tailwind CSS](https://tailwindcss.com/) already configured for a simple default starting experience. You can use whatever CSS framework you prefer.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
Built with ❤️ using React Router.
|
|
||||||
|
|
|
||||||
|
|
@ -1,21 +0,0 @@
|
||||||
import { Card } from "react-bootstrap";
|
|
||||||
import type Item from "~/Models/Item";
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
item: Item;
|
|
||||||
}
|
|
||||||
|
|
||||||
const ItemCard = ({ item }: Props) => {
|
|
||||||
return (
|
|
||||||
<Card>
|
|
||||||
<Card.Header>
|
|
||||||
<Card.Img />
|
|
||||||
</Card.Header>
|
|
||||||
<Card.Body>
|
|
||||||
<Card.Title>{item.name}</Card.Title>
|
|
||||||
</Card.Body>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default ItemCard;
|
|
||||||
|
|
@ -1,28 +0,0 @@
|
||||||
import { Card } from "react-bootstrap";
|
|
||||||
import { useNavigate } from "react-router";
|
|
||||||
import type Library from "~/Models/Library";
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
library: Library;
|
|
||||||
}
|
|
||||||
|
|
||||||
const LibraryCard = ({ library }: Props) => {
|
|
||||||
const navigate = useNavigate();
|
|
||||||
|
|
||||||
function handleClick() {
|
|
||||||
navigate(`/Library/${library.id}`);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Card onClick={handleClick}>
|
|
||||||
<Card.Header>
|
|
||||||
<Card.Img />
|
|
||||||
</Card.Header>
|
|
||||||
<Card.Body>
|
|
||||||
<Card.Title>{library.name}</Card.Title>
|
|
||||||
</Card.Body>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default LibraryCard;
|
|
||||||
|
|
@ -1,16 +0,0 @@
|
||||||
import { ItemType } from "~/Models/Item";
|
|
||||||
import type Item from "~/Models/Item";
|
|
||||||
|
|
||||||
|
|
||||||
export const FetchItems = async (libraryId: string): Promise<Array<Item>> => {
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
|
|
||||||
export const FetchItem = async (itemId: string, libraryId: string): Promise<Item> => {
|
|
||||||
return {
|
|
||||||
id: "",
|
|
||||||
name: "",
|
|
||||||
servers: [],
|
|
||||||
type: ItemType.Movie,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
@ -1,14 +0,0 @@
|
||||||
import type Library from "~/Models/Library";
|
|
||||||
|
|
||||||
|
|
||||||
export const FetchLibraries = async (): Promise<Array<Library>> => {
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
|
|
||||||
export const FetchLibrary = async (id: string): Promise<Library> => {
|
|
||||||
return {
|
|
||||||
id: "",
|
|
||||||
name: "",
|
|
||||||
servers: []
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
@ -1,15 +0,0 @@
|
||||||
import type Library from "./Library";
|
|
||||||
|
|
||||||
export default interface Item {
|
|
||||||
name: string;
|
|
||||||
id: string;
|
|
||||||
library?: Library;
|
|
||||||
servers: Array<string>;
|
|
||||||
type: ItemType;
|
|
||||||
}
|
|
||||||
|
|
||||||
export enum ItemType {
|
|
||||||
Movie,
|
|
||||||
TvShow,
|
|
||||||
Music,
|
|
||||||
}
|
|
||||||
|
|
@ -1,8 +0,0 @@
|
||||||
import type Item from "./Item";
|
|
||||||
|
|
||||||
export default interface Library {
|
|
||||||
name: string;
|
|
||||||
id: string;
|
|
||||||
servers: Array<string>;
|
|
||||||
items?: Array<Item>;
|
|
||||||
}
|
|
||||||
|
|
@ -1,15 +0,0 @@
|
||||||
@import "tailwindcss";
|
|
||||||
|
|
||||||
@theme {
|
|
||||||
--font-sans: "Inter", ui-sans-serif, system-ui, sans-serif,
|
|
||||||
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
|
||||||
}
|
|
||||||
|
|
||||||
html,
|
|
||||||
body {
|
|
||||||
@apply bg-white dark:bg-gray-950;
|
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
|
||||||
color-scheme: dark;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,88 +0,0 @@
|
||||||
import {
|
|
||||||
isRouteErrorResponse,
|
|
||||||
Links,
|
|
||||||
Meta,
|
|
||||||
Outlet,
|
|
||||||
Scripts,
|
|
||||||
ScrollRestoration,
|
|
||||||
} from "react-router";
|
|
||||||
|
|
||||||
import React from "react";
|
|
||||||
import type { Route } from "./+types/root";
|
|
||||||
// import "./app.css";
|
|
||||||
import 'bootstrap/dist/css/bootstrap.min.css';
|
|
||||||
|
|
||||||
export const links: Route.LinksFunction = () => [
|
|
||||||
{ rel: "preconnect", href: "https://fonts.googleapis.com" },
|
|
||||||
{
|
|
||||||
rel: "preconnect",
|
|
||||||
href: "https://fonts.gstatic.com",
|
|
||||||
crossOrigin: "anonymous",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
rel: "stylesheet",
|
|
||||||
href: "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap",
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
export function Layout({ children }: { children: React.ReactNode }) {
|
|
||||||
return (
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charSet="utf-8" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
||||||
<Meta />
|
|
||||||
<Links />
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
{children}
|
|
||||||
<ScrollRestoration />
|
|
||||||
<Scripts />
|
|
||||||
<script src="https://cdn.jsdelivr.net/npm/react/umd/react.production.min.js" crossOrigin=""></script>
|
|
||||||
|
|
||||||
<script
|
|
||||||
src="https://cdn.jsdelivr.net/npm/react-dom/umd/react-dom.production.min.js"
|
|
||||||
crossOrigin=""></script>
|
|
||||||
|
|
||||||
<script
|
|
||||||
src="https://cdn.jsdelivr.net/npm/react-bootstrap@next/dist/react-bootstrap.min.js"
|
|
||||||
crossOrigin=""></script>
|
|
||||||
|
|
||||||
<script>var Alert = ReactBootstrap.Alert;</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function App() {
|
|
||||||
return <Outlet />;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
|
|
||||||
let message = "Oops!";
|
|
||||||
let details = "An unexpected error occurred.";
|
|
||||||
let stack: string | undefined;
|
|
||||||
|
|
||||||
if (isRouteErrorResponse(error)) {
|
|
||||||
message = error.status === 404 ? "404" : "Error";
|
|
||||||
details =
|
|
||||||
error.status === 404
|
|
||||||
? "The requested page could not be found."
|
|
||||||
: error.statusText || details;
|
|
||||||
} else if (import.meta.env.DEV && error && error instanceof Error) {
|
|
||||||
details = error.message;
|
|
||||||
stack = error.stack;
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<main className="pt-16 p-4 container mx-auto">
|
|
||||||
<h1>{message}</h1>
|
|
||||||
<p>{details}</p>
|
|
||||||
{stack && (
|
|
||||||
<pre className="w-full p-4 overflow-x-auto">
|
|
||||||
<code>{stack}</code>
|
|
||||||
</pre>
|
|
||||||
)}
|
|
||||||
</main>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
@ -1,8 +0,0 @@
|
||||||
import { type RouteConfig, index, route } from "@react-router/dev/routes";
|
|
||||||
|
|
||||||
export default [
|
|
||||||
index("routes/home.tsx"),
|
|
||||||
route("/Libraries", "routes/Libraries.tsx"),
|
|
||||||
route("/Library:libraryId", "routes/LibraryItems.tsx"),
|
|
||||||
route("/Library/:libraryId/Item/:item", "routes/Item.tsx"),
|
|
||||||
] satisfies RouteConfig;
|
|
||||||
|
|
@ -1,30 +0,0 @@
|
||||||
import { useEffect, useState } from "react";
|
|
||||||
import { useParams } from "react-router";
|
|
||||||
import { FetchItem } from "~/Lib/Item";
|
|
||||||
import type Item from "~/Models/Item";
|
|
||||||
|
|
||||||
export const meta = () => {
|
|
||||||
return [
|
|
||||||
{ title: "" },
|
|
||||||
];
|
|
||||||
};
|
|
||||||
|
|
||||||
const Item = () => {
|
|
||||||
const params = useParams();
|
|
||||||
const [item, setItem] = useState<Item>();
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const libraryId = params["libraryId"];
|
|
||||||
const itemId = params["itemId"];
|
|
||||||
|
|
||||||
FetchItem(itemId!, libraryId!).then(response => {
|
|
||||||
setItem(response);
|
|
||||||
})
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<></>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Item;
|
|
||||||
|
|
@ -1,32 +0,0 @@
|
||||||
import { useEffect, useState } from "react";
|
|
||||||
import LibraryCard from "~/Components/Libraries/LibraryCard";
|
|
||||||
import { FetchLibraries } from "~/Lib/Library";
|
|
||||||
import type Library from "~/Models/Library";
|
|
||||||
|
|
||||||
export const meta = () => {
|
|
||||||
return [
|
|
||||||
{ title: "New React Router App" },
|
|
||||||
];
|
|
||||||
};
|
|
||||||
|
|
||||||
const Libraries = () => {
|
|
||||||
const [libraries, setLibraries] = useState<Array<Library>>([]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
FetchLibraries().then(response => {
|
|
||||||
setLibraries(response);
|
|
||||||
});
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
{libraries.length > 0 && libraries.map(library => {
|
|
||||||
return (
|
|
||||||
<LibraryCard library={library} key={library.id} />
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Libraries;
|
|
||||||
|
|
@ -1,31 +0,0 @@
|
||||||
import { useEffect, useState } from "react";
|
|
||||||
import { useParams } from "react-router";
|
|
||||||
import ItemCard from "~/Components/Items/ItemCard";
|
|
||||||
import { FetchItems } from "~/Lib/Item";
|
|
||||||
import type Item from "~/Models/Item";
|
|
||||||
|
|
||||||
|
|
||||||
const LibraryItems = () => {
|
|
||||||
const params = useParams();
|
|
||||||
const [items, setItems] = useState<Array<Item>>([]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const librayId = params["libraryId"];
|
|
||||||
|
|
||||||
FetchItems(librayId!).then(response => {
|
|
||||||
setItems(response);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
{items.length > 0 && items.map(item => {
|
|
||||||
return (
|
|
||||||
<ItemCard key={item.id} item={item} />
|
|
||||||
)
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default LibraryItems;
|
|
||||||
|
|
@ -1,15 +0,0 @@
|
||||||
import type { Route } from "./+types/home";
|
|
||||||
|
|
||||||
// eslint-disable-next-line no-empty-pattern
|
|
||||||
export function meta({ }: Route.MetaArgs) {
|
|
||||||
return [
|
|
||||||
{ title: "New React Router App" },
|
|
||||||
{ name: "description", content: "Welcome to React Router!" },
|
|
||||||
];
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function Home() {
|
|
||||||
return (
|
|
||||||
<></>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
23
frontend/eslint.config.js
Normal file
23
frontend/eslint.config.js
Normal file
|
|
@ -0,0 +1,23 @@
|
||||||
|
import js from '@eslint/js'
|
||||||
|
import globals from 'globals'
|
||||||
|
import reactHooks from 'eslint-plugin-react-hooks'
|
||||||
|
import reactRefresh from 'eslint-plugin-react-refresh'
|
||||||
|
import tseslint from 'typescript-eslint'
|
||||||
|
import { defineConfig, globalIgnores } from 'eslint/config'
|
||||||
|
|
||||||
|
export default defineConfig([
|
||||||
|
globalIgnores(['dist']),
|
||||||
|
{
|
||||||
|
files: ['**/*.{ts,tsx}'],
|
||||||
|
extends: [
|
||||||
|
js.configs.recommended,
|
||||||
|
tseslint.configs.recommended,
|
||||||
|
reactHooks.configs.flat.recommended,
|
||||||
|
reactRefresh.configs.vite,
|
||||||
|
],
|
||||||
|
languageOptions: {
|
||||||
|
ecmaVersion: 2020,
|
||||||
|
globals: globals.browser,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
])
|
||||||
16
frontend/index.html
Normal file
16
frontend/index.html
Normal file
|
|
@ -0,0 +1,16 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<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>JellyGlass</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
|
<script type="module" src="/src/main.tsx"></script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
5232
frontend/package-lock.json
generated
5232
frontend/package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -1,40 +1,35 @@
|
||||||
{
|
{
|
||||||
"name": "frontend",
|
"name": "JellyGlass",
|
||||||
"private": true,
|
"private": true,
|
||||||
|
"version": "0.0.0",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"build": "react-router build",
|
"dev": "vite",
|
||||||
"dev": "react-router dev",
|
"build": "tsc -b && vite build",
|
||||||
"start": "react-router-serve ./build/server/index.js",
|
"lint": "eslint .",
|
||||||
"typecheck": "react-router typegen && tsc"
|
"preview": "vite preview"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@react-router/node": "7.10.1",
|
|
||||||
"@react-router/serve": "7.10.1",
|
|
||||||
"axios": "^1.13.2",
|
|
||||||
"bootstrap": "^5.3.8",
|
"bootstrap": "^5.3.8",
|
||||||
"immer": "^11.1.0",
|
"react": "^19.2.0",
|
||||||
"isbot": "^5.1.31",
|
|
||||||
"react": "^19.2.3",
|
|
||||||
"react-bootstrap": "^2.10.10",
|
"react-bootstrap": "^2.10.10",
|
||||||
"react-dom": "^19.2.3",
|
"react-dom": "^19.2.0",
|
||||||
"react-router": "7.10.1",
|
"react-router-dom": "^7.13.0",
|
||||||
"sass": "^1.97.1"
|
"sass": "^1.97.3",
|
||||||
|
"scss": "^0.2.4"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@eslint/js": "^9.39.2",
|
"@eslint/js": "^9.39.1",
|
||||||
"@react-router/dev": "7.10.1",
|
"@types/node": "^24.10.1",
|
||||||
"@tailwindcss/vite": "^4.1.13",
|
|
||||||
"@types/node": "^22",
|
|
||||||
"@types/react": "^19.2.7",
|
"@types/react": "^19.2.7",
|
||||||
"@types/react-dom": "^19.2.3",
|
"@types/react-dom": "^19.2.3",
|
||||||
"eslint": "^9.39.2",
|
"@vitejs/plugin-react": "^5.1.1",
|
||||||
"eslint-plugin-react": "^7.37.5",
|
"eslint": "^9.39.1",
|
||||||
|
"eslint-plugin-react-hooks": "^7.0.1",
|
||||||
|
"eslint-plugin-react-refresh": "^0.4.24",
|
||||||
"globals": "^16.5.0",
|
"globals": "^16.5.0",
|
||||||
"tailwindcss": "^4.1.13",
|
"typescript": "~5.9.3",
|
||||||
"typescript": "^5.9.2",
|
"typescript-eslint": "^8.48.0",
|
||||||
"typescript-eslint": "^8.50.0",
|
"vite": "^7.3.1"
|
||||||
"vite": "^7.1.7",
|
|
||||||
"vite-tsconfig-paths": "^5.1.4"
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
|
|
@ -1,7 +0,0 @@
|
||||||
import type { Config } from "@react-router/dev/config";
|
|
||||||
|
|
||||||
export default {
|
|
||||||
// Config options...
|
|
||||||
// Server-side render by default, to enable SPA mode set this to `false`
|
|
||||||
ssr: true,
|
|
||||||
} satisfies Config;
|
|
||||||
5
frontend/src/Components/Navbar/Navbar.module.scss
Normal file
5
frontend/src/Components/Navbar/Navbar.module.scss
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
.navbar {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 10% 80% 10%;
|
||||||
|
padding: 5px 10px;
|
||||||
|
}
|
||||||
33
frontend/src/Components/Navbar/Navbar.tsx
Normal file
33
frontend/src/Components/Navbar/Navbar.tsx
Normal file
|
|
@ -0,0 +1,33 @@
|
||||||
|
import { Navbar as BsNavbar, Container } from "react-bootstrap";
|
||||||
|
// import styles from "./Navbar.module.scss";
|
||||||
|
import Searchbar from "../Searchbar/Searchbar";
|
||||||
|
import { useState } from "react";
|
||||||
|
import { Link, useNavigate } from "react-router-dom";
|
||||||
|
|
||||||
|
const Navbar = () => {
|
||||||
|
const [searchText, setSearchText] = useState<string>("");
|
||||||
|
const navigate = useNavigate();
|
||||||
|
|
||||||
|
function onSearch() {
|
||||||
|
navigate(`/search?search=${searchText}`);
|
||||||
|
setSearchText("");
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<BsNavbar expand="lg" className={"bg-light "}>
|
||||||
|
<Container>
|
||||||
|
<Link to={"/"} style={{ textDecoration: "none" }}>
|
||||||
|
<BsNavbar.Brand>JellyGlass</BsNavbar.Brand>
|
||||||
|
</Link>
|
||||||
|
<BsNavbar.Toggle />
|
||||||
|
<BsNavbar.Collapse>
|
||||||
|
<Container className="justify-content-center d-flex">
|
||||||
|
<Searchbar text={searchText} setText={setSearchText} onSearch={onSearch} />
|
||||||
|
</Container>
|
||||||
|
</BsNavbar.Collapse>
|
||||||
|
</Container>
|
||||||
|
</BsNavbar>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Navbar;
|
||||||
5
frontend/src/Components/Searchbar/Searchbar.module.scss
Normal file
5
frontend/src/Components/Searchbar/Searchbar.module.scss
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
.searchbar {
|
||||||
|
border-radius: 10px;
|
||||||
|
padding: 5px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
27
frontend/src/Components/Searchbar/Searchbar.tsx
Normal file
27
frontend/src/Components/Searchbar/Searchbar.tsx
Normal file
|
|
@ -0,0 +1,27 @@
|
||||||
|
import type React from "react";
|
||||||
|
import styles from "./Searchbar.module.scss";
|
||||||
|
|
||||||
|
interface SearchbarProps {
|
||||||
|
text: string,
|
||||||
|
setText: (text: string) => void;
|
||||||
|
onSearch?: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const Searchbar = ({ text, setText, onSearch }: SearchbarProps) => {
|
||||||
|
|
||||||
|
function onKeyPressed(event: React.KeyboardEvent<HTMLInputElement>) {
|
||||||
|
if (onSearch === undefined) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (event.key === "Enter") {
|
||||||
|
onSearch();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<input className={styles.searchbar} type="text" placeholder="Search" value={text} onChange={e => setText(e.target.value)} onKeyUp={onKeyPressed} />
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Searchbar;
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
.serverCard {
|
||||||
|
max-width: 400px;
|
||||||
|
width: 400px;
|
||||||
|
display: block;
|
||||||
|
text-decoration: none;
|
||||||
|
margin: 25px;
|
||||||
|
}
|
||||||
26
frontend/src/Components/ServerList/ServerCard/ServerCard.tsx
Normal file
26
frontend/src/Components/ServerList/ServerCard/ServerCard.tsx
Normal file
|
|
@ -0,0 +1,26 @@
|
||||||
|
import { Card } from "react-bootstrap";
|
||||||
|
import { Link } from "react-router-dom";
|
||||||
|
import styles from "./ServerCard.module.scss";
|
||||||
|
|
||||||
|
interface ServerCardProps {
|
||||||
|
name: string;
|
||||||
|
online: boolean;
|
||||||
|
linkTo: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const ServerCard = ({ name, online, linkTo }: ServerCardProps) => {
|
||||||
|
return (
|
||||||
|
<Link to={linkTo} className={styles.serverCard}>
|
||||||
|
<Card>
|
||||||
|
<Card.Header>
|
||||||
|
<Card.Title>{name}</Card.Title>
|
||||||
|
</Card.Header>
|
||||||
|
<Card.Body>
|
||||||
|
<h3>{online ? "Online" : "Offline"}</h3>
|
||||||
|
</Card.Body>
|
||||||
|
</Card>
|
||||||
|
</Link>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ServerCard;
|
||||||
23
frontend/src/Components/ServerList/ServerList.tsx
Normal file
23
frontend/src/Components/ServerList/ServerList.tsx
Normal file
|
|
@ -0,0 +1,23 @@
|
||||||
|
import ServerCard from "./ServerCard/ServerCard";
|
||||||
|
|
||||||
|
interface ServerListProps {
|
||||||
|
servers: Array<Server>;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface Server {
|
||||||
|
name: string;
|
||||||
|
online: boolean;
|
||||||
|
linkTo: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const ServerList = ({ servers }: ServerListProps) => {
|
||||||
|
return (
|
||||||
|
<div style={{ display: "flex", flexDirection: "row", flexWrap: "wrap" }}>
|
||||||
|
{servers.map(server => {
|
||||||
|
return (<ServerCard name={server.name} online={server.online} linkTo={server.linkTo} key={server.name} />)
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ServerList;
|
||||||
62
frontend/src/Components/ServerSearch/ServerSearch.tsx
Normal file
62
frontend/src/Components/ServerSearch/ServerSearch.tsx
Normal file
|
|
@ -0,0 +1,62 @@
|
||||||
|
import { useEffect, useState } from "react";
|
||||||
|
import { Spinner, Table } from "react-bootstrap";
|
||||||
|
import ServerSearchResult from "./ServerSearchResult/ServerSearchResult";
|
||||||
|
import type { Server } from "../../Lib/Servers";
|
||||||
|
import { search, type SearchResult } from "../../Lib/Search";
|
||||||
|
|
||||||
|
interface ServerSearchProps {
|
||||||
|
searchTerm: string;
|
||||||
|
server: Server;
|
||||||
|
}
|
||||||
|
|
||||||
|
const ServerSearch = ({ searchTerm, server }: ServerSearchProps) => {
|
||||||
|
const [searchResults, setSearchResults] = useState<Array<SearchResult>>([]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
search(searchTerm, server.id).then(results => {
|
||||||
|
setSearchResults(results);
|
||||||
|
})
|
||||||
|
}, [searchTerm]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Table striped bordered >
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>{server.name}</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{searchResults.length > 0 ?
|
||||||
|
searchResults.map(result => {
|
||||||
|
return (
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<ServerSearchResult key={result.id} searchResult={result} server={server} />
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
)
|
||||||
|
})
|
||||||
|
:
|
||||||
|
<Spinner />
|
||||||
|
}
|
||||||
|
</tbody>
|
||||||
|
</Table >
|
||||||
|
|
||||||
|
// <div>
|
||||||
|
// <div>
|
||||||
|
// <h1>{server.name}</h1>
|
||||||
|
// </div>
|
||||||
|
// <div>
|
||||||
|
// {searchResults.length > 0 ?
|
||||||
|
// searchResults.map(result => {
|
||||||
|
// return <ServerSearchResult key={result.id} searchResult={result} server={server} />
|
||||||
|
// })
|
||||||
|
// :
|
||||||
|
// <Spinner />
|
||||||
|
// }
|
||||||
|
// </div>
|
||||||
|
// </div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ServerSearch;
|
||||||
|
|
@ -0,0 +1,20 @@
|
||||||
|
import { Link } from "react-router-dom";
|
||||||
|
import { getUrlForSearchResult, type SearchResult } from "../../../Lib/Search";
|
||||||
|
import type { Server } from "../../../Lib/Servers";
|
||||||
|
|
||||||
|
interface ServerSearchResultProps {
|
||||||
|
searchResult: SearchResult;
|
||||||
|
server: Server;
|
||||||
|
}
|
||||||
|
|
||||||
|
const ServerSearchResult = ({ searchResult, server }: ServerSearchResultProps) => {
|
||||||
|
const resultUrl = getUrlForSearchResult(searchResult, server);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Link to={resultUrl}>
|
||||||
|
<h3>{searchResult.name}</h3>
|
||||||
|
</Link>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ServerSearchResult;
|
||||||
32
frontend/src/Lib/Search.ts
Normal file
32
frontend/src/Lib/Search.ts
Normal file
|
|
@ -0,0 +1,32 @@
|
||||||
|
import type { Server } from "./Servers";
|
||||||
|
|
||||||
|
export interface SearchResult {
|
||||||
|
name: string;
|
||||||
|
id: string;
|
||||||
|
serverId: string;
|
||||||
|
type: SearchResultType;
|
||||||
|
episodes: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export type SearchResultType = "movie" | "tv show" | "music";
|
||||||
|
|
||||||
|
export const search = async (searchTerm: string, serverId: string): Promise<Array<SearchResult>> => {
|
||||||
|
return [{
|
||||||
|
name: "Test Result",
|
||||||
|
episodes: 0,
|
||||||
|
id: "awawa",
|
||||||
|
serverId: serverId,
|
||||||
|
type: "movie"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Test result 2",
|
||||||
|
episodes: 0,
|
||||||
|
id: "awawa 2",
|
||||||
|
serverId: serverId,
|
||||||
|
type: "movie"
|
||||||
|
}];
|
||||||
|
}
|
||||||
|
|
||||||
|
export const getUrlForSearchResult = (result: SearchResult, server: Server): string => {
|
||||||
|
return `${server.url}/web/#/details?id=${result.id}`;
|
||||||
|
}
|
||||||
25
frontend/src/Lib/Servers.ts
Normal file
25
frontend/src/Lib/Servers.ts
Normal file
|
|
@ -0,0 +1,25 @@
|
||||||
|
|
||||||
|
export interface Server {
|
||||||
|
name: string;
|
||||||
|
id: string;
|
||||||
|
online?: boolean;
|
||||||
|
owner: string;
|
||||||
|
url: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const getServerList = async (): Promise<Array<Server>> => {
|
||||||
|
return [{
|
||||||
|
id: "asdf",
|
||||||
|
name: "test server",
|
||||||
|
owner: "meeeee",
|
||||||
|
url: "https://jellyfin.foxhawk.co.uk",
|
||||||
|
online: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "qwer",
|
||||||
|
name: "test server 2",
|
||||||
|
owner: "someone else",
|
||||||
|
url: "https://jellyfin.foxhawk.co.uk",
|
||||||
|
online: true
|
||||||
|
}];
|
||||||
|
}
|
||||||
39
frontend/src/Pages/Search/Search.tsx
Normal file
39
frontend/src/Pages/Search/Search.tsx
Normal file
|
|
@ -0,0 +1,39 @@
|
||||||
|
import { useEffect, useState } from "react";
|
||||||
|
import { getServerList, type Server } from "../../Lib/Servers";
|
||||||
|
import ServerSearch from "../../Components/ServerSearch/ServerSearch";
|
||||||
|
import { useNavigate, useSearchParams } from "react-router-dom";
|
||||||
|
import { Spinner } from "react-bootstrap";
|
||||||
|
|
||||||
|
|
||||||
|
const Search = () => {
|
||||||
|
const [searchParams] = useSearchParams();
|
||||||
|
const [servers, setServers] = useState<Array<Server>>([]);
|
||||||
|
const navigate = useNavigate();
|
||||||
|
|
||||||
|
const searchTerm = searchParams.get("search") || "";
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (searchTerm === "") {
|
||||||
|
alert(`Error search term missing: ${searchTerm}`);
|
||||||
|
navigate("/");
|
||||||
|
}
|
||||||
|
|
||||||
|
getServerList().then(servers => {
|
||||||
|
setServers(servers);
|
||||||
|
}).catch(e => {
|
||||||
|
alert(e);
|
||||||
|
});
|
||||||
|
}, [searchTerm]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{servers.length > 0 ? servers.map(server => {
|
||||||
|
return <ServerSearch searchTerm={searchTerm} server={server} />
|
||||||
|
})
|
||||||
|
:
|
||||||
|
<Spinner />}
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Search;
|
||||||
1
frontend/src/assets/react.svg
Normal file
1
frontend/src/assets/react.svg
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
<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="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
|
||||||
|
After Width: | Height: | Size: 4 KiB |
12
frontend/src/index.tsx
Normal file
12
frontend/src/index.tsx
Normal file
|
|
@ -0,0 +1,12 @@
|
||||||
|
import ServerList from "./Components/ServerList/ServerList"
|
||||||
|
|
||||||
|
const Index = () => {
|
||||||
|
return (
|
||||||
|
<div style={{ width: "100%", padding: "20px", display: "flex", flexDirection: "column", alignItems: "center" }}>
|
||||||
|
<h1>Available Servers</h1>
|
||||||
|
<ServerList servers={[{ name: "test", online: false, linkTo: "" }, { name: "test", online: false, linkTo: "" }, { name: "test", online: false, linkTo: "" }, { name: "test", online: false, linkTo: "" },]} />
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Index
|
||||||
19
frontend/src/main.tsx
Normal file
19
frontend/src/main.tsx
Normal file
|
|
@ -0,0 +1,19 @@
|
||||||
|
import { StrictMode } from 'react'
|
||||||
|
import { createRoot } from 'react-dom/client'
|
||||||
|
import "bootstrap/dist/css/bootstrap.min.css";
|
||||||
|
import Index from './index.tsx'
|
||||||
|
import { BrowserRouter, Route, Routes } from 'react-router-dom'
|
||||||
|
import Navbar from './Components/Navbar/Navbar.tsx'
|
||||||
|
import Search from './Pages/Search/Search.tsx';
|
||||||
|
|
||||||
|
createRoot(document.getElementById('root')!).render(
|
||||||
|
<StrictMode>
|
||||||
|
<BrowserRouter>
|
||||||
|
<Navbar />
|
||||||
|
<Routes>
|
||||||
|
<Route path="/" element={<Index />} />
|
||||||
|
<Route path="/search" element={<Search />} />
|
||||||
|
</Routes>
|
||||||
|
</BrowserRouter>
|
||||||
|
</StrictMode>,
|
||||||
|
)
|
||||||
28
frontend/tsconfig.app.json
Normal file
28
frontend/tsconfig.app.json
Normal file
|
|
@ -0,0 +1,28 @@
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
||||||
|
"target": "ES2022",
|
||||||
|
"useDefineForClassFields": true,
|
||||||
|
"lib": ["ES2022", "DOM", "DOM.Iterable"],
|
||||||
|
"module": "ESNext",
|
||||||
|
"types": ["vite/client"],
|
||||||
|
"skipLibCheck": true,
|
||||||
|
|
||||||
|
/* Bundler mode */
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"allowImportingTsExtensions": true,
|
||||||
|
"verbatimModuleSyntax": true,
|
||||||
|
"moduleDetection": "force",
|
||||||
|
"noEmit": true,
|
||||||
|
"jsx": "react-jsx",
|
||||||
|
|
||||||
|
/* Linting */
|
||||||
|
"strict": true,
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true,
|
||||||
|
"erasableSyntaxOnly": true,
|
||||||
|
"noFallthroughCasesInSwitch": true,
|
||||||
|
"noUncheckedSideEffectImports": true
|
||||||
|
},
|
||||||
|
"include": ["src"]
|
||||||
|
}
|
||||||
|
|
@ -1,27 +1,7 @@
|
||||||
{
|
{
|
||||||
"include": [
|
"files": [],
|
||||||
"**/*",
|
"references": [
|
||||||
"**/.server/**/*",
|
{ "path": "./tsconfig.app.json" },
|
||||||
"**/.client/**/*",
|
{ "path": "./tsconfig.node.json" }
|
||||||
".react-router/types/**/*"
|
]
|
||||||
],
|
|
||||||
"compilerOptions": {
|
|
||||||
"lib": ["DOM", "DOM.Iterable", "ES2022"],
|
|
||||||
"types": ["node", "vite/client"],
|
|
||||||
"target": "ES2022",
|
|
||||||
"module": "ES2022",
|
|
||||||
"moduleResolution": "bundler",
|
|
||||||
"jsx": "react-jsx",
|
|
||||||
"rootDirs": [".", "./.react-router/types"],
|
|
||||||
"baseUrl": ".",
|
|
||||||
"paths": {
|
|
||||||
"~/*": ["./app/*"]
|
|
||||||
},
|
|
||||||
"esModuleInterop": true,
|
|
||||||
"verbatimModuleSyntax": true,
|
|
||||||
"noEmit": true,
|
|
||||||
"resolveJsonModule": true,
|
|
||||||
"skipLibCheck": true,
|
|
||||||
"strict": true
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
26
frontend/tsconfig.node.json
Normal file
26
frontend/tsconfig.node.json
Normal file
|
|
@ -0,0 +1,26 @@
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
|
||||||
|
"target": "ES2023",
|
||||||
|
"lib": ["ES2023"],
|
||||||
|
"module": "ESNext",
|
||||||
|
"types": ["node"],
|
||||||
|
"skipLibCheck": true,
|
||||||
|
|
||||||
|
/* Bundler mode */
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"allowImportingTsExtensions": true,
|
||||||
|
"verbatimModuleSyntax": true,
|
||||||
|
"moduleDetection": "force",
|
||||||
|
"noEmit": true,
|
||||||
|
|
||||||
|
/* Linting */
|
||||||
|
"strict": true,
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true,
|
||||||
|
"erasableSyntaxOnly": true,
|
||||||
|
"noFallthroughCasesInSwitch": true,
|
||||||
|
"noUncheckedSideEffectImports": true
|
||||||
|
},
|
||||||
|
"include": ["vite.config.ts"]
|
||||||
|
}
|
||||||
|
|
@ -1,8 +1,7 @@
|
||||||
import { reactRouter } from "@react-router/dev/vite";
|
import { defineConfig } from 'vite'
|
||||||
import tailwindcss from "@tailwindcss/vite";
|
import react from '@vitejs/plugin-react'
|
||||||
import { defineConfig } from "vite";
|
|
||||||
import tsconfigPaths from "vite-tsconfig-paths";
|
|
||||||
|
|
||||||
|
// https://vite.dev/config/
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
plugins: [tailwindcss(), reactRouter(), tsconfigPaths()],
|
plugins: [react()],
|
||||||
});
|
})
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue