├── src
    ├── vite-env.d.ts
    ├── layouts
    │   ├── index.ts
    │   ├── DashboardLayout.tsx
    │   └── AuthLayout.tsx
    ├── components
    │   ├── index.ts
    │   ├── shared
    │   │   ├── sidemenu
    │   │   │   ├── SideMenu.css
    │   │   │   ├── SideMenuItem.tsx
    │   │   │   └── SideMenu.tsx
    │   │   └── cards
    │   │   │   └── WhiteCard.tsx
    │   └── jira
    │   │   └── JiraTasks.tsx
    ├── pages
    │   ├── index.ts
    │   ├── 02-objects
    │   │   └── JiraPage.tsx
    │   ├── 01-basic
    │   │   ├── BearPage.tsx
    │   │   └── PersonPage.tsx
    │   ├── dashboard
    │   │   └── DashboardPage.tsx
    │   ├── auth
    │   │   └── LoginPage.tsx
    │   └── 03-slices
    │   │   └── WeddingInvitationPage.tsx
    ├── Root.tsx
    ├── main.tsx
    ├── index.css
    ├── router
    │   └── router.tsx
    └── assets
    │   └── react.svg
├── public
    ├── screenshot.png
    └── vite.svg
├── postcss.config.js
├── vite.config.ts
├── tailwind.config.js
├── tsconfig.node.json
├── .gitignore
├── index.html
├── README.md
├── .eslintrc.cjs
├── tsconfig.json
└── package.json


/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="vite/client" />
2 | 


--------------------------------------------------------------------------------
/src/layouts/index.ts:
--------------------------------------------------------------------------------
1 | 
2 | 
3 | export * from './AuthLayout';
4 | export * from './DashboardLayout';


--------------------------------------------------------------------------------
/public/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Klerith/zustand-mini-curso/HEAD/public/screenshot.png


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | export default {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/src/components/index.ts:
--------------------------------------------------------------------------------
1 | 
2 | 
3 | export * from './jira/JiraTasks';
4 | 
5 | 
6 | export * from './shared/sidemenu/SideMenu';
7 | export * from './shared/cards/WhiteCard';


--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react'
3 | 
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 |   plugins: [react()],
7 | })
8 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('tailwindcss').Config} */
 2 | export default {
 3 |   content: [
 4 |     "./index.html",
 5 |     "./src/**/*.{js,ts,jsx,tsx}",
 6 |   ],
 7 |   theme: {
 8 |     extend: {},
 9 |   },
10 |   plugins: [],
11 | }
12 | 
13 | 


--------------------------------------------------------------------------------
/tsconfig.node.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "composite": true,
 4 |     "skipLibCheck": true,
 5 |     "module": "ESNext",
 6 |     "moduleResolution": "bundler",
 7 |     "allowSyntheticDefaultImports": true
 8 |   },
 9 |   "include": ["vite.config.ts"]
10 | }
11 | 


--------------------------------------------------------------------------------
/src/components/shared/sidemenu/SideMenu.css:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 | 
 5 | #nav a {
 6 |   @apply w-full px-2 inline-flex space-x-2 items-center border-b border-slate-700 py-3 hover:bg-white/5 transition ease-linear duration-150;
 7 | }
 8 | 
 9 | #nav a.active {
10 |   @apply  bg-blue-800;
11 | }


--------------------------------------------------------------------------------
/src/pages/index.ts:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | export * from './dashboard/DashboardPage';
 4 | export * from './01-basic/BearPage';
 5 | export * from './01-basic/PersonPage';
 6 | export * from './02-objects/JiraPage';
 7 | export * from './03-slices/WeddingInvitationPage';
 8 | 
 9 | 
10 | export * from './auth/LoginPage';


--------------------------------------------------------------------------------
/src/Root.tsx:
--------------------------------------------------------------------------------
 1 | import { Navigate, Outlet, useLocation } from 'react-router-dom';
 2 | 
 3 | 
 4 | export const Root = () => {
 5 | 
 6 |   const { pathname } = useLocation();
 7 | 
 8 |   if (pathname === '/') {
 9 |     return <Navigate to="/dashboard" />;
10 |   }
11 |   
12 |   return (
13 |     <main>
14 |       <Outlet />
15 |     </main>
16 |   )
17 | }


--------------------------------------------------------------------------------
/.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 | 


