├── .eslintrc.json
├── src
    └── app
    │   ├── components
    │       ├── index.ts
    │       ├── SidebarMenuItem.tsx
    │       └── Sidebar.tsx
    │   ├── favicon.ico
    │   ├── shopping-cart
    │       ├── index.ts
    │       └── components
    │       │   └── CartCounter.tsx
    │   ├── page.tsx
    │   ├── dashboard
    │       ├── main
    │       │   └── page.tsx
    │       ├── counter
    │       │   └── page.tsx
    │       └── layout.tsx
    │   ├── layout.tsx
    │   └── globals.css
├── postcss.config.js
├── next.config.js
├── .gitignore
├── tailwind.config.js
├── public
    ├── vercel.svg
    └── next.svg
├── package.json
├── tsconfig.json
└── README.md


/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "next/core-web-vitals"
3 | }
4 | 


--------------------------------------------------------------------------------
/src/app/components/index.ts:
--------------------------------------------------------------------------------
1 | 
2 | 
3 | export { Sidebar } from './Sidebar';


--------------------------------------------------------------------------------
/src/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Klerith/next-my-dashboard/HEAD/src/app/favicon.ico


--------------------------------------------------------------------------------
/src/app/shopping-cart/index.ts:
--------------------------------------------------------------------------------
1 | 
2 | 
3 | 
4 | export { CartCounter } from './components/CartCounter';


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


--------------------------------------------------------------------------------
/src/app/page.tsx:
--------------------------------------------------------------------------------
1 | import { redirect } from 'next/navigation';
2 | 
3 | export default function HomePage() {
4 | 
5 |   redirect('/dashboard/main');
6 | 
7 | }
8 | 


--------------------------------------------------------------------------------
/src/app/dashboard/main/page.tsx:
--------------------------------------------------------------------------------
1 | 
2 | export default function MainPage() {
3 |   return (
4 |     <div>
5 |       <h1>Hello Page Main</h1>
6 |     </div>
7 |   );
8 | }


--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('next').NextConfig} */
 2 | const nextConfig = {
 3 |   images: {
 4 |     remotePatterns: [
 5 |       {
 6 |         protocol: 'https',
 7 |         hostname: 'images.unsplash.com'
 8 |       },
 9 | 
10 |     ]
11 |   }
12 | 
13 | }
14 | 
15 | module.exports = nextConfig
16 | 


--------------------------------------------------------------------------------
/src/app/dashboard/counter/page.tsx:
--------------------------------------------------------------------------------
 1 | import { CartCounter } from "@/app/shopping-cart";
 2 | 
 3 | export const metadata = {
 4 |  title: 'Shopping Cart',
 5 |  description: 'Un simple contador',
 6 | };
 7 | 
 8 | 
 9 | export default function CounterPage() {
10 | 
11 | 
12 |   return (
13 |     <div className="flex flex-col items-center justify-center w-full h-full">
14 |       <span>Productos en el carrito</span>
15 |       <CartCounter value={ 20 } />
16 |       
17 |     </div>
18 |   );
19 | }


--------------------------------------------------------------------------------
/src/app/layout.tsx:
--------------------------------------------------------------------------------
 1 | import './globals.css'
 2 | import { Inter } from 'next/font/google'
 3 | 
 4 | const inter = Inter({ subsets: ['latin'] })
 5 | 
 6 | export const metadata = {
 7 |   title: 'Create Next App',
 8 |   description: 'Generated by create next app',
 9 | }
10 | 
11 | export default function RootLayout({
12 |   children,
13 | }: {
14 |   children: React.ReactNode
15 | }) {
16 |   return (
17 |     <html lang="es">
18 |       <body className={inter.className}>{children}</body>
19 |     </html>
20 |   )
21 | }
22 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # next.js
12 | /.next/
13 | /out/
14 | 
15 | # production
16 | /build
17 | 
18 | # misc
19 | .DS_Store
20 | *.pem
21 | 
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | 
27 | # local env files
28 | .env*.local
29 | 
30 | # vercel
31 | .vercel
32 | 
33 | # typescript
34 | *.tsbuildinfo
35 | next-env.d.ts
36 | 


--------------------------------------------------------------------------------
/src/app/dashboard/layout.tsx:
--------------------------------------------------------------------------------
 1 | import { Sidebar } from '../components';
 2 | 
 3 | export default function DashboardLayout({ children }: { children: React.ReactNode; }) {
 4 |   return (
 5 |     <div className="bg-slate-100 overflow-y-scroll w-screen h-screen antialiased text-slate-300 selection:bg-blue-600 selection:text-white">
 6 | 
 7 |       <div className="flex">
 8 | 
 9 |         <Sidebar />
10 | 
11 |         <div className="p-2 w-full text-slate-900">
12 |           { children }
13 |         </div>
14 | 
15 |       </div>
16 |     </div>
17 |   );
18 | }


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('tailwindcss').Config} */
 2 | module.exports = {
 3 |   content: [
 4 |     './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
 5 |     './src/components/**/*.{js,ts,jsx,tsx,mdx}',
 6 |     './src/app/**/*.{js,ts,jsx,tsx,mdx}',
 7 |   ],
 8 |   theme: {
 9 |     extend: {
10 |       backgroundImage: {
11 |         'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
12 |         'gradient-conic':
13 |           'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
14 |       },
15 |     },
16 |   },
17 |   plugins: [],
18 | }
19 | 


