фронтенд настройка

.gitignore

@@ -1,5 +1,6 @@
 node_modules/
-dist/
+**/build
+**/.cache
 .env
 *.log
 *.sqlite

eslint.config.js

@@ -12,7 +12,7 @@ import globals from 'globals';
 export default [
     {
         files: ['src/**/*.ts', 'src/**/*.tsx', 'eslint.config.js'],
-        ignores: ['dist/**'],
+        ignores: ['**/build/**'],
     },
     {
         languageOptions: {

package.json

@@ -3,10 +3,12 @@
   "type": "module",
   "version": "0.0.1",
   "description": "",
-  "main": "dist/index.js",
   "scripts": {
+    "dev": "remix dev --manual",
+    "build": "remix build",
+    "start": "remix-serve ./build/index.js",
     "lint": "npx eslint --fix .",
-    "build": "npm run lint && npx tsc -p ."
+    "typecheck": "tsc"
   },
   "repository": {
     "type": "git",
@@ -18,8 +20,10 @@
   "author": "",
   "license": "MIT",
   "devDependencies": {
+    "@remix-run/dev": "^2.4.0",
     "@types/eslint": "^8.56.0",
     "@types/node": "^18.19.3",
+    "@types/react": "^18.2.45",
     "@typescript-eslint/eslint-plugin": "^6.15.0",
     "@typescript-eslint/parser": "^6.15.0",
     "eslint": "^8.56.0",
@@ -32,11 +36,18 @@
     "lodash": "^4.17.21",
     "prettier": "3.1.1",
     "prisma": "^5.7.1",
+    "tailwindcss": "^3.4.0",
     "ts-node": "^10.9.2",
     "typescript": "^5.3.3"
   },
   "dependencies": {
     "@nextui-org/react": "^2.2.9",
-    "framer-motion": "^10.16.16"
+    "@remix-run/node": "^2.4.0",
+    "@remix-run/react": "^2.4.0",
+    "@remix-run/serve": "^2.4.0",
+    "framer-motion": "^10.16.16",
+    "isbot": "^3.7.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   }
 }

remix.config.js

@@ -0,0 +1,8 @@
+/** @type {import('@remix-run/dev').AppConfig} */
+export default {
+    ignoredRouteFiles: ["**/.*"],
+    appDirectory: "src/app",
+    // assetsBuildDirectory: "public/build",
+    // publicPath: "/build/",
+    // serverBuildPath: "build/index.js",
+  };

remix.env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="@remix-run/dev" />
+/// <reference types="@remix-run/node" />

src/app/coms/navbar.tsx

@@ -0,0 +1,49 @@
+import { Link } from "@remix-run/react";
+import {
+    Navbar, 
+    NavbarBrand, 
+    NavbarContent, 
+    NavbarItem, 
+    NavbarMenuToggle,
+    NavbarMenu,
+    NavbarMenuItem,
+    Button
+  } from "@nextui-org/react";
+  
+export default function NavbarCom() {
+    return(
+        <Navbar>
+        <NavbarBrand>
+            <img src="./favicon.ico" alt="logo" />
+            <p className="font-bold text-inherit">ACME</p>
+        </NavbarBrand>
+        <NavbarContent className="hidden sm:flex gap-4" justify="center">
+          <NavbarItem>
+            <Link color="foreground" to="#">
+              Features
+            </Link>
+          </NavbarItem>
+          <NavbarItem isActive>
+            <Link to="#" aria-current="page">
+              Customers
+            </Link>
+          </NavbarItem>
+          <NavbarItem>
+            <Link color="foreground" to="#">
+              Integrations
+            </Link>
+          </NavbarItem>
+        </NavbarContent>
+        <NavbarContent justify="end">
+          <NavbarItem className="hidden lg:flex">
+            <Link to="#">Login</Link>
+          </NavbarItem>
+          <NavbarItem>
+            <Button as={Link} color="primary" to="#" variant="flat">
+              Sign Up
+            </Button>
+          </NavbarItem>
+        </NavbarContent>
+      </Navbar>
+    )
+}

src/app/root.css

@@ -0,0 +1,8 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+*{
+    margin: 0;
+    box-sizing: border-box;
+}

src/app/root.tsx

@@ -0,0 +1,41 @@
+import type { LinksFunction } from "@remix-run/node";
+import {
+  Links,
+  LiveReload,
+  Meta,
+  Outlet,
+  Scripts,
+  ScrollRestoration,
+} from "@remix-run/react";
+import rootCss from "./root.css"
+import { NextUIProvider } from "@nextui-org/react";
+import NavbarCom from "./coms/navbar";
+
+export const links: LinksFunction = () => [
+  { rel: "stylesheet", href: rootCss},
+  { rel: "icon", href: "./favicon.ico"}
+];
+
+export default function App() {
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <Meta />
+        <Links />
+      </head>
+      <body>
+        <NextUIProvider>
+          <NavbarCom />
+          <main className="bg-background text-foreground">
+            <Outlet />
+          </main>
+          <ScrollRestoration />
+          <Scripts />
+          <LiveReload />
+        </NextUIProvider>
+      </body>
+    </html>
+  );
+}

src/app/routes/_index.tsx

@@ -0,0 +1,9 @@
+import { Button, Input } from "@nextui-org/react";
+
+export default function Index() {
+    return(
+        <>
+        
+        </>
+    )
+}

tailwind.config.js

@@ -0,0 +1,46 @@
+/** @type {import('tailwindcss').Config} */
+
+import colors from "tailwindcss/colors";
+import { nextui }  from "@nextui-org/react";
+
+export default {
+  content: [
+    "./src/app/**/*.{js,jsx,ts,tsx}",
+    "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+      }
+    },
+  },
+  darkMode: "class",
+  plugins: [nextui({
+    defaultTheme: "light",
+    defaultExtendTheme: "light",
+    themes: {
+      light: {
+        colors: {
+          primary: {
+            ...colors.orange,
+            DEFAULT: colors.orange[500],
+          },
+          secondary: {
+            ...colors.gray,
+            DEFAULT: colors.gray[500],
+          },
+          warning: {
+            ...colors.red,
+            foreground: colors.white,
+            DEFAULT: colors.red[500],
+          }
+        },
+      },
+      dark: {
+        colors: {
+        },
+      },
+    }
+  })],
+}
+

tsconfig.json

@@ -1,21 +1,22 @@
 {
+  "include": ["remix.env.d.ts", "**/*.ts", "**/*.tsx"],
   "compilerOptions": {
-    "target": "ES6",                                  
-    "module": "NodeNext",                               
-    "rootDir": "./src",                                  
-    "moduleResolution": "NodeNext",                                                          
-    "outDir": "./dist",                                   
-    "allowSyntheticDefaultImports": true,             
-    "esModuleInterop": true,                             
-    "forceConsistentCasingInFileNames": true,            
-    "strict": true,                                      
-    "skipDefaultLibCheck": true,                      
-    "skipLibCheck": true,
-    "jsx": "preserve"                         
-  },
-  "ts-node": {
-    "pretty": true,
-    "esm": true
-  },
-  
+    "lib": ["DOM", "DOM.Iterable", "ES2022"],
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "jsx": "react-jsx",
+    "moduleResolution": "Bundler",
+    "resolveJsonModule": true,
+    "target": "ES2022",
+    "strict": true,
+    "allowJs": true,
+    "forceConsistentCasingInFileNames": true,
+    "baseUrl": "./src",
+    "rootDir": "./src",
+    "paths": {
+      "~/*": ["./app/*"]
+    },
+
+    "noEmit": true
+  }
 }