--------------------------------------------------------------------------------
/src/main.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import ReactDOM from 'react-dom/client'
 3 | 
 4 | import './index.css'
 5 | import { RouterProvider } from 'react-router-dom';
 6 | import { router } from './router/router.tsx';
 7 | 
 8 | ReactDOM.createRoot(document.getElementById('root')!).render(
 9 |   <React.StrictMode>
10 |     <RouterProvider router={ router } />
11 |   </React.StrictMode>,
12 | )
13 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Vite + React + TS</title>
 8 |   </head>
 9 |   <body>
10 |     <div id="root"></div>
11 |     <script type="module" src="/src/main.tsx"></script>
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # React + TypeScript + Vite + Zustand + TailwindCSS + ReactRouterDom
 2 | 
 3 | Este es un cascarón de proyecto, siéntete libre de usarlo para tus proyectos.
 4 | 
 5 | <img src="https://github.com/Klerith/zustand-mini-curso/blob/main/public/screenshot.png?raw=true" alt="Dashboard Screenshot">
 6 | 
 7 | 
 8 | 
 9 | ## Instalar
10 | 
11 | 1. Clonar proyecto
12 | 2. Instalar dependencias ```npm install```
13 | 3. Correr en desarrollo ```npm run dev```
14 | 
15 | 


--------------------------------------------------------------------------------
/.eslintrc.cjs:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: { browser: true, es2020: true },
 4 |   extends: [
 5 |     'eslint:recommended',
 6 |     'plugin:@typescript-eslint/recommended',
 7 |     'plugin:react-hooks/recommended',
 8 |   ],
 9 |   ignorePatterns: ['dist', '.eslintrc.cjs'],
10 |   parser: '@typescript-eslint/parser',
11 |   plugins: ['react-refresh'],
12 |   rules: {
13 |     'react-refresh/only-export-components': [
14 |       'warn',
15 |       { allowConstantExport: true },
16 |     ],
17 |   },
18 | }
19 | 


--------------------------------------------------------------------------------
/src/layouts/DashboardLayout.tsx:
--------------------------------------------------------------------------------
 1 | import { SideMenu } from '../components';
 2 | import { Outlet } from 'react-router-dom';
 3 | 
 4 | export const DashboardLayout = () => {
 5 |   return (
 6 |     <div className="bg-slate-200 overflow-y-scroll w-screen h-screen antialiased text-slate-900 selection:bg-blue-900 selection:text-white">
 7 |       <div className="flex flex-row relative w-screen">
 8 |         <SideMenu />
 9 | 
10 |         <div className="w-full p-4">
11 |           <Outlet />
12 |         </div>
13 | 
14 |       </div>
15 | 
16 |     </div>
17 |   );
18 | };


--------------------------------------------------------------------------------
/src/components/shared/cards/WhiteCard.tsx:
--------------------------------------------------------------------------------
 1 | import classNames from 'classnames';
 2 | 
 3 | interface Props {
 4 |   children?: React.ReactNode;
 5 |   centered?: boolean;
 6 |   className?: string;
 7 | }
 8 | 
 9 | 
10 | export const WhiteCard = ( { children, centered, className }: Props ) => {
11 |   return (
12 |     <div className={
13 |       classNames( 'bg-white border rounded-[20px] p-10 shadow-3xl shadow-shadow-500 w-full', className, {
14 |         'text-center': centered,
15 |         'flex flex-col items-center': centered
16 |       } ) }>
17 |       { children }
18 |     </div>
19 |   );
20 | };


--------------------------------------------------------------------------------
/src/pages/02-objects/JiraPage.tsx:
--------------------------------------------------------------------------------
 1 | import { JiraTasks } from '../../components';
 2 | 
 3 | export const JiraPage = () => {
 4 |   return (
 5 |     <>
 6 |       <h1>Tareas</h1>
 7 |       <p>Manejo de estado con objectos de Zustand</p>
 8 |       <hr />
 9 | 
10 |       <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
11 |           
12 |           <JiraTasks title='Pendientes' value='pending' />
13 |           
14 |           <JiraTasks title='Avanzando' value='in-progress' />
15 |           
16 |           <JiraTasks title='Terminadas' value='done' />
17 | 
18 |       </div>
19 | 
20 |       
21 | 
22 | 
23 | 
24 |     </>
25 |   );
26 | };


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "ES2020",
 4 |     "useDefineForClassFields": true,
 5 |     "lib": ["ES2020", "DOM", "DOM.Iterable"],
 6 |     "module": "ESNext",
 7 |     "skipLibCheck": true,
 8 | 
 9 |     /* Bundler mode */
