├── .gitignore
├── LICENSE
├── README.md
├── common
    ├── Loading.jsx
    ├── Modal.jsx
    └── Nav.jsx
├── components
    ├── Header.jsx
    └── LoginPage.jsx
└── pages
    └── dashboard
        └── index.jsx


/.gitignore:
--------------------------------------------------------------------------------
  1 | # Logs
  2 | logs
  3 | *.log
  4 | npm-debug.log*
  5 | yarn-debug.log*
  6 | yarn-error.log*
  7 | lerna-debug.log*
  8 | 
  9 | # Diagnostic reports (https://nodejs.org/api/report.html)
 10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
 11 | 
 12 | # Runtime data
 13 | pids
 14 | *.pid
 15 | *.seed
 16 | *.pid.lock
 17 | 
 18 | # Directory for instrumented libs generated by jscoverage/JSCover
 19 | lib-cov
 20 | 
 21 | # Coverage directory used by tools like istanbul
 22 | coverage
 23 | *.lcov
 24 | 
 25 | # nyc test coverage
 26 | .nyc_output
 27 | 
 28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
 29 | .grunt
 30 | 
 31 | # Bower dependency directory (https://bower.io/)
 32 | bower_components
 33 | 
 34 | # node-waf configuration
 35 | .lock-wscript
 36 | 
 37 | # Compiled binary addons (https://nodejs.org/api/addons.html)
 38 | build/Release
 39 | 
 40 | # Dependency directories
 41 | node_modules/
 42 | jspm_packages/
 43 | 
 44 | # TypeScript v1 declaration files
 45 | typings/
 46 | 
 47 | # TypeScript cache
 48 | *.tsbuildinfo
 49 | 
 50 | # Optional npm cache directory
 51 | .npm
 52 | 
 53 | # Optional eslint cache
 54 | .eslintcache
 55 | 
 56 | # Microbundle cache
 57 | .rpt2_cache/
 58 | .rts2_cache_cjs/
 59 | .rts2_cache_es/
 60 | .rts2_cache_umd/
 61 | 
 62 | # Optional REPL history
 63 | .node_repl_history
 64 | 
 65 | # Output of 'npm pack'
 66 | *.tgz
 67 | 
 68 | # Yarn Integrity file
 69 | .yarn-integrity
 70 | 
 71 | # dotenv environment variables file
 72 | .env
 73 | .env.test
 74 | 
 75 | # parcel-bundler cache (https://parceljs.org/)
 76 | .cache
 77 | 
 78 | # Next.js build output
 79 | .next
 80 | 
 81 | # Nuxt.js build / generate output
 82 | .nuxt
 83 | dist
 84 | 
 85 | # Gatsby files
 86 | .cache/
 87 | # Comment in the public line in if your project uses Gatsby and *not* Next.js
 88 | # https://nextjs.org/blog/next-9-1#public-directory-support
 89 | # public
 90 | 
 91 | # vuepress build output
 92 | .vuepress/dist
 93 | 
 94 | # Serverless directories
 95 | .serverless/
 96 | 
 97 | # FuseBox cache
 98 | .fusebox/
 99 | 
100 | # DynamoDB Local files
101 | .dynamodb/
102 | 
103 | # TernJS port file
104 | .tern-port
105 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2021 Oscar Barajas Tavares
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # nextjs-ui


--------------------------------------------------------------------------------
/common/Loading.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | const Loading = () => {
 4 |   return (
 5 |     <div className="flex items-center justify-center w-full h-full pt-96">
 6 |       <div className="flex justify-center items-center space-x-1 text-sm text-gray-700">
 7 |         <svg fill="none" className="w-6 h-6 animate-spin" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
 8 |           <path clipRule="evenodd" d="M15.165 8.53a.5.5 0 01-.404.58A7 7 0 1023 16a.5.5 0 011 0 8 8 0 11-9.416-7.874.5.5 0 01.58.404z" fill="currentColor" fillRule="evenodd" />
 9 |         </svg>
10 |         <div>Loading ...</div>
11 |       </div>
12 |     </div>
13 |   );
14 | };
15 | 
16 | export default Loading;
17 | 