--------------------------------------------------------------------------------
/public/vercel.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>


--------------------------------------------------------------------------------
/src/app/globals.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | :root {
 6 |   --foreground-rgb: 0, 0, 0;
 7 |   --background-start-rgb: 214, 219, 220;
 8 |   --background-end-rgb: 255, 255, 255;
 9 | }
10 | 
11 | /* @media (prefers-color-scheme: dark) {
12 |   :root {
13 |     --foreground-rgb: 255, 255, 255;
14 |     --background-start-rgb: 0, 0, 0;
15 |     --background-end-rgb: 0, 0, 0;
16 |   }
17 | } */
18 | 
19 | body {
20 |   color: rgb(var(--foreground-rgb));
21 |   background: linear-gradient(
22 |       to bottom,
23 |       transparent,
24 |       rgb(var(--background-end-rgb))
25 |     )
26 |     rgb(var(--background-start-rgb));
27 | }
28 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "my-dashboard",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build",
 8 |     "start": "next start",
 9 |     "lint": "next lint"
10 |   },
11 |   "dependencies": {
12 |     "@types/node": "20.2.5",
13 |     "@types/react": "18.2.9",
14 |     "@types/react-dom": "18.2.4",
15 |     "autoprefixer": "10.4.14",
16 |     "eslint": "8.42.0",
17 |     "eslint-config-next": "13.4.4",
18 |     "next": "13.4.4",
19 |     "postcss": "8.4.24",
20 |     "react": "18.2.0",
21 |     "react-dom": "18.2.0",
22 |     "react-icons": "^4.9.0",
23 |     "tailwindcss": "3.3.2",
24 |     "typescript": "5.1.3"
25 |   }
26 | }
27 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "lib": ["dom", "dom.iterable", "esnext"],
 5 |     "allowJs": true,
 6 |     "skipLibCheck": true,
 7 |     "strict": true,
 8 |     "forceConsistentCasingInFileNames": true,
 9 |     "noEmit": true,
10 |     "esModuleInterop": true,
11 |     "module": "esnext",
12 |     "moduleResolution": "node",
13 |     "resolveJsonModule": true,
14 |     "isolatedModules": true,
15 |     "jsx": "preserve",
16 |     "incremental": true,
17 |     "plugins": [
18 |       {
19 |         "name": "next"
20 |       }
21 |     ],
22 |     "paths": {
23 |       "@/*": ["./src/*"]
24 |     }
25 |   },
26 |   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
27 |   "exclude": ["node_modules"]
28 | }
29 | 


--------------------------------------------------------------------------------
/src/app/shopping-cart/components/CartCounter.tsx:
--------------------------------------------------------------------------------
 1 | 'use client';
 2 | 
 3 | import { useState } from 'react';
 4 | 
 5 | interface Props {
 6 |   value?: number;
 7 | }
 8 | 
 9 | 
10 | 
11 | export const CartCounter = ({  value = 0 }: Props) => {
12 | 
13 |   const [count, setCount] = useState(value);
14 | 
15 |   return (
16 |     <>
17 |       <span className="text-9xl"> {count} </span>
18 | 
19 |       <div className="flex">
20 |         <button
21 |           onClick={() => setCount(count + 1)}
22 |           className="flex items-center justify-center p-2 rounded-xl bg-gray-900 text-white hover:bg-gray-600 transition-all w-[100px] mr-2">
23 |           +1
24 |         </button>
25 | 
26 |         <button
27 |           onClick={() => setCount(count - 1)}
28 |           className="flex items-center justify-center p-2 rounded-xl bg-gray-900 text-white hover:bg-gray-600 transition-all w-[100px] mr-2">
29 |           -1
30 |         </button>
31 |       </div>
32 |     </>
33 |   )
34 | }
35 | 