10 |     "moduleResolution": "bundler",
11 |     "allowImportingTsExtensions": true,
12 |     "resolveJsonModule": true,
13 |     "isolatedModules": true,
14 |     "noEmit": true,
15 |     "jsx": "react-jsx",
16 | 
17 |     /* Linting */
18 |     "strict": true,
19 |     "noUnusedLocals": true,
20 |     "noUnusedParameters": true,
21 |     "noFallthroughCasesInSwitch": true
22 |   },
23 |   "include": ["src"],
24 |   "references": [{ "path": "./tsconfig.node.json" }]
25 | }
26 | 


--------------------------------------------------------------------------------
/src/layouts/AuthLayout.tsx:
--------------------------------------------------------------------------------
 1 | 
 2 | import { Outlet } from 'react-router-dom';
 3 | 
 4 | export const AuthLayout = () => {
 5 |   return (
 6 |     <div className="bg-gray-100 flex justify-center items-center h-screen">
 7 |       <div className="w-1/2 h-screen hidden lg:flex lg:flex-col items-center justify-center bg-indigo-700">
 8 |         <span className="text-white font-bold text-9xl">Zustand</span>
 9 |         {/* <img src="https://placehold.co/1440/667fff/ffffff.png?text=Zustand&font=Montserrat"
10 |           alt="Placeholder Image"
11 |           className="object-cover w-full h-full" /> */}
12 |       </div>
13 |       <div className="lg:p-36 md:p-52 sm:20 p-8 w-full lg:w-1/2">
14 |         <Outlet />
15 |       </div>
16 |     </div>
17 |   );
18 | };


--------------------------------------------------------------------------------
/src/components/shared/sidemenu/SideMenuItem.tsx:
--------------------------------------------------------------------------------
 1 | 
 2 | import type { IconType } from 'react-icons';
 3 | import { NavLink } from 'react-router-dom';
 4 | 
 5 | interface Props {
 6 |   href: string;
 7 |   Icon: IconType;
 8 |   title: string;
 9 |   subTitle: string
10 | }
11 | 
12 | 
13 | export const SideMenuItem = ({ href, Icon, title, subTitle }: Props) => {
14 |   return (
15 |     <NavLink
16 |       key={ href }
17 |       to={ href }
18 |       end
19 |     >
20 |       <div>
21 |         <Icon />
22 |       </div>
23 |       <div className="flex flex-col">
24 |         <span className="text-lg font-bold leading-5 text-white">{ title }</span>
25 |         <span className="text-sm text-white/50 hidden md:block">{ subTitle }</span>
26 |       </div>
27 |     </NavLink>
28 |   );
29 | }


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | 
 6 | h1 {
 7 |   @apply text-3xl font-bold text-gray-800;
 8 | }
 9 | 
10 | h2 {
11 |   @apply text-2xl font-semibold text-gray-800;
12 | }
13 | 
14 | hr {
15 |   @apply my-1 border-gray-300 border mb-3;
16 | }
17 | 
18 | button {
19 |   @apply transition-all hover:bg-indigo-800 bg-indigo-600 px-8 py-2 rounded-3xl text-gray-100 font-semibold uppercase tracking-wide shadow-md;
20 | }
21 | 
22 | input:not(.swal2-input)[type=text],input:not(.swal2-input)[type=password], input:not(.swal2-input)[type=email], input:not(.swal2-input)[type=number], input:not(.swal2-input)[type=date], input:not(.swal2-input)[type=time]  {
23 |   @apply w-full border border-gray-300 rounded-md py-2 px-3 focus:outline-none focus:border-blue-500;
24 | }
25 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "zustand-dash",
 3 |   "private": true,
 4 |   "version": "0.0.0",
 5 |   "type": "module",
 6 |   "scripts": {
 7 |     "dev": "vite",
 8 |     "build": "tsc && vite build",
 9 |     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
10 |     "preview": "vite preview"
11 |   },
12 |   "dependencies": {
13 |     "classnames": "^2.3.2",
14 |     "react": "^18.2.0",
15 |     "react-dom": "^18.2.0",
16 |     "react-icons": "^4.11.0",
17 |     "react-router-dom": "^6.16.0"
18 |   },
19 |   "devDependencies": {
20 |     "@types/react": "^18.2.15",
21 |     "@types/react-dom": "^18.2.7",
22 |     "@typescript-eslint/eslint-plugin": "^6.0.0",
23 |     "@typescript-eslint/parser": "^6.0.0",
24 |     "@vitejs/plugin-react": "^4.0.3",
25 |     "autoprefixer": "^10.4.16",
26 |     "eslint": "^8.45.0",
27 |     "eslint-plugin-react-hooks": "^4.6.0",
28 |     "eslint-plugin-react-refresh": "^0.4.3",
29 |     "postcss": "^8.4.31",
30 |     "tailwindcss": "^3.3.3",
31 |     "typescript": "^5.0.2",
32 |     "vite": "^4.4.5"
33 |   }
34 | }
35 | 