--------------------------------------------------------------------------------
/common/Modal.jsx:
--------------------------------------------------------------------------------
 1 | import { Fragment, useRef } from 'react';
 2 | import { Dialog, Transition } from '@headlessui/react';
 3 | import { XCircleIcon } from '@heroicons/react/solid';
 4 | 
 5 | export default function Modal({ open, setOpen, children }) {
 6 |   const cancelButtonRef = useRef(null);
 7 |   return (
 8 |     <Transition.Root show={open} as={Fragment}>
 9 |       <Dialog as="div" className="fixed z-10 inset-0 overflow-y-auto" initialFocus={cancelButtonRef} onClose={setOpen}>
10 |         <div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
11 |           <Transition.Child as={Fragment} enter="ease-out duration-300" enterFrom="opacity-0" enterTo="opacity-100" leave="ease-in duration-200" leaveFrom="opacity-100" leaveTo="opacity-0">
12 |             <Dialog.Overlay className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
13 |           </Transition.Child>
14 |           <span className="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">
15 |             &#8203;
16 |           </span>
17 |           <Transition.Child
18 |             as={Fragment}
19 |             enter="ease-out duration-300"
20 |             enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
21 |             enterTo="opacity-100 translate-y-0 sm:scale-100"
22 |             leave="ease-in duration-200"
23 |             leaveFrom="opacity-100 translate-y-0 sm:scale-100"
24 |             leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
25 |           >
26 |             <div className="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
27 |               <div className="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
28 |                 <XCircleIcon className="flex-shrink-0 h-6 w-6 text-gray-400 cursor-pointer" aria-hidden="true" onClick={() => setOpen(false)} ref={cancelButtonRef} />
29 |               </div>
30 |               <div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
31 |                 <div className="sm:flex sm:items-start">{children}</div>
32 |               </div>
33 |             </div>
34 |           </Transition.Child>
35 |         </div>
36 |       </Dialog>
37 |     </Transition.Root>
38 |   );
39 | }
40 | 


--------------------------------------------------------------------------------
/common/Nav.jsx:
--------------------------------------------------------------------------------
 1 | import { useRouter } from 'next/router';
 2 | 
 3 | export default function Nav() {
 4 |   const router = useRouter();
 5 |   const route = router.pathname.substring(1);
 6 | 
 7 |   return (
 8 |     <nav className="bg-white shadow">
 9 |       <div className="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
10 |         <h1 className="text-3xl font-bold text-gray-900 capitalize">{route}</h1>
11 |       </div>
12 |     </nav>
13 |   );
14 | }
15 | 


