diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..544138b --- /dev/null +++ b/.prettierrc @@ -0,0 +1,3 @@ +{ + "singleQuote": true +} diff --git a/.vite/deps_temp_474a67bf/package.json b/.vite/deps_temp_474a67bf/package.json new file mode 100644 index 0000000..3dbc1ca --- /dev/null +++ b/.vite/deps_temp_474a67bf/package.json @@ -0,0 +1,3 @@ +{ + "type": "module" +} diff --git a/LICENSE.md b/LICENSE.md new file mode 100644 index 0000000..cb92d41 --- /dev/null +++ b/LICENSE.md @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2023 TailAdmin + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/README.md b/README.md new file mode 100644 index 0000000..ad0ee19 --- /dev/null +++ b/README.md @@ -0,0 +1,101 @@ +# TailAdmin React - Free React Tailwind Admin Dashboard Template + +TailAdmin is a free and open-source admin dashboard template built on **React and Tailwind CSS**, providing developers with everything they need to create a comprehensive, data-driven back-end, +dashboard, or admin panel solution for upcoming web projects. + +[![tailwind react admin template](https://ucarecdn.com/d2a6daed-eb9c-4c2f-8a95-4419c450e23a/tailadminreact.jpg)](https://react-demo.tailadmin.com/) + + +With TailAdmin, you get access to all the necessary dashboard UI components, elements, and pages required to build a feature-rich and complete dashboard or admin panel. Whether you're building dashboard or admin panel for a complex web application or a simple website, TailAdmin is the perfect solution to help you get up and running quickly. + +### [✨ Visit Website](https://tailadmin.com/) + +### [🚀 PRO Demo](https://react-demo.tailadmin.com/) +### [🚀 FREE Demo](https://free-react-demo.tailadmin.com/) + +### TailAdmin React PRO vs TailAdmin React FREE Comparison 📊 + +#### [TailAdmin React PRO](https://react-demo.tailadmin.com/) +- 4 Unique Dashboards: Analytics, Ecommerce, Marketing, and CRM (More will be added) +- 120+ Dashboard UI Components +- 200+ Total UI Elements +- 45+ HTML Files +- All Essential Elements and Files +- Full Figma Design Source - As Shown on Demo + +___ + +#### [TailAdmin React FREE](https://free-react-demo.tailadmin.com/) +- 1 Unique Dashboard +- 30+ Dashboard UI Components +- 50+ Total UI Elements +- 10+ HTML Files +- TypeScript Support +- Basic UI Kit Elements and Files +- Figma Design Source - Free Sample +___ + +### [⬇️ Download Now](https://tailadmin.com/download) + +### [⚡ Get PRO Version](https://tailadmin.com/pricing) + +### [📄 Documentation/Installation](https://tailadmin.com/docs) + +### [🖌️ TailAdmin Figma Free Sample](https://www.figma.com/community/file/1214477970819985778) + +### [👉 TailAdmin HTML Version](https://github.com/TailAdmin/tailadmin-free-tailwind-dashboard-template) + +TailAdmin React dashboard template based on Tailwind CSS is a pre-designed starting point for building a web-based dashboard using the React JavaScript library and the Tailwind CSS utility-first framework. This Tailwind CSS + React Dashboard Template - built using Tailwind CSS and **includes pre-built components, such as navigation menus, charts, tables, and forms, which can be easily customized and integrated into a small-to-large React web application**. + +If you're looking for a high-quality **React-Tailwind Dashboard, Admin Panel Template, or UI Kit**, TailAdmin will be the perfect choice for you! + +## TailAdmin React - Installation + +You'll need to install Node.js >=v14.16+ (Recommended Version) (NPM comes along with it) and TailAdmin uses **Vite** for frontend tooling, to peform installation and building production version, please follow these steps from below: + +- Use terminal and navigate to the project (tailadmin-react) root. + +- Then run : npm install + +- Then run : npm run dev + +Now, in the browser go to localhost:5173 + +**For Production Build** +Run : npm run build + +Default build output directory: /dist + +This command will generate a dist as build folder in the root of your template that you can upload to your server. + +## Tons of React Tailwind Components for Dashboard +React and Tailwind are two popular technologies that have taken the web development world by storm. React is a JavaScript library for building user interfaces, while Tailwind is a utility-first CSS framework that makes it easy to style web applications. TailAdmin React Offers 200+ Essential React + Tailwind CSS UI Components that you copy-paste and use with your dashboard projects. That includes - charts, graphs, navbars, tabs, buttons, cards, tables, profile, tabs, forms, modals, app pages, calender, web apps example templates and more... for React and Styled using Tailwind CSS + + + +## Update Logs + +### Version 1.3.7 - [June 20, 2024] + +#### Enhancements + +- **Enhancement 01:** Remove Repetition of DefaultLayout in every Pages +- **Enhancement 02:** Add ClickOutside Component for reduce repeated functionality in Header Message, Notification and User Dropdowns. + +### Version 1.3.6 - [Jan 31, 2024] + +#### Enhancements + +- **Enhancement 01:** Integrate flatpickr in [Date Picker/Form Elements] +- **Enhancement 02:** Change color after select an option [Select Element/Form Elements]. +- **Enhancement 03:** Make it functional [Multiselect Dropdown/Form Elements]. +- **Enhancement 04:** Make best value editable [Pricing Table One/Pricing Table]. +- **Enhancement 05:** Rearrange Folder structure. + +### Version 1.2.0 - [Apr 28, 2023] + +- Add Typescript in TailAdmin React. + +### Version 1.0.0 - Initial Release - [Mar 13, 2023] + +- Initial release of TailAdmin React. \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..7c83ab2 --- /dev/null +++ b/index.html @@ -0,0 +1,13 @@ + + + + + + + TailAdmin - Tailwind CSS Admin Dashboard Template + + +
+ + + diff --git a/package.json b/package.json index fcb55dc..6272484 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "name": "tailadmin-react-free", + "name": "ThriveX", "private": true, "version": "1.3.7", "type": "module", @@ -9,9 +9,9 @@ "preview": "vite preview" }, "author": { - "name": "TailAdmin", - "email": "hello@tailadmin.com", - "url": "https://tailadmin.com" + "name": "YuYang", + "email": "liuyuyang1024@yeah.net", + "url": "https://blog.liuyuyang.net" }, "dependencies": { "apexcharts": "^3.41.0", @@ -41,4 +41,4 @@ "vite": "^4.4.7", "webpack": "^5.88.2" } -} +} \ No newline at end of file diff --git a/public/favicon.ico b/public/favicon.ico new file mode 100644 index 0000000..cf3128a Binary files /dev/null and b/public/favicon.ico differ diff --git a/src/App.tsx b/src/App.tsx new file mode 100644 index 0000000..c04389e --- /dev/null +++ b/src/App.tsx @@ -0,0 +1,149 @@ +import { useEffect, useState } from 'react'; +import { Route, Routes, useLocation } from 'react-router-dom'; + +import Loader from './common/Loader'; +import PageTitle from './components/PageTitle'; +import SignIn from './pages/Authentication/SignIn'; +import SignUp from './pages/Authentication/SignUp'; +import Calendar from './pages/Calendar'; +import Chart from './pages/Chart'; +import ECommerce from './pages/Dashboard/ECommerce'; +import FormElements from './pages/Form/FormElements'; +import FormLayout from './pages/Form/FormLayout'; +import Profile from './pages/Profile'; +import Settings from './pages/Settings'; +import Tables from './pages/Tables'; +import Alerts from './pages/UiElements/Alerts'; +import Buttons from './pages/UiElements/Buttons'; +import DefaultLayout from './layout/DefaultLayout'; + +function App() { + const [loading, setLoading] = useState(true); + const { pathname } = useLocation(); + + useEffect(() => { + window.scrollTo(0, 0); + }, [pathname]); + + useEffect(() => { + setTimeout(() => setLoading(false), 1000); + }, []); + + return loading ? ( + + ) : ( + + + + + + + } + /> + + + + } + /> + + + + + } + /> + + + + + } + /> + + + + + } + /> + + + + + } + /> + + + + + } + /> + + + + + } + /> + + + + + } + /> + + + + + } + /> + + + + + } + /> + + + + + } + /> + + + ); +} + +export default App; diff --git a/src/pages/Calendar.tsx b/src/pages/Calendar.tsx new file mode 100644 index 0000000..d291825 --- /dev/null +++ b/src/pages/Calendar.tsx @@ -0,0 +1,273 @@ +import Breadcrumb from '../components/Breadcrumbs/Breadcrumb'; + +const Calendar = () => { + return ( + <> + + + {/* */} +
+ + + + + + + + + + + + + + {/* */} + + + + + + + + + + {/* */} + {/* */} + + + + + + + + + + {/* */} + {/* */} + + + + + + + + + + {/* */} + {/* */} + + + + + + + + + + {/* */} + {/* */} + + + + + + + + + + {/* */} + +
+ Sunday + Sun + + Monday + Mon + + Tuesday + Tue + + Wednesday + Wed + + Thursday + Thur + + Friday + Fri + + Saturday + Sat +
+ + 1 + +
+ + More + +
+ + Redesign Website + + + 1 Dec - 2 Dec + +
+
+ 		+ + 2 + + + + 3 + + + + 4 + + + + 5 + + + + 6 + + + + 7 + +
+ + 8 + + + + 9 + + + + 10 + + + + 11 + + + + 12 + + + + 13 + + + + 14 + +
+ + 15 + + + + 16 + + + + 17 + + + + 18 + + + + 19 + + + + 20 + + + + 21 + +
+ + 22 + + + + 23 + + + + 24 + + + + 25 + +
+ + More + +
+ + App Design + + + 25 Dec - 27 Dec + +
+
+ 		+ + 26 + + + + 27 + + + + 28 + +
+ + 29 + + + + 30 + + + + 31 + + + + 1 + + + + 2 + + + + 3 + + + + 4 + +
+
+ {/* */} + + ); +}; + +export default Calendar; diff --git a/src/pages/Create/index.tsx b/src/pages/Create/index.tsx index 650115d..b750507 100644 --- a/src/pages/Create/index.tsx +++ b/src/pages/Create/index.tsx @@ -4,8 +4,6 @@ const Create = () => { return ( <> - - ); }; diff --git a/tailwind.config.cjs b/tailwind.config.cjs new file mode 100644 index 0000000..345dfac --- /dev/null +++ b/tailwind.config.cjs @@ -0,0 +1,254 @@ +const defaultTheme = require('tailwindcss/defaultTheme') + +/** @type {import('tailwindcss').Config} */ +module.exports = { + content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'], + darkMode: 'class', + theme: { + fontFamily: { + satoshi: ['Satoshi', 'sans-serif'], + }, + screens: { + '2xsm': '375px', + xsm: '425px', + '3xl': '2000px', + ...defaultTheme.screens, + }, + extend: { + colors: { + current: 'currentColor', + transparent: 'transparent', + white: '#FFFFFF', + black: '#1C2434', + 'black-2': '#010101', + body: '#64748B', + bodydark: '#AEB7C0', + bodydark1: '#DEE4EE', + bodydark2: '#8A99AF', + primary: '#3C50E0', + secondary: '#80CAEE', + stroke: '#E2E8F0', + gray: '#EFF4FB', + graydark: '#333A48', + 'gray-2': '#F7F9FC', + 'gray-3': '#FAFAFA', + whiten: '#F1F5F9', + whiter: '#F5F7FD', + boxdark: '#24303F', + 'boxdark-2': '#1A222C', + strokedark: '#2E3A47', + 'form-strokedark': '#3d4d60', + 'form-input': '#1d2a39', + 'meta-1': '#DC3545', + 'meta-2': '#EFF2F7', + 'meta-3': '#10B981', + 'meta-4': '#313D4A', + 'meta-5': '#259AE6', + 'meta-6': '#FFBA00', + 'meta-7': '#FF6766', + 'meta-8': '#F0950C', + 'meta-9': '#E5E7EB', + success: '#219653', + danger: '#D34053', + warning: '#FFA70B', + }, + fontSize: { + 'title-xxl': ['44px', '55px'], + 'title-xl': ['36px', '45px'], + 'title-xl2': ['33px', '45px'], + 'title-lg': ['28px', '35px'], + 'title-md': ['24px', '30px'], + 'title-md2': ['26px', '30px'], + 'title-sm': ['20px', '26px'], + 'title-xsm': ['18px', '24px'], + }, + spacing: { + 4.5: '1.125rem', + 5.5: '1.375rem', + 6.5: '1.625rem', + 7.5: '1.875rem', + 8.5: '2.125rem', + 9.5: '2.375rem', + 10.5: '2.625rem', + 11: '2.75rem', + 11.5: '2.875rem', + 12.5: '3.125rem', + 13: '3.25rem', + 13.5: '3.375rem', + 14: '3.5rem', + 14.5: '3.625rem', + 15: '3.75rem', + 15.5: '3.875rem', + 16: '4rem', + 16.5: '4.125rem', + 17: '4.25rem', + 17.5: '4.375rem', + 18: '4.5rem', + 18.5: '4.625rem', + 19: '4.75rem', + 19.5: '4.875rem', + 21: '5.25rem', + 21.5: '5.375rem', + 22: '5.5rem', + 22.5: '5.625rem', + 24.5: '6.125rem', + 25: '6.25rem', + 25.5: '6.375rem', + 26: '6.5rem', + 27: '6.75rem', + 27.5: '6.875rem', + 29: '7.25rem', + 29.5: '7.375rem', + 30: '7.5rem', + 31: '7.75rem', + 32.5: '8.125rem', + 34: '8.5rem', + 34.5: '8.625rem', + 35: '8.75rem', + 36.5: '9.125rem', + 37.5: '9.375rem', + 39: '9.75rem', + 39.5: '9.875rem', + 40: '10rem', + 42.5: '10.625rem', + 44: '11rem', + 45: '11.25rem', + 46: '11.5rem', + 47.5: '11.875rem', + 49: '12.25rem', + 50: '12.5rem', + 52: '13rem', + 52.5: '13.125rem', + 54: '13.5rem', + 54.5: '13.625rem', + 55: '13.75rem', + 55.5: '13.875rem', + 59: '14.75rem', + 60: '15rem', + 62.5: '15.625rem', + 65: '16.25rem', + 67: '16.75rem', + 67.5: '16.875rem', + 70: '17.5rem', + 72.5: '18.125rem', + 73: '18.25rem', + 75: '18.75rem', + 90: '22.5rem', + 94: '23.5rem', + 95: '23.75rem', + 100: '25rem', + 115: '28.75rem', + 125: '31.25rem', + 132.5: '33.125rem', + 150: '37.5rem', + 171.5: '42.875rem', + 180: '45rem', + 187.5: '46.875rem', + 203: '50.75rem', + 230: '57.5rem', + 242.5: '60.625rem', + }, + maxWidth: { + 2.5: '0.625rem', + 3: '0.75rem', + 4: '1rem', + 11: '2.75rem', + 13: '3.25rem', + 14: '3.5rem', + 15: '3.75rem', + 22.5: '5.625rem', + 25: '6.25rem', + 30: '7.5rem', + 34: '8.5rem', + 35: '8.75rem', + 40: '10rem', + 42.5: '10.625rem', + 44: '11rem', + 45: '11.25rem', + 70: '17.5rem', + 90: '22.5rem', + 94: '23.5rem', + 125: '31.25rem', + 132.5: '33.125rem', + 142.5: '35.625rem', + 150: '37.5rem', + 180: '45rem', + 203: '50.75rem', + 230: '57.5rem', + 242.5: '60.625rem', + 270: '67.5rem', + 280: '70rem', + 292.5: '73.125rem', + }, + maxHeight: { + 35: '8.75rem', + 70: '17.5rem', + 90: '22.5rem', + 550: '34.375rem', + 300: '18.75rem', + }, + minWidth: { + 22.5: '5.625rem', + 42.5: '10.625rem', + 47.5: '11.875rem', + 75: '18.75rem', + }, + zIndex: { + 999999: '999999', + 99999: '99999', + 9999: '9999', + 999: '999', + 99: '99', + 9: '9', + 1: '1', + }, + opacity: { + 65: '.65', + }, + backgroundImage: { + video: "url('../images/video/video.png')", + }, + content: { + 'icon-copy': 'url("../images/icon/icon-copy-alt.svg")', + }, + transitionProperty: { width: 'width', stroke: 'stroke' }, + borderWidth: { + 6: '6px', + }, + boxShadow: { + default: '0px 8px 13px -3px rgba(0, 0, 0, 0.07)', + card: '0px 1px 3px rgba(0, 0, 0, 0.12)', + 'card-2': '0px 1px 2px rgba(0, 0, 0, 0.05)', + switcher: + '0px 2px 4px rgba(0, 0, 0, 0.2), inset 0px 2px 2px #FFFFFF, inset 0px -1px 1px rgba(0, 0, 0, 0.1)', + 'switch-1': '0px 0px 5px rgba(0, 0, 0, 0.15)', + 1: '0px 1px 3px rgba(0, 0, 0, 0.08)', + 2: '0px 1px 4px rgba(0, 0, 0, 0.12)', + 3: '0px 1px 5px rgba(0, 0, 0, 0.14)', + 4: '0px 4px 10px rgba(0, 0, 0, 0.12)', + 5: '0px 1px 1px rgba(0, 0, 0, 0.15)', + 6: '0px 3px 15px rgba(0, 0, 0, 0.1)', + 7: '-5px 0 0 #313D4A, 5px 0 0 #313D4A', + 8: '1px 0 0 #313D4A, -1px 0 0 #313D4A, 0 1px 0 #313D4A, 0 -1px 0 #313D4A, 0 3px 13px rgb(0 0 0 / 8%)', + }, + dropShadow: { + 1: '0px 1px 0px #E2E8F0', + 2: '0px 1px 4px rgba(0, 0, 0, 0.12)', + }, + keyframes: { + rotating: { + '0%, 100%': { transform: 'rotate(360deg)' }, + '50%': { transform: 'rotate(0deg)' }, + }, + }, + animation: { + 'ping-once': 'ping 5s cubic-bezier(0, 0, 0.2, 1)', + rotating: 'rotating 30s linear infinite', + 'spin-1.5': 'spin 1.5s linear infinite', + 'spin-2': 'spin 2s linear infinite', + 'spin-3': 'spin 3s linear infinite', + }, + }, + }, + plugins: [], +}