--------------------------------------------------------------------------------
/src/pages/01-basic/BearPage.tsx:
--------------------------------------------------------------------------------
 1 | import { WhiteCard } from '../../components';
 2 | 
 3 | export const BearPage = () => {
 4 |   return (
 5 |     <>
 6 |       <h1>Contador de Osos</h1>
 7 |       <p>Manejo de estado simple de Zustand</p>
 8 |       <hr />
 9 | 
10 |       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2">
11 | 
12 |         <WhiteCard centered>
13 |           <h2>Osos Negros</h2>
14 | 
15 |           <div className="flex flex-col md:flex-row">
16 |             <button> +1</button>
17 |             <span className="text-3xl mx-2 lg:mx-10"> 0 </span>
18 |             <button>-1</button>
19 |           </div>
20 | 
21 |         </WhiteCard>
22 | 
23 |         <WhiteCard centered>
24 |           <h2>Osos Polares</h2>
25 | 
26 |           <div className="flex flex-col md:flex-row">
27 |             <button> +1</button>
28 |             <span className="text-3xl mx-2 lg:mx-10"> 0 </span>
29 |             <button>-1</button>
30 | 
31 |           </div>
32 | 
33 |         </WhiteCard>
34 | 
35 |         <WhiteCard centered>
36 |           <h2>Osos Pandas</h2>
37 | 
38 |           <div className="flex flex-col md:flex-row">
39 |             <button> +1</button>
40 |             <span className="text-3xl mx-2 lg:mx-10"> 0 </span>
41 |             <button>-1</button>
42 |           </div>
43 | 
44 |         </WhiteCard>
45 | 
46 | 
47 | 
48 | 
49 |       </div>
50 | 
51 |     </>
52 |   );
53 | };


--------------------------------------------------------------------------------
/src/router/router.tsx:
--------------------------------------------------------------------------------
 1 | import { createBrowserRouter } from 'react-router-dom';
 2 | 
 3 | import { Root } from '../Root';
 4 | import { AuthLayout, DashboardLayout } from '../layouts';
 5 | import { BearPage, Dashboard, JiraPage, LoginPage, PersonPage, WeddingInvitationPage } from '../pages';
 6 | 
 7 | 
 8 | export const router = createBrowserRouter( [
 9 |   {
10 |     path: '/',
11 |     element: <Root />,
12 |     children: [
13 |       /// Dashboard Routes
14 |       {
15 |         path: 'dashboard',
16 |         element: <DashboardLayout />,
17 |         children: [
18 |           {
19 |             path: '',
20 |             element: <Dashboard />
21 |           },
22 |           {
23 |             path: 'bears',
24 |             element: <BearPage />
25 |           },
26 |           {
27 |             path: 'person',
28 |             element: <PersonPage />
29 |           },
30 |           {
31 |             path: 'tasks',
32 |             element: <JiraPage />
33 |           },
34 |           {
35 |             path: 'wedding-invitation',
36 |             element: <WeddingInvitationPage />
37 |           }
38 | 
39 |         ]
40 |       },
41 | 
42 |       /// Auth Routes
43 |       {
44 |         path: 'auth',
45 |         element: <AuthLayout />,
46 |         children: [
47 |           {
48 |             path: 'login',
49 |             element: <LoginPage />
50 |           }
51 |         ]
52 | 
53 |       },
54 | 
55 |     ],
56 |   },
57 | ] );