--------------------------------------------------------------------------------
/src/app/components/SidebarMenuItem.tsx:
--------------------------------------------------------------------------------
 1 | 'use client';
 2 | 
 3 | 
 4 | import Link from "next/link";
 5 | import { usePathname } from "next/navigation";
 6 | 
 7 | interface Props {
 8 |   path: string;
 9 |   icon: JSX.Element;
10 |   title: string;
11 |   subTitle: string;
12 | }
13 | 
14 | 
15 | 
16 | export const SidebarMenuItem = ({ path, icon, title, subTitle }: Props) => {
17 | 
18 |   const currentPath = usePathname();
19 | 
20 |   return (
21 |     <Link href={ path } 
22 |           className={`
23 |             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
24 |             ${ currentPath === path ? 'bg-blue-800': '' }
25 |           `}>
26 |       <div>
27 |        <div>
28 |         { icon }
29 |        </div>
30 | 
31 |       </div>
32 |       <div className="flex flex-col">
33 |         <span className="text-lg font-bold leading-5 text-white">{ title }</span>
34 |         <span className="text-sm text-white/50 hidden md:block">{ subTitle }</span>
35 |       </div>
36 |     </Link>
37 |   )
38 | }
39 | 


--------------------------------------------------------------------------------
/public/next.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
 2 | 
 3 | ## Getting Started
 4 | 
 5 | First, run the development server:
 6 | 
 7 | ```bash
 8 | npm run dev
 9 | # or
10 | yarn dev
11 | # or
12 | pnpm dev
13 | ```
14 | 
15 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
16 | 
17 | You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
18 | 
19 | This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
20 | 
21 | ## Learn More
22 | 
23 | To learn more about Next.js, take a look at the following resources:
24 | 
25 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
26 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
27 | 
28 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
29 | 
30 | ## Deploy on Vercel
31 | 
32 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
33 | 
34 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
35 | 


--------------------------------------------------------------------------------
/src/app/components/Sidebar.tsx:
--------------------------------------------------------------------------------
 1 | import Image from 'next/image';
 2 | import { IoBrowsersOutline, IoCalculator, IoLogoReact } from 'react-icons/io5';
 3 | import { SidebarMenuItem } from './SidebarMenuItem';
 4 | 
 5 | 
 6 | const menuItems = [
 7 |   {
 8 |     path: '/dashboard/main',
 9 |     icon: <IoBrowsersOutline size={40} />,
10 |     title: 'Dashboard',
11 |     subTitle: 'Visualización'
12 |   },
13 |   {
14 |     path: '/dashboard/counter',
15 |     icon: <IoCalculator size={40} />,
16 |     title: 'Counter',
17 |     subTitle: 'Contador Client Side'
18 |   },
19 | ]
20 | 
21 | 
22 | export const Sidebar = () => {
23 |   return (
24 | 
25 |     <div id="menu" 
26 |       style={{ width: '400px' }}
27 |       className="bg-gray-900 min-h-screen z-10 text-slate-300 w-64 left-0 h-screen overflow-y-scroll">
28 | 
29 | 
30 |       <div id="logo" className="my-4 px-6">
31 |         <h1 className="flex items-center  text-lg md:text-2xl font-bold text-white">
32 |           <IoLogoReact className='mr-2' />
33 |           <span> Dash</span> 
34 |           <span className="text-blue-500">8</span>.
35 |         </h1>
36 |         <p className="text-slate-500 text-sm">Manage your actions and activities</p>
37 |       </div>
38 | 
39 | 
40 |       <div id="profile" className="px-6 py-10">
41 |         <p className="text-slate-500">Welcome back,</p>
42 |         <a href="#" className="inline-flex space-x-2 items-center">
43 |           <span>
44 |             <Image className="rounded-full w-8 h-8" 
45 |               src="https://images.unsplash.com/photo-1542909168-82c3e7fdca5c" 
46 |               alt="User avatar" 
47 |               width={50}
48 |               height={50}
49 |             />
50 |           </span>
51 |           <span className="text-sm md:text-base font-bold">
52 |             Fernando Herrera
53 |           </span>
54 |         </a>
55 |       </div>
56 | 
57 | 
58 |       <div id="nav" className="w-full px-6">
59 |       
60 |         {
61 |           menuItems.map( item => (
62 |               <SidebarMenuItem  key={ item.path } {...item} />
63 |           ))
64 |         }
65 | 
66 | {/* 
67 |         <a href="#" className="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">
68 |           <div>
69 |             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" className="w-6 h-6">
70 |               <path strokeLinecap="round" strokeLinejoin="round" d="M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75m16.5 0v3.75C20.25 16.153 16.556 18 12 18s-8.25-1.847-8.25-4.125v-3.75m16.5 0c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125" />
71 |             </svg>
72 |           </div>
73 |           <div className="flex flex-col">
74 |             <span className="text-lg text-slate-300 font-bold leading-5">Counter</span>
75 |             <span className="text-sm text-slate-500 hidden md:block">Estado local</span>
76 |           </div>
77 |         </a> */}
78 | 
79 | 
80 | 
81 |       </div>
82 |     </div>
83 |   )
84 | }
85 | 


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