--------------------------------------------------------------------------------
/components/Header.jsx:
--------------------------------------------------------------------------------
  1 | /* This example requires Tailwind CSS v2.0+ */
  2 | import { Fragment } from 'react';
  3 | import { Disclosure, Menu, Transition } from '@headlessui/react';
  4 | import { BellIcon, MenuIcon, XIcon } from '@heroicons/react/outline';
  5 | 
  6 | const userData = {
  7 |   name: 'Tom Cook',
  8 |   email: 'tom@example.com',
  9 |   imageUrl: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
 10 | };
 11 | const navigation = [
 12 |   { name: 'Dashboard', href: '#', current: true },
 13 |   { name: 'Productos', href: '/dashboard/products/', current: false },
 14 |   { name: 'Ventas', href: '#', current: false },
 15 | ];
 16 | const userNavigation = [
 17 |   { name: 'Your Profile', href: '#' },
 18 |   { name: 'Settings', href: '#' },
 19 |   { name: 'Sign out', href: '#' },
 20 | ];
 21 | 
 22 | function classNames(...classes) {
 23 |   return classes.filter(Boolean).join(' ');
 24 | }
 25 | 
 26 | export default function Header() {
 27 |   return (
 28 |     <>
 29 |       <Disclosure as="nav" className="bg-gray-800">
 30 |         {({ open }) => (
 31 |           <>
 32 |             <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
 33 |               <div className="flex items-center justify-between h-16">
 34 |                 <div className="flex items-center">
 35 |                   <div className="flex-shrink-0">
 36 |                     <img className="h-8 w-8" src="https://tailwindui.com/img/logos/workflow-mark-indigo-500.svg" alt="Workflow" />
 37 |                   </div>
 38 |                   <div className="hidden md:block">
 39 |                     <div className="ml-10 flex items-baseline space-x-4">
 40 |                       {navigation.map((item) => (
 41 |                         <a
 42 |                           key={item.name}
 43 |                           href={item.href}
 44 |                           className={classNames(item.current ? 'bg-gray-900 text-white' : 'text-gray-300 hover:bg-gray-700 hover:text-white', 'px-3 py-2 rounded-md text-sm font-medium')}
 45 |                           aria-current={item.current ? 'page' : undefined}
 46 |                         >
 47 |                           {item.name}
 48 |                         </a>
 49 |                       ))}
 50 |                     </div>
 51 |                   </div>
 52 |                 </div>
 53 |                 <div className="hidden md:block">
 54 |                   <div className="ml-4 flex items-center md:ml-6">
 55 |                     <button
 56 |                       type="button"
 57 |                       className="bg-gray-800 p-1 rounded-full text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white"
 58 |                     >
 59 |                       <span className="sr-only">View notifications</span>
 60 |                       <BellIcon className="h-6 w-6" aria-hidden="true" />
 61 |                     </button>
 62 | 
 63 |                     {/* Profile dropdown */}
 64 |                     <Menu as="div" className="ml-3 relative">
 65 |                       <div>
 66 |                         <Menu.Button className="max-w-xs bg-gray-800 rounded-full flex items-center text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white">
 67 |                           <span className="sr-only">Open user menu</span>
 68 |                           <img className="h-8 w-8 rounded-full" src={userData.imageUrl} alt="" />
 69 |                         </Menu.Button>
 70 |                       </div>
 71 |                       <Transition
 72 |                         as={Fragment}
 73 |                         enter="transition ease-out duration-100"
 74 |                         enterFrom="transform opacity-0 scale-95"
 75 |                         enterTo="transform opacity-100 scale-100"
 76 |                         leave="transition ease-in duration-75"
 77 |                         leaveFrom="transform opacity-100 scale-100"
 78 |                         leaveTo="transform opacity-0 scale-95"
 79 |                       >
 80 |                         <Menu.Items className="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none">
 81 |                           {userNavigation.map((item) => (
 82 |                             <Menu.Item key={item.name}>
 83 |                               {({ active }) => (
 84 |                                 <a href={item.href} className={classNames(active ? 'bg-gray-100' : '', 'block px-4 py-2 text-sm text-gray-700')}>
 85 |                                   {item.name}
 86 |                                 </a>
 87 |                               )}
 88 |                             </Menu.Item>
 89 |                           ))}
 90 |                         </Menu.Items>
 91 |                       </Transition>
 92 |                     </Menu>
 93 |                   </div>
 94 |                 </div>
 95 |                 <div className="-mr-2 flex md:hidden">
 96 |                   {/* Mobile menu button */}
 97 |                   <Disclosure.Button className="bg-gray-800 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white">
 98 |                     <span className="sr-only">Open main menu</span>
 99 |                     {open ? <XIcon className="block h-6 w-6" aria-hidden="true" /> : <MenuIcon className="block h-6 w-6" aria-hidden="true" />}
100 |                   </Disclosure.Button>
101 |                 </div>
102 |               </div>
103 |             </div>
104 | 
105 |             <Disclosure.Panel className="md:hidden">
106 |               <div className="px-2 pt-2 pb-3 space-y-1 sm:px-3">
107 |                 {navigation.map((item) => (
108 |                   <Disclosure.Button
109 |                     key={item.name}
110 |                     as="a"
111 |                     href={item.href}
112 |                     className={classNames(item.current ? 'bg-gray-900 text-white' : 'text-gray-300 hover:bg-gray-700 hover:text-white', 'block px-3 py-2 rounded-md text-base font-medium')}
113 |                     aria-current={item.current ? 'page' : undefined}
114 |                   >
115 |                     {item.name}
116 |                   </Disclosure.Button>
117 |                 ))}
118 |               </div>
119 |               <div className="pt-4 pb-3 border-t border-gray-700">
120 |                 <div className="flex items-center px-5">
121 |                   <div className="flex-shrink-0">
122 |                     <img className="h-10 w-10 rounded-full" src={userData.imageUrl} alt="" />
123 |                   </div>
124 |                   <div className="ml-3">
125 |                     <div className="text-base font-medium leading-none text-white">{userData.name}</div>
126 |                     <div className="text-sm font-medium leading-none text-gray-400">{userData.email}</div>
127 |                   </div>
128 |                   <button
129 |                     type="button"
130 |                     className="ml-auto bg-gray-800 flex-shrink-0 p-1 rounded-full text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white"
131 |                   >
132 |                     <span className="sr-only">View notifications</span>
133 |                     <BellIcon className="h-6 w-6" aria-hidden="true" />
134 |                   </button>
135 |                 </div>
136 |                 <div className="mt-3 px-2 space-y-1">
137 |                   {userNavigation.map((item) => (
138 |                     <Disclosure.Button key={item.name} as="a" href={item.href} className="block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700">
139 |                       {item.name}
140 |                     </Disclosure.Button>
141 |                   ))}
142 |                 </div>
143 |               </div>
144 |             </Disclosure.Panel>
145 |           </>
146 |         )}
147 |       </Disclosure>
148 |     </>
149 |   );
150 | }
151 | 