--------------------------------------------------------------------------------
/public/vite.svg:
--------------------------------------------------------------------------------
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="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>


--------------------------------------------------------------------------------
/src/pages/dashboard/DashboardPage.tsx:
--------------------------------------------------------------------------------
 1 | import { IoAccessibilityOutline, IoHeartOutline, IoListOutline, IoLockClosedOutline, IoPawOutline } from 'react-icons/io5';
 2 | import { WhiteCard } from '../../components';
 3 | 
 4 | export const Dashboard = () => {
 5 |   return (
 6 |     <>
 7 |       <h1>Dashboard</h1>
 8 |       <p>Información colectiva de varios stores de Zustand</p>
 9 |       <hr />
10 | 
11 |       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
12 | 
13 |         <WhiteCard centered>
14 |           <IoPawOutline size={ 50 } className="text-indigo-600" />
15 |           <h2>Osos</h2>
16 |           <p>Información</p>
17 |         </WhiteCard>
18 | 
19 | 
20 |         <WhiteCard centered>
21 |           <IoAccessibilityOutline size={ 50 } className="text-indigo-600" />
22 |           <h2>Persona</h2>
23 |           <p>Información</p>
24 |         </WhiteCard>
25 | 
26 | 
27 |         <WhiteCard centered>
28 |           <IoListOutline size={ 50 } className="text-indigo-600" />
29 |           <h2>Tareas</h2>
30 |           <p>Información</p>
31 |         </WhiteCard>
32 | 
33 | 
34 |         <WhiteCard centered>
35 |           <IoHeartOutline size={ 50 } className="text-indigo-600" />
36 |           <h2>Boda</h2>
37 |           <p>Información</p>
38 |         </WhiteCard>
39 | 
40 | 
41 |         <WhiteCard centered>
42 |           <IoLockClosedOutline size={ 50 } className="text-indigo-600" />
43 |           <h2>Auth</h2>
44 |           <p>Información</p>
45 |         </WhiteCard>
46 | 
47 | 
48 | 
49 |       </div>
50 | 
51 |     </>
52 |   );
53 | };


--------------------------------------------------------------------------------
/src/pages/auth/LoginPage.tsx:
--------------------------------------------------------------------------------
 1 | import { FormEvent } from 'react';
 2 | 
 3 | export const LoginPage = () => {
 4 | 
 5 |   const onSubmit = (event: FormEvent<HTMLFormElement> ) => {
 6 |     event.preventDefault();
 7 |     // const { username, password, remember } = event.target as HTMLFormElement;
 8 |     const { username, password,remember } = event.target as typeof event.target & {
 9 |       username: { value: string };
10 |       password: { value: string };
11 |       remember: { checked: boolean }
12 |     };
13 |     console.log(username.value, password.value, remember.checked);
14 | 
15 |     username.value = '';
16 |     password.value = '';
17 |     remember.checked = false;
18 |   }
19 | 
20 | 
21 |   return (
22 |     <>
23 |       <h1 className="text-2xl font-semibold mb-4">Login</h1>
24 | 
25 |       <form onSubmit={ onSubmit }>
26 | 
27 |         <div className="mb-4">
28 |           <label className="block text-gray-600">Username</label>
29 |           <input type="text" name="username" autoComplete="off" />
30 |         </div>
31 | 
32 |         <div className="mb-4">
33 |           <label className="block text-gray-600">Password</label>
34 |           <input type="password" name="password" autoComplete="off" />
35 |         </div>
36 | 
37 |         <div className="mb-4 flex items-center">
38 |           <input type="checkbox" name="remember" className="text-blue-500" />
39 |           <label className="text-gray-600 ml-2">Remember Me</label>
40 |         </div>
41 |         
42 |         <div className="mb-6 text-blue-500">
43 |           <a href="#" className="hover:underline">Forgot Password?</a>
44 |         </div>
45 | 
46 |         <button type="submit" className="bg-indigo-600">Login</button>
47 |       </form>
48 |       <div className="mt-6 text-blue-500 text-center">
49 |         <a href="#" className="hover:underline">Sign up Here</a>
50 |       </div>
51 |     </>
52 |   );
53 | };


