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
|
||||
trim_trailing_whitespace = false
|
||||
insert_final_newline = false
|
||||
max_line_length = 150
|
||||
29
frontend/.gitignore
vendored
29
frontend/.gitignore
vendored
|
|
@ -1,7 +1,24 @@
|
|||
.DS_Store
|
||||
.env
|
||||
/node_modules/
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
# React Router
|
||||
/.react-router/
|
||||
/build/
|
||||
node_modules
|
||||
dist
|
||||
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
|
||||
- ⚡️ Hot Module Replacement (HMR)
|
||||
- 📦 Asset bundling and optimization
|
||||
- 🔄 Data loading and mutations
|
||||
- 🔒 TypeScript by default
|
||||
- 🎉 TailwindCSS for styling
|
||||
- 📖 [React Router docs](https://reactrouter.com/)
|
||||
## React Compiler
|
||||
|
||||
## 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
|
||||
npm install
|
||||
```js
|
||||
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
|
||||
npm run dev
|
||||
export default defineConfig([
|
||||
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,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"build": "react-router build",
|
||||
"dev": "react-router dev",
|
||||
"start": "react-router-serve ./build/server/index.js",
|
||||
"typecheck": "react-router typegen && tsc"
|
||||
"dev": "vite",
|
||||
"build": "tsc -b && vite build",
|
||||
"lint": "eslint .",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@react-router/node": "7.10.1",
|
||||
"@react-router/serve": "7.10.1",
|
||||
"axios": "^1.13.2",
|
||||
"bootstrap": "^5.3.8",
|
||||
"immer": "^11.1.0",
|
||||
"isbot": "^5.1.31",
|
||||
"react": "^19.2.3",
|
||||
"react": "^19.2.0",
|
||||
"react-bootstrap": "^2.10.10",
|
||||
"react-dom": "^19.2.3",
|
||||
"react-router": "7.10.1",
|
||||
"sass": "^1.97.1"
|
||||
"react-dom": "^19.2.0",
|
||||
"react-router-dom": "^7.13.0",
|
||||
"sass": "^1.97.3",
|
||||
"scss": "^0.2.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/js": "^9.39.2",
|
||||
"@react-router/dev": "7.10.1",
|
||||
"@tailwindcss/vite": "^4.1.13",
|
||||
"@types/node": "^22",
|
||||
"@eslint/js": "^9.39.1",
|
||||
"@types/node": "^24.10.1",
|
||||
"@types/react": "^19.2.7",
|
||||
"@types/react-dom": "^19.2.3",
|
||||
"eslint": "^9.39.2",
|
||||
"eslint-plugin-react": "^7.37.5",
|
||||
"@vitejs/plugin-react": "^5.1.1",
|
||||
"eslint": "^9.39.1",
|
||||
"eslint-plugin-react-hooks": "^7.0.1",
|
||||
"eslint-plugin-react-refresh": "^0.4.24",
|
||||
"globals": "^16.5.0",
|
||||
"tailwindcss": "^4.1.13",
|
||||
"typescript": "^5.9.2",
|
||||
"typescript-eslint": "^8.50.0",
|
||||
"vite": "^7.1.7",
|
||||
"vite-tsconfig-paths": "^5.1.4"
|
||||
"typescript": "~5.9.3",
|
||||
"typescript-eslint": "^8.48.0",
|
||||
"vite": "^7.3.1"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
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": [
|
||||
"**/*",
|
||||
"**/.server/**/*",
|
||||
"**/.client/**/*",
|
||||
".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
|
||||
}
|
||||
"files": [],
|
||||
"references": [
|
||||
{ "path": "./tsconfig.app.json" },
|
||||
{ "path": "./tsconfig.node.json" }
|
||||
]
|
||||
}
|
||||
|
|
|
|||
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 tailwindcss from "@tailwindcss/vite";
|
||||
import { defineConfig } from "vite";
|
||||
import tsconfigPaths from "vite-tsconfig-paths";
|
||||
import { defineConfig } from 'vite'
|
||||
import react from '@vitejs/plugin-react'
|
||||
|
||||
// https://vite.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [tailwindcss(), reactRouter(), tsconfigPaths()],
|
||||
});
|
||||
plugins: [react()],
|
||||
})
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue