├── .eslintrc.cjs ├── .gitignore ├── README.md ├── index.html ├── package-lock.json ├── package.json ├── postcss.config.js ├── public ├── 105.jpg ├── 27.jpg ├── 60.jpg ├── AI.png ├── applelogo.png ├── contactus.png ├── image.jpg ├── night.jpg ├── parasite.jpg ├── pic.jpg ├── sanf.jpg └── vite.svg ├── src ├── App.css ├── App.jsx ├── GlobalContext.jsx ├── assets │ └── react.svg ├── components │ └── layout │ │ ├── ErrorPage.jsx │ │ ├── Footer.jsx │ │ ├── HomeLayout.jsx │ │ ├── NavBar.jsx │ │ ├── Protected.jsx │ │ └── Spinner.jsx ├── config │ └── EnvironmentVariables.js ├── form │ ├── Form1.jsx │ └── ReactForm.jsx ├── index.css ├── loginPage │ └── Login.jsx ├── main.jsx ├── pages │ ├── about │ │ ├── About.jsx │ │ └── components │ │ │ ├── Side1.jsx │ │ │ ├── Side2.jsx │ │ │ ├── Side3.jsx │ │ │ ├── Side4.jsx │ │ │ ├── Side5.jsx │ │ │ └── SideNav.jsx │ ├── admin │ │ ├── Admin.jsx │ │ ├── AdminLayout.jsx │ │ ├── DashBoard.jsx │ │ ├── Settings.jsx │ │ └── Users.jsx │ ├── animations │ │ └── Select.jsx │ ├── contact │ │ └── Contact.jsx │ ├── dynamic │ │ └── Dynamic.jsx │ ├── home │ │ └── Home.jsx │ ├── login │ │ ├── Login.jsx │ │ ├── Login2.jsx │ │ └── SignUp.jsx │ ├── movies │ │ └── Movies.jsx │ ├── pricing │ │ └── Pricing.jsx │ └── series │ │ └── Series.jsx ├── registerPage │ └── Register.jsx ├── store │ └── useTheme.jsx └── table │ ├── MatReactTable.jsx │ ├── Table.jsx │ └── Table1.jsx ├── tailwind.config.js └── vite.config.js /.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { browser: true, es2020: true }, 4 | extends: [ 5 | 'eslint:recommended', 6 | 'plugin:react/recommended', 7 | 'plugin:react/jsx-runtime', 8 | 'plugin:react-hooks/recommended', 9 | ], 10 | ignorePatterns: ['dist', '.eslintrc.cjs'], 11 | parserOptions: { ecmaVersion: 'latest', sourceType: 'module' }, 12 | settings: { react: { version: '18.2' } }, 13 | plugins: ['react-refresh'], 14 | rules: { 15 | 'react/jsx-no-target-blank': 'off', 16 | 'react-refresh/only-export-components': [ 17 | 'warn', 18 | { allowConstantExport: true }, 19 | ], 20 | }, 21 | } 22 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tailwind-project", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "axios": "^1.6.7", 14 | "framer-motion": "^11.0.18", 15 | "js-cookie": "^3.0.5", 16 | "material-react-table": "^2.12.1", 17 | "react": "^18.2.0", 18 | "react-dom": "^18.2.0", 19 | "react-hook-form": "^7.51.0", 20 | "react-icons": "^5.0.1", 21 | "react-router-dom": "^6.22.0", 22 | "zustand": "^4.5.2" 23 | }, 24 | "devDependencies": { 25 | "@types/react": "^18.2.55", 26 | "@types/react-dom": "^18.2.19", 27 | "@vitejs/plugin-react": "^4.2.1", 28 | "autoprefixer": "^10.4.17", 29 | "eslint": "^8.56.0", 30 | "eslint-plugin-react": "^7.33.2", 31 | "eslint-plugin-react-hooks": "^4.6.0", 32 | "eslint-plugin-react-refresh": "^0.4.5", 33 | "postcss": "^8.4.35", 34 | "tailwindcss": "^3.4.1", 35 | "vite": "^5.1.0" 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /public/105.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kprashant544/Tailwind-Website-React/522343fcd554649559aacb6479861d68ed97559d/public/105.jpg -------------------------------------------------------------------------------- /public/27.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kprashant544/Tailwind-Website-React/522343fcd554649559aacb6479861d68ed97559d/public/27.jpg -------------------------------------------------------------------------------- /public/60.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kprashant544/Tailwind-Website-React/522343fcd554649559aacb6479861d68ed97559d/public/60.jpg -------------------------------------------------------------------------------- /public/AI.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kprashant544/Tailwind-Website-React/522343fcd554649559aacb6479861d68ed97559d/public/AI.png -------------------------------------------------------------------------------- /public/applelogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kprashant544/Tailwind-Website-React/522343fcd554649559aacb6479861d68ed97559d/public/applelogo.png -------------------------------------------------------------------------------- /public/contactus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kprashant544/Tailwind-Website-React/522343fcd554649559aacb6479861d68ed97559d/public/contactus.png -------------------------------------------------------------------------------- /public/image.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kprashant544/Tailwind-Website-React/522343fcd554649559aacb6479861d68ed97559d/public/image.jpg -------------------------------------------------------------------------------- /public/night.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kprashant544/Tailwind-Website-React/522343fcd554649559aacb6479861d68ed97559d/public/night.jpg -------------------------------------------------------------------------------- /public/parasite.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kprashant544/Tailwind-Website-React/522343fcd554649559aacb6479861d68ed97559d/public/parasite.jpg -------------------------------------------------------------------------------- /public/pic.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kprashant544/Tailwind-Website-React/522343fcd554649559aacb6479861d68ed97559d/public/pic.jpg -------------------------------------------------------------------------------- /public/sanf.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kprashant544/Tailwind-Website-React/522343fcd554649559aacb6479861d68ed97559d/public/sanf.jpg -------------------------------------------------------------------------------- /public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kprashant544/Tailwind-Website-React/522343fcd554649559aacb6479861d68ed97559d/src/App.css -------------------------------------------------------------------------------- /src/App.jsx: -------------------------------------------------------------------------------- 1 | import { Routes, Route } from "react-router-dom"; 2 | import HomeLayout from "./components/layout/HomeLayout"; 3 | // import About from "./pages/about/About"; 4 | import Contact from "./pages/contact/Contact"; 5 | import ErrorPage from "./components/layout/ErrorPage"; 6 | import Pricing from "./pages/pricing/Pricing"; 7 | import Movies from "./pages/movies/Movies"; 8 | import Series from "./pages/series/Series"; 9 | import Home from "./pages/home/Home"; 10 | // import Login from "./pages/login/Login"; 11 | import Login2 from "./pages/login/Login2"; 12 | import SignUp from "./pages/login/SignUp"; 13 | import Admin from "./pages/admin/Admin"; 14 | import Protected from "./components/layout/Protected"; 15 | import AdminLayout from "./pages/admin/AdminLayout"; 16 | import Users from "./pages/admin/Users"; 17 | import Settings from "./pages/admin/Settings"; 18 | import DashBoard from "./pages/admin/DashBoard"; 19 | import Dynamic from "./pages/dynamic/Dynamic"; 20 | import About from "./pages/about/About"; 21 | import Side1 from "./pages/about/components/Side1"; 22 | import GlobalContext from "./GlobalContext.jsx"; 23 | import { useState } from "react"; 24 | import ReactForm from "./form/ReactForm.jsx"; 25 | import Table from "./table/Table.jsx"; 26 | import MatReactTable from "./table/MatReactTable.jsx"; 27 | import Form1 from "./form/Form1.jsx"; 28 | import Login from "./loginPage/Login.jsx"; 29 | import Register from "./registerPage/Register.jsx"; 30 | import Select from "./pages/animations/Select.jsx"; 31 | 32 | function App() { 33 | const [theme, setTheme] = useState({ 34 | color: "white", 35 | backgroundColor: "black", 36 | }); 37 | return ( 38 | <> 39 | 40 | 41 | }> 42 | } /> 43 | } /> 44 | 48 | 49 | 50 | } 51 | /> 52 | 53 | } /> 54 | } /> 55 | } /> 56 | } /> 57 | } /> 58 | } /> 59 | } /> 60 | } /> 61 | } /> 62 | } /> 63 | } /> 64 | } /> 65 | } /> 66 | } /> 67 | 68 | } /> 69 | 70 | {/* Route for the sign in and sign up */} 71 | }> 72 | } /> 73 | }> 74 | } /> 75 | } /> 76 | } /> 77 | 78 | 79 | 80 | 81 | 82 | ); 83 | } 84 | 85 | export default App; 86 | -------------------------------------------------------------------------------- /src/GlobalContext.jsx: -------------------------------------------------------------------------------- 1 | import { createContext } from "react"; 2 | 3 | const GlobalContext = createContext(); 4 | 5 | export default GlobalContext; 6 | -------------------------------------------------------------------------------- /src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/layout/ErrorPage.jsx: -------------------------------------------------------------------------------- 1 | import { NavLink } from "react-router-dom"; 2 | function ErrorPage() { 3 | return ( 4 | <> 5 |
6 |
7 |
8 | {/* image - start */} 9 |
10 | 15 |
16 | {/* image - end */} 17 | {/* content - start */} 18 |
19 |