--------------------------------------------------------------------------------
/src/pages/01-basic/PersonPage.tsx:
--------------------------------------------------------------------------------
 1 | import { WhiteCard } from '../../components';
 2 | 
 3 | 
 4 | 
 5 | export const PersonPage = () => {
 6 |   return (
 7 |     <>
 8 |       <h1>Persona</h1>
 9 |       <p>Información que se compartirá a otro store, Session Storage y Firebase</p>
10 |       <hr />
11 | 
12 |       <WhiteCard className="flex items-center justify-center p-12">
13 |         <div className="mx-auto w-full max-w-[550px]">
14 |           <form>
15 |             <div className="-mx-3 flex flex-wrap">
16 |               <div className="w-full px-3 sm:w-1/2">
17 |                 <div className="mb-5">
18 |                   <label
19 |                     className="mb-3 block text-base font-medium text-[#07074D]"
20 |                   >
21 |                     Primer Nombre
22 |                   </label>
23 |                   <input
24 |                     type="text"
25 |                     name="firstName"
26 |                     id="firstName"
27 |                     placeholder="Primer Nombre"
28 |                   />
29 |                 </div>
30 |               </div>
31 |               <div className="w-full px-3 sm:w-1/2">
32 |                 <div className="mb-5">
33 |                   <label
34 |                     className="mb-3 block text-base font-medium text-[#07074D]"
35 |                   >
36 |                     Apellido
37 |                   </label>
38 |                   <input
39 |                     type="text"
40 |                     name="lastName"
41 |                     id="lastName"
42 |                     placeholder="Apellido"
43 |                   />
44 |                 </div>
45 |               </div>
46 |             </div>
47 |   
48 |             <pre className="bg-gray-200 p-5 rounded-[20px]">
49 |               {
50 |                 JSON.stringify({
51 |                   firstName: '',
52 |                   lastName: ''
53 |                 }, null, 2)
54 |               }
55 |             </pre>
56 |           </form>
57 |         </div>
58 |       </WhiteCard>
59 |     </>
60 |   );
61 | };


--------------------------------------------------------------------------------
/src/components/jira/JiraTasks.tsx:
--------------------------------------------------------------------------------
 1 | import { IoCheckmarkCircleOutline, IoEllipsisHorizontalOutline, IoReorderTwoOutline } from 'react-icons/io5';
 2 | 
 3 | interface Props {
 4 |   title: string;
 5 |   value: 'pending' | 'in-progress' | 'done';
 6 | }
 7 | 
 8 | 
 9 | export const JiraTasks = ({ title }: Props) => {
10 |   return (
11 |     <div className="!text-black relative flex flex-col rounded-[20px]  bg-white bg-clip-border shadow-3xl shadow-shadow-500  w-full !p-4 3xl:p-![18px]">
12 | 
13 | 
14 |       {/* Task Header */ }
15 |       <div className="relative flex flex-row justify-between">
16 | 
17 |         <div className="flex items-center justify-center">
18 | 
19 |           <div className="flex h-9 w-9 items-center justify-center rounded-full bg-indigo-100">
20 |             <span className="flex justify-center items-center h-6 w-6 text-brand-500">
21 |               <IoCheckmarkCircleOutline style={ { fontSize: '50px' } } />
22 |             </span>
23 |           </div>
24 | 
25 |           <h4 className="ml-4 text-xl font-bold text-navy-700">{ title }</h4>
26 |         </div>
27 | 
28 |         <button>
29 |           <IoEllipsisHorizontalOutline />
30 |         </button>
31 | 
32 |       </div>
33 | 
34 |       {/* Task Items */ }
35 |       <div className="h-full w-full">
36 | 
37 |         <div className="mt-5 flex items-center justify-between p-2">
38 |           <div className="flex items-center justify-center gap-2">
39 |             <p className="text-base font-bold text-navy-700">
40 |               Tarea número 1
41 |             </p>
42 |           </div>
43 |           <span className=" h-6 w-6 text-navy-700 cursor-pointer">
44 |             <IoReorderTwoOutline />
45 |           </span>
46 |         </div>
47 | 
48 |         <div className="mt-5 flex items-center justify-between p-2">
49 |           <div className="flex items-center justify-center gap-2">
50 |             <p className="text-base font-bold text-navy-700">
51 |               Tarea número 2
52 |             </p>
53 |           </div>
54 |           <span className=" h-6 w-6 text-navy-700 cursor-pointer">
55 |             <IoReorderTwoOutline />
56 |           </span>
57 |         </div>
58 | 
59 |         
60 | 
61 |       </div>
62 |     </div>
63 |   );
64 | };


