-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
8 changed files
with
793 additions
and
26 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,137 @@ | ||
| "use client"; | ||
| import { useEffect } from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
|
|
||
| // components | ||
| import SearchBar from '../SearchBar/SearchBar'; | ||
| import TableDropdown from '~/components/componetsDashboard/Dropdowns/TableDropdown'; | ||
|
|
||
| import useDashboardAdminStore from '~/store/dashboardAdminStore'; | ||
|
|
||
|
|
||
| interface BrandsInterface { | ||
| id: number, | ||
| name: string, | ||
| }; | ||
|
|
||
| const BRANDS: BrandsInterface[] = [ | ||
| { | ||
| id: 1, | ||
| name: "Audi" | ||
| }, | ||
| { | ||
| id: 2, | ||
| name: "Mitsubishi" | ||
| } | ||
| ]; | ||
|
|
||
|
|
||
| type CardBrandsProps = { | ||
| color: string | ||
| }; | ||
|
|
||
| export default function CardBrands({ color }: CardBrandsProps) { | ||
|
|
||
|
|
||
| // GLOBAL STORE: | ||
| const { brands, updateBrands }: any = useDashboardAdminStore(); | ||
|
|
||
|
|
||
| // LIFE CYCLES: | ||
| useEffect(() => { | ||
| updateBrands(BRANDS); | ||
| }, []); | ||
|
|
||
|
|
||
| // COMPONENT: | ||
| return ( | ||
| <> | ||
| <div | ||
| className={ | ||
| 'relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded ' + | ||
| (color === 'light' ? 'bg-white' : 'bg-lightBlue-900 text-white') | ||
| } | ||
| > | ||
| <div className="rounded-t mb-0 px-4 py-3 border-0"> | ||
| <div className="flex flex-wrap items-center"> | ||
| <div className="relative flex items-center justify-between w-full px-4 max-w-full flex-grow flex-1"> | ||
| <h3 | ||
| className={ | ||
| 'font-semibold text-lg ' + | ||
| (color === 'light' ? 'text-blueGray-700' : 'text-white') | ||
| } | ||
| > | ||
| Marcas | ||
| </h3> | ||
| <SearchBar section="brand" /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div className="block w-full overflow-x-auto"> | ||
| {/* Projects table */} | ||
| <table className="items-center w-full bg-transparent border-collapse"> | ||
| <thead> | ||
| <tr> | ||
| <th | ||
| className={ | ||
| 'px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left ' + | ||
| (color === 'light' | ||
| ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' | ||
| : 'bg-lightBlue-800 text-lightBlue-300 border-lightBlue-700') | ||
| } | ||
| > | ||
| Id | ||
| </th> | ||
| <th | ||
| className={ | ||
| 'px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left ' + | ||
| (color === 'light' | ||
| ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' | ||
| : 'bg-lightBlue-800 text-lightBlue-300 border-lightBlue-700') | ||
| } | ||
| > | ||
| Nombre | ||
| </th> | ||
| <th | ||
| className={ | ||
| 'px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left ' + | ||
| (color === 'light' | ||
| ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' | ||
| : 'bg-lightBlue-800 text-lightBlue-300 border-lightBlue-700') | ||
| } | ||
| > | ||
| Acciones | ||
| </th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| { | ||
| brands.map((BRAND: any, idx: any) => ( | ||
| <tr key={idx}> | ||
| <th className="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"> | ||
| {BRAND.id} | ||
| </th> | ||
| <td className="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left flex items-center"> | ||
| {BRAND.name} | ||
| </td> | ||
| <td className="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-right"> | ||
| <TableDropdown /> | ||
| </td> | ||
| </tr> | ||
| )) | ||
| } | ||
| </tbody> | ||
| </table> | ||
| </div> | ||
| </div> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| CardBrands.defaultProps = { | ||
| color: 'light', | ||
| }; | ||
|
|
||
| CardBrands.propTypes = { | ||
| color: PropTypes.oneOf(['light', 'dark']), | ||
| }; |
137 changes: 137 additions & 0 deletions
137
src/components/componetsDashboard/Cards/CardCategories.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,137 @@ | ||
| "use client"; | ||
| import { useEffect } from "react"; | ||
| import PropTypes from 'prop-types'; | ||
|
|
||
| // components | ||
| import SearchBar from '../SearchBar/SearchBar'; | ||
| import TableDropdown from '~/components/componetsDashboard/Dropdowns/TableDropdown'; | ||
|
|
||
| import useDashboardAdminStore from "~/store/dashboardAdminStore"; | ||
|
|
||
|
|
||
| interface CategoriesInterface { | ||
| id: number, | ||
| name: string, | ||
| }; | ||
|
|
||
| const CATEGORIES: CategoriesInterface[] = [ | ||
| { | ||
| id: 1, | ||
| name: "Escape" | ||
| }, | ||
| { | ||
| id: 2, | ||
| name: "Pisos" | ||
| } | ||
| ]; | ||
|
|
||
|
|
||
| type CardCategoriesProps = { | ||
| color: string | ||
| }; | ||
|
|
||
| export default function CardCategories({ color }: CardCategoriesProps) { | ||
|
|
||
|
|
||
| // GLOBAL STORE: | ||
| const { categories, updateCategories }: any = useDashboardAdminStore(); | ||
|
|
||
|
|
||
| // LIFE CYCLES: | ||
| useEffect(() => { | ||
| updateCategories(CATEGORIES); | ||
| }, []); | ||
|
|
||
|
|
||
| // COMPONENT: | ||
| return ( | ||
| <> | ||
| <div | ||
| className={ | ||
| 'relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded ' + | ||
| (color === 'light' ? 'bg-white' : 'bg-lightBlue-900 text-white') | ||
| } | ||
| > | ||
| <div className="rounded-t mb-0 px-4 py-3 border-0"> | ||
| <div className="flex flex-wrap items-center"> | ||
| <div className="relative flex items-center justify-between w-full px-4 max-w-full flex-grow flex-1"> | ||
| <h3 | ||
| className={ | ||
| 'font-semibold text-lg ' + | ||
| (color === 'light' ? 'text-blueGray-700' : 'text-white') | ||
| } | ||
| > | ||
| Categorías | ||
| </h3> | ||
| <SearchBar section="category" /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div className="block w-full overflow-x-auto"> | ||
| {/* Projects table */} | ||
| <table className="items-center w-full bg-transparent border-collapse"> | ||
| <thead> | ||
| <tr> | ||
| <th | ||
| className={ | ||
| 'px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left ' + | ||
| (color === 'light' | ||
| ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' | ||
| : 'bg-lightBlue-800 text-lightBlue-300 border-lightBlue-700') | ||
| } | ||
| > | ||
| Id | ||
| </th> | ||
| <th | ||
| className={ | ||
| 'px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left ' + | ||
| (color === 'light' | ||
| ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' | ||
| : 'bg-lightBlue-800 text-lightBlue-300 border-lightBlue-700') | ||
| } | ||
| > | ||
| Nombre | ||
| </th> | ||
| <th | ||
| className={ | ||
| 'px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left ' + | ||
| (color === 'light' | ||
| ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' | ||
| : 'bg-lightBlue-800 text-lightBlue-300 border-lightBlue-700') | ||
| } | ||
| > | ||
| Acciones | ||
| </th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| { | ||
| categories.map((CATEGORY: any, idx: any) => ( | ||
| <tr key={idx}> | ||
| <th className="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"> | ||
| {CATEGORY.id} | ||
| </th> | ||
| <td className="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-left flex items-center"> | ||
| {CATEGORY.name} | ||
| </td> | ||
| <td className="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-right"> | ||
| <TableDropdown /> | ||
| </td> | ||
| </tr> | ||
| )) | ||
| } | ||
| </tbody> | ||
| </table> | ||
| </div> | ||
| </div> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| CardCategories.defaultProps = { | ||
| color: 'light', | ||
| }; | ||
|
|
||
| CardCategories.propTypes = { | ||
| color: PropTypes.oneOf(['light', 'dark']), | ||
| }; |
Oops, something went wrong.