20 | Error 404 21 |

22 |

23 | Page not found 24 |

25 |

26 | 37 |
38 | {/* content - end */} 39 |
40 |
41 |
42 | 43 | ); 44 | } 45 | 46 | export default ErrorPage; 47 | -------------------------------------------------------------------------------- /src/components/layout/Footer.jsx: -------------------------------------------------------------------------------- 1 | import useTheme from "../../store/useTheme"; 2 | 3 | function Footer() { 4 | const { theme } = useTheme(); 5 | console.log(theme); 6 | return ( 7 | <> 8 | 86 | 87 | ); 88 | } 89 | 90 | export default Footer; 91 | -------------------------------------------------------------------------------- /src/components/layout/HomeLayout.jsx: -------------------------------------------------------------------------------- 1 | import { Outlet } from "react-router-dom"; 2 | import NavBar from "./NavBar"; 3 | import Footer from "./Footer"; 4 | 5 | function HomeLayout() { 6 | return ( 7 | <> 8 |
9 | 10 | 11 | 12 |
13 |
15 |
16 | 17 | ); 18 | } 19 | 20 | export default HomeLayout; 21 | -------------------------------------------------------------------------------- /src/components/layout/NavBar.jsx: -------------------------------------------------------------------------------- 1 | import { NavLink } from "react-router-dom"; 2 | import { FiSearch } from "react-icons/fi"; 3 | // import GlobalContext from "../../GlobalContext"; 4 | // import { useContext } from "react"; 5 | import useTheme from "../../store/useTheme"; 6 | 7 | function NavBar() { 8 | // const contextValues = useContext(GlobalContext); 9 | // const { theme, setTheme } = contextValues; 10 | // const { color, backgroundcolor } = theme; 11 | const { setTheme, theme, setDefault1 } = useTheme(); 12 | console.log(theme); 13 | 14 | // function onSelectTheme(e) { 15 | 16 | // const value = e.target.value; 17 | // console.log(theme); 18 | 19 | // if (value === "theme1") { 20 | // setTheme({ backgroundcolor: "red", color: "yellow" }); 21 | // } else if (value === "theme2") { 22 | // setTheme({ backgroundcolor: "blue", color: "white" }); 23 | // } else if (value === "theme3") { 24 | // setTheme({ backgroundcolor: "green", color: "white" }); 25 | // } else { 26 | // setTheme({ backgroundcolor: "black", color: "white" }); 27 | // } 28 | // } 29 | 30 | //function for zustand(e) 31 | function onZustand(e) { 32 | const value = e.target.value; 33 | 34 | if (value === "lightblue") { 35 | setTheme({ color: "white", bgColor: "blue" }); 36 | } else if (value === "lightgreen") { 37 | setTheme({ color: "white", bgColor: "green" }); 38 | } else { 39 | setDefault1(); 40 | } 41 | } 42 | 43 | return ( 44 | <> 45 |
49 |
50 | 51 | StreamLab 52 | 53 | 73 |
74 | 79 | 80 | {/*
81 | 87 |
*/} 88 |
89 | 90 | 94 | Login 95 | 96 | 97 | Sign Up 98 | 99 | 100 | LoginPage 101 | 102 | 103 | Register 104 | 105 |
106 |
107 | 108 | ); 109 | } 110 | 111 | export default NavBar; 112 | -------------------------------------------------------------------------------- /src/components/layout/Protected.jsx: -------------------------------------------------------------------------------- 1 | import Cookies from "js-cookie"; 2 | import { Navigate, Outlet } from "react-router-dom"; 3 | 4 | function Protected() { 5 | const token = Cookies.get("token"); 6 | 7 | return token ? : ; 8 | } 9 | 10 | export default Protected; 11 | -------------------------------------------------------------------------------- /src/components/layout/Spinner.jsx: -------------------------------------------------------------------------------- 1 | function Spinner() { 2 | return ( 3 |
4 |
5 | 21 |
22 |
23 | ); 24 | } 25 | 26 | export default Spinner; 27 | -------------------------------------------------------------------------------- /src/config/EnvironmentVariables.js: -------------------------------------------------------------------------------- 1 | export const API_URL = "http://localhost:5000"; 2 | 3 | export const API_URL1 = "http://localhost:5001"; -------------------------------------------------------------------------------- /src/form/Form1.jsx: -------------------------------------------------------------------------------- 1 | import axios from "axios"; 2 | import { useForm } from "react-hook-form"; 3 | 4 | import { useEffect, useState } from "react"; 5 | import { API_URL1 } from "../config/EnvironmentVariables"; 6 | 7 | function Form1() { 8 | const [showdata, setShowData] = useState([]); 9 | const [isUpdate, setIsUpdate] = useState(false); 10 | const [updateId, setUpdateId] = useState(null); 11 | const { 12 | register, 13 | handleSubmit, 14 | setValue, 15 | formState: { errors }, 16 | } = useForm(); 17 | 18 | /* GET method */ 19 | async function dataTable() { 20 | try { 21 | let xyz = await axios.get(`${API_URL1}/prisma`); 22 | console.log(xyz.data); 23 | setShowData(xyz.data); 24 | } catch (err) { 25 | window.alert(err.message); 26 | console.log(err.message); 27 | } 28 | } 29 | 30 | /* Post for the Table1 jsx file */ 31 | async function finalSubmission(data) { 32 | try { 33 | console.log(data); 34 | const response = await axios({ 35 | method: "post", 36 | url: "http://localhost:5001/prisma", 37 | data: data, 38 | }); 39 | console.log(response.data); 40 | dataTable(); 41 | } catch (err) { 42 | console.log(err.response.data); 43 | } 44 | } 45 | console.log(errors); 46 | 47 | /* Delete method */ 48 | async function deleteRow(data) { 49 | try { 50 | console.log(data); 51 | const response = await axios({ 52 | method: "delete", 53 | url: `http://localhost:5001/prisma/${data}`, 54 | data: data, 55 | }); 56 | dataTable(); 57 | console.log(response.data); 58 | } catch (err) { 59 | console.log(err); 60 | } 61 | } 62 | 63 | /* Put(Update) Method */ 64 | async function updateRow(data) { 65 | try { 66 | console.log("update", data); 67 | const response = await axios({ 68 | method: "put", 69 | url: `http://localhost:5001/prisma/update/${updateId}}`, 70 | data: { name: data.name, email: data.email }, 71 | }); 72 | dataTable(); 73 | console.log(response.data); 74 | } catch (err) { 75 | console.log(err); 76 | } 77 | } 78 | 79 | /* Function to handle user selection */ 80 | const handleSelect = (data) => { 81 | console.log(data); 82 | setIsUpdate(true); 83 | setUpdateId(data.id); 84 | setValue("name", data.name); 85 | setValue("email", data.email); 86 | }; 87 | 88 | useEffect(() => { 89 | dataTable(); 90 | }, []); 91 | return ( 92 | <> 93 |
94 |

Form Example

95 |
96 |
100 |
101 | 104 | 119 |
{errors?.name?.message}
120 |
121 |
122 | 125 | 133 |
{errors?.email?.message}
134 |
135 | {!isUpdate ? ( 136 | 142 | ) : ( 143 | 149 | )} 150 |
151 |
152 |
153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | {showdata.map((value, index) => ( 164 | 165 | 168 | 171 | 174 | 190 | 191 | ))} 192 | 193 |
IdNameEmailAction
166 | {index + 1} 167 | 169 | {value.name} 170 | 172 | {value.email} 173 | 175 |
176 | 182 | 188 |
189 |
194 |
195 |
196 | 197 | ); 198 | } 199 | 200 | export default Form1; 201 | -------------------------------------------------------------------------------- /src/form/ReactForm.jsx: -------------------------------------------------------------------------------- 1 | import axios from "axios"; 2 | import { useEffect, useState } from "react"; 3 | import { useForm } from "react-hook-form"; 4 | import Spinner from "../components/layout/Spinner"; 5 | import { API_URL } from "../config/EnvironmentVariables"; 6 | function ReactForm() { 7 | const [loading, setLoading] = useState(""); 8 | // const [successmessage, setSuccessMessage] = useState(""); 9 | const [formData, setFormData] = useState(""); 10 | 11 | const { 12 | register, 13 | handleSubmit, 14 | formState: { errors }, 15 | } = useForm(); 16 | 17 | /* Post for the react hook form */ 18 | async function finalSubmission(data) { 19 | try { 20 | console.log(data); 21 | // setSuccessMessage(""); 22 | setLoading(true); 23 | const response = await axios({ 24 | method: "post", 25 | url: "http://localhost:5000/reacthookform", 26 | data: data, 27 | }); 28 | console.log(response.data); 29 | setFormData(response.data); 30 | // setSuccessMessage(response.data); 31 | } catch (err) { 32 | console.log(err.response.data); 33 | } finally { 34 | setLoading(false); 35 | } 36 | } 37 | console.log(errors); 38 | 39 | async function tableData() { 40 | try { 41 | let abc = await axios.get(`${API_URL}/tableData`); 42 | console.log(abc.data); 43 | } catch (err) { 44 | window.alert(err.message); 45 | console.log(err.message); 46 | } 47 | } 48 | 49 | useEffect(() => { 50 | tableData(); 51 | }, []); 52 | 53 | return ( 54 | <> 55 |
56 |
60 |
61 | 64 | 76 |
{errors?.name?.message}
77 |
78 |
79 | 82 | 90 |
{errors?.email?.message}
91 |
92 |
93 | 96 | 104 |
{errors?.password?.message}
105 |
106 |
107 | 118 |
{errors?.gender?.message}
119 |
120 |
121 | 124 | 125 | {" Music"} 126 | 132 | 133 | 134 | {" Sports"} 135 | 141 | 142 | 143 | {" Dancing"} 144 | 150 | 151 |
{errors?.Hobbies?.message}
152 |
153 |
154 |
155 | 156 | 157 |