--------------------------------------------------------------------------------
/src/components/shared/sidemenu/SideMenu.tsx:
--------------------------------------------------------------------------------
 1 | import type { IconType } from 'react-icons';
 2 | import { IoSpeedometerOutline, IoPawOutline, IoLogOutOutline, IoHeartOutline, IoListOutline, IoAccessibilityOutline } from 'react-icons/io5';
 3 | import { NavLink } from 'react-router-dom';
 4 | import './SideMenu.css';
 5 | import { SideMenuItem } from './SideMenuItem';
 6 | 
 7 | 
 8 | interface MenuItem {
 9 |   title: string;
10 |   subTitle: string;
11 |   href: string;
12 |   Icon: IconType;
13 | }
14 | 
15 | const menuItems: MenuItem[] = [
16 |   { title: 'Dashboard', subTitle: 'Visualizar data', href: '/dashboard', Icon: IoSpeedometerOutline },
17 |   { title: 'Osos', subTitle: 'Manejador de osos', href: '/dashboard/bears', Icon: IoPawOutline },
18 |   { title: 'Persona', subTitle: 'Nombre y apellido', href: '/dashboard/person', Icon: IoAccessibilityOutline },
19 |   { title: 'Tareas', subTitle: 'Listado de tareas', href: '/dashboard/tasks', Icon: IoListOutline },
20 |   { title: 'Boda', subTitle: 'Invitados a la boda', href: '/dashboard/wedding-invitation', Icon: IoHeartOutline },
21 | ];
22 | 
23 | 
24 | 
25 | 
26 | export const SideMenu = () => {
27 | 
28 |   return (
29 |     <div id="menu" className="bg-gray-900 min-h-screen z-10 text-slate-300 w-80 left-0 overflow-y-scroll">
30 |       <div id="logo" className="my-4 px-6">
31 |         {/* Title */}
32 |         <h1 className="text-lg md:text-2xl font-bold text-white">
33 |           Zustand
34 |           <span className="text-blue-500 text-xs"> StateManager</span>
35 |           .
36 |         </h1>
37 |         <p className="text-slate-500 text-sm">Manejador de estados simple pero poderoso.</p>
38 |       </div>
39 | 
40 |       {/*  Profile */ }
41 |       <div id="profile" className="px-6 py-10">
42 |         <p className="text-slate-500">Bienvenido,</p>
43 |         <a href="#" className="inline-flex space-x-2 items-center">
44 |           <span>
45 |             <img className="rounded-full w-8 h-8" src="https://images.unsplash.com/photo-1542909168-82c3e7fdca5c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=128&q=80" alt="" />
46 |           </span>
47 |           <span className="text-sm md:text-base font-bold">
48 |             Edward Tompson
49 |           </span>
50 |         </a>
51 |       </div>
52 | 
53 |       {/* Menu Items */ }
54 |       <nav id="nav" className="w-full px-6">
55 | 
56 |         {
57 |           menuItems.map( item =>(
58 |             <SideMenuItem key={item.href} {...item} />
59 |           ) )
60 |         }
61 | 
62 | 
63 | 
64 |         {/* Logout */}
65 |         <NavLink to={'/auth/login'} className="mt-10">
66 |           <div>
67 |             <IoLogOutOutline />
68 |           </div>
69 |           <div className="flex flex-col">
70 |             <span className="text-lg text-slate-300 font-bold leading-5">Logout</span>
71 |             <span className="text-sm text-slate-500 hidden md:block">Cerrar sesión</span>
72 |           </div>
73 |         </NavLink>
74 | 
75 |       </nav>
76 |     </div>
77 |   );
78 | };


--------------------------------------------------------------------------------
/src/assets/react.svg:
--------------------------------------------------------------------------------
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>