--------------------------------------------------------------------------------
/components/LoginPage.jsx:
--------------------------------------------------------------------------------
 1 | import { LockClosedIcon } from '@heroicons/react/solid';
 2 | 
 3 | export default function LoginPage() {
 4 |   return (
 5 |     <>
 6 |       <div className="min-h-full flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
 7 |         <div className="max-w-md w-full space-y-8">
 8 |           <div>
 9 |             <img className="mx-auto h-12 w-auto" src="https://tailwindui.com/img/logos/workflow-mark-indigo-600.svg" alt="Workflow" />
10 |             <h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900">Sign in to your account</h2>
11 |           </div>
12 |             <Form className="mt-8 space-y-6" action="#" method="POST">
13 |               <input type="hidden" name="remember" defaultValue="true" />
14 |               <div className="rounded-md shadow-sm -space-y-px">
15 |                 <div>
16 |                   <label htmlFor="email-address" className="sr-only">
17 |                     Email address
18 |                   </label>
19 |                   <Field
20 |                     id="email-address"
21 |                     name="email"
22 |                     type="email"
23 |                     autoComplete="email"
24 |                     required
25 |                     className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
26 |                     placeholder="Email address"
27 |                   />
28 |                 </div>
29 |                 <div>
30 |                   <label htmlFor="password" className="sr-only">
31 |                     Password
32 |                   </label>
33 |                   <Field
34 |                     id="password"
35 |                     name="password"
36 |                     type="password"
37 |                     autoComplete="current-password"
38 |                     required
39 |                     className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
40 |                     placeholder="Password"
41 |                   />
42 |                 </div>
43 |               </div>
44 | 
45 |               <div className="flex items-center justify-between">
46 |                 <div className="flex items-center">
47 |                   <input id="remember-me" name="remember-me" type="checkbox" className="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded" />
48 |                   <label htmlFor="remember-me" className="ml-2 block text-sm text-gray-900">
49 |                     Remember me
50 |                   </label>
51 |                 </div>
52 | 
53 |                 <div className="text-sm">
54 |                   <a href="#" className="font-medium text-indigo-600 hover:text-indigo-500">
55 |                     Forgot your password?
56 |                   </a>
57 |                 </div>
58 |               </div>
59 | 
60 |               <div>
61 |                 <button
62 |                   type="submit"
63 |                   className="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
64 |                 >
65 |                   <span className="absolute left-0 inset-y-0 flex items-center pl-3">
66 |                     <LockClosedIcon className="h-5 w-5 text-indigo-500 group-hover:text-indigo-400" aria-hidden="true" />
67 |                   </span>
68 |                   Sign in
69 |                 </button>
70 |               </div>
71 |             </Form>
72 |         </div>
73 |       </div>
74 |     </>
75 |   );
76 | }
77 | 


--------------------------------------------------------------------------------
/pages/dashboard/index.jsx:
--------------------------------------------------------------------------------
 1 | const people = [
 2 |   {
 3 |     name: 'Jane Cooper',
 4 |     title: 'Regional Paradigm Technician',
 5 |     department: 'Optimization',
 6 |     role: 'Admin',
 7 |     email: 'jane.cooper@example.com',
 8 |     image: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=4&w=256&h=256&q=60',
 9 |   },
10 | ];
11 | 
12 | export default function Dashboard() {
13 |   return (
14 |     <>
15 |       <div className="flex flex-col">
16 |         <div className="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
17 |           <div className="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
18 |             <div className="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
19 |               <table className="min-w-full divide-y divide-gray-200">
20 |                 <thead className="bg-gray-50">
21 |                   <tr>
22 |                     <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
23 |                       Name
24 |                     </th>
25 |                     <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
26 |                       Title
27 |                     </th>
28 |                     <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
29 |                       Status
30 |                     </th>
31 |                     <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
32 |                       Role
33 |                     </th>
34 |                     <th scope="col" className="relative px-6 py-3">
35 |                       <span className="sr-only">Edit</span>
36 |                     </th>
37 |                   </tr>
38 |                 </thead>
39 |                 <tbody className="bg-white divide-y divide-gray-200">
40 |                   {people.map((person) => (
41 |                     <tr key={person.email}>
42 |                       <td className="px-6 py-4 whitespace-nowrap">
43 |                         <div className="flex items-center">
44 |                           <div className="flex-shrink-0 h-10 w-10">
45 |                             <img className="h-10 w-10 rounded-full" src={person.image} alt="" />
46 |                           </div>
47 |                           <div className="ml-4">
48 |                             <div className="text-sm font-medium text-gray-900">{person.name}</div>
49 |                             <div className="text-sm text-gray-500">{person.email}</div>
50 |                           </div>
51 |                         </div>
52 |                       </td>
53 |                       <td className="px-6 py-4 whitespace-nowrap">
54 |                         <div className="text-sm text-gray-900">{person.title}</div>
55 |                         <div className="text-sm text-gray-500">{person.department}</div>
56 |                       </td>
57 |                       <td className="px-6 py-4 whitespace-nowrap">
58 |                         <span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Active</span>
59 |                       </td>
60 |                       <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{person.role}</td>
61 |                       <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
62 |                         <a href="#" className="text-indigo-600 hover:text-indigo-900">
63 |                           Edit
64 |                         </a>
65 |                       </td>
66 |                     </tr>
67 |                   ))}
68 |                 </tbody>
69 |               </table>
70 |             </div>
71 |           </div>
72 |         </div>
73 |       </div>
74 |     </>
75 |   );
76 | }
77 | 


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