--------------------------------------------------------------------------------
/src/pages/03-slices/WeddingInvitationPage.tsx:
--------------------------------------------------------------------------------
  1 | import { WhiteCard } from '../../components';
  2 | 
  3 | 
  4 | 
  5 | export const WeddingInvitationPage = () => {
  6 |   return (
  7 |     <>
  8 |       <h1>Invitación de Boda</h1>
  9 |       <p>Zustand segmentado en slices</p>
 10 |       <hr />
 11 | 
 12 |       <WhiteCard className="flex items-center justify-center p-12">
 13 |         <div className="mx-auto w-full max-w-[550px]">
 14 |           <form>
 15 |             <div className="-mx-3 flex flex-wrap">
 16 |               <div className="w-full px-3 sm:w-1/2">
 17 |                 <div className="mb-5">
 18 |                   <label
 19 |                     className="mb-3 block text-base font-medium text-[#07074D]"
 20 |                   >
 21 |                     Primer Nombre
 22 |                   </label>
 23 |                   <input
 24 |                     type="text"
 25 |                     name="firstName"
 26 |                     id="firstName"
 27 |                     placeholder="Primer Nombre"
 28 |                   />
 29 |                 </div>
 30 |               </div>
 31 |               <div className="w-full px-3 sm:w-1/2">
 32 |                 <div className="mb-5">
 33 |                   <label
 34 |                     className="mb-3 block text-base font-medium text-[#07074D]"
 35 |                   >
 36 |                     Apellido
 37 |                   </label>
 38 |                   <input
 39 |                     type="text"
 40 |                     name="lastName"
 41 |                     id="lastName"
 42 |                     placeholder="Apellido"
 43 |                   />
 44 |                 </div>
 45 |               </div>
 46 |             </div>
 47 |             <div className="mb-5">
 48 |               <label
 49 |                 className="mb-3 block text-base font-medium text-[#07074D]"
 50 |               >
 51 |                 ¿Cuántos invitados traerá?
 52 |               </label>
 53 |               <input
 54 |                 type="number"
 55 |                 name="guestNumber"
 56 |                 id="guestNumber"
 57 |                 placeholder="5"
 58 |                 min="0"
 59 |                 className="w-full appearance-none rounded-md border border-[#e0e0e0] bg-white py-3 px-6 text-base font-medium text-[#6B7280] outline-none focus:border-[#6A64F1] focus:shadow-md"
 60 |               />
 61 |             </div>
 62 | 
 63 |             <div className="-mx-3 flex flex-wrap">
 64 |               <div className="w-full px-3 sm:w-1/2">
 65 |                 <div className="mb-5">
 66 |                   <label
 67 |                     className="mb-3 block text-base font-medium text-[#07074D]"
 68 |                   >
 69 |                     Fecha de evento
 70 |                   </label>
 71 |                   <input
 72 |                     type="date"
 73 |                     name="eventDate"
 74 |                     id="eventDate"
 75 |                   />
 76 |                 </div>
 77 |               </div>
 78 |               <div className="w-full px-3 sm:w-1/2">
 79 |                 <div className="mb-5">
 80 |                   <label
 81 |                     className="mb-3 block text-base font-medium text-[#07074D]"
 82 |                   >
 83 |                     Hora del evento
 84 |                   </label>
 85 |                   <input
 86 |                     type="time"
 87 |                     name="eventTime"
 88 |                     id="eventTime"
 89 |                   />
 90 |                 </div>
 91 |               </div>
 92 |             </div>
 93 | 
 94 |             <div className="mb-5">
 95 |               <label className="mb-3 block text-base font-medium text-[#07074D]">
 96 |                 ¿Tu también vendrás?
 97 |               </label>
 98 |               <div className="flex items-center space-x-6">
 99 |                 <div className="flex items-center">
100 |                   <input
101 |                     type="radio"
102 |                     name="isComing"
103 |                     id="radioButton1"
104 |                     className="h-5 w-5"
105 |                   />
106 |                   <label
107 |                     className="pl-3 text-base font-medium text-[#07074D]"
108 |                   >
109 |                     Si
110 |                   </label>
111 |                 </div>
112 |                 <div className="flex items-center">
113 |                   <input
114 |                     type="radio"
115 |                     name="isComing"
116 |                     id="radioButton2"
117 |                     className="h-5 w-5"
118 |                   />
119 |                   <label
120 |                     className="pl-3 text-base font-medium text-[#07074D]"
121 |                   >
122 |                     No
123 |                   </label>
124 |                 </div>
125 |               </div>
126 |             </div>
127 | 
128 |             <div>
129 |               <button>
130 |                 Enviar
131 |               </button>
132 |             </div>
133 |           </form>
134 |         </div>
135 |       </WhiteCard>
136 |     </>
137 |   );
138 | };


--------------------------------------------------------------------------------