From 1202b9f37d84af79f72e40cbaaabf390eef58b5e Mon Sep 17 00:00:00 2001 From: Clay Martinez Date: Mon, 4 Sep 2023 12:13:00 -0500 Subject: [PATCH 1/8] incomplete --- src/components/button/button.tsx | 2 +- src/components/navBar/navBar.tsx | 45 ++++++++++++++++++-------------- 2 files changed, 27 insertions(+), 20 deletions(-) diff --git a/src/components/button/button.tsx b/src/components/button/button.tsx index e2ac80e..cba2e31 100644 --- a/src/components/button/button.tsx +++ b/src/components/button/button.tsx @@ -29,7 +29,7 @@ const ButtonComponent: React.FC = ({ const textvariant = variant === 'search' ? 'Buscar' : 'Boton'; - const StylesDefaul = ` min-w-[4.34rem] max-w-[8.6875rem] min-h-2.75[rem] max-h-[2.75rem] p-2 flex justify-center items-center font-bold ${buttonClass}`; + const StylesDefaul = ` text-text-lm min-w-[4.34rem] max-w-[8.6875rem] min-h-2.75[rem] max-h-[2.75rem] p-2 flex justify-center items-center font-bold ${buttonClass}`; if (to) { return ( diff --git a/src/components/navBar/navBar.tsx b/src/components/navBar/navBar.tsx index 9cb5c50..489b395 100644 --- a/src/components/navBar/navBar.tsx +++ b/src/components/navBar/navBar.tsx @@ -1,24 +1,26 @@ 'use client'; import Image from 'next/image'; import React from 'react'; -import { Images } from "~/assets/img"; +import { Images } from '~/assets/img'; import ButtonComponent from '../button/button'; import { FaAtlas, FaUser } from 'react-icons/fa'; import { BsCartFill } from 'react-icons/bs'; import Link from 'next/link'; import { DropDownMenu } from '../dropdownMenu/dropdownMenu'; import { ThemeModeButton } from '../ThemeMode'; +import { InputField } from '../inputs/InputField'; export const NavBar = () => { return ( -
-
- - Your Company +
+
+ + Your Company { { title: 'Toyota', to: '/products/Toyota' }, ]} /> + +
- - - - -
- - - +
+ { + + } +
+
+ + + I
-
); -}; \ No newline at end of file +}; From 3e6c935a167f5a8d4b64b88a1b282f0a1e3d15a4 Mon Sep 17 00:00:00 2001 From: Clay Martinez Date: Mon, 4 Sep 2023 12:52:27 -0500 Subject: [PATCH 2/8] incomplete 2 --- src/components/button/button.tsx | 2 +- src/components/navBar/navBar.tsx | 92 ++++++++++++++++++-------------- 2 files changed, 54 insertions(+), 40 deletions(-) diff --git a/src/components/button/button.tsx b/src/components/button/button.tsx index cba2e31..a6afd5e 100644 --- a/src/components/button/button.tsx +++ b/src/components/button/button.tsx @@ -29,7 +29,7 @@ const ButtonComponent: React.FC = ({ const textvariant = variant === 'search' ? 'Buscar' : 'Boton'; - const StylesDefaul = ` text-text-lm min-w-[4.34rem] max-w-[8.6875rem] min-h-2.75[rem] max-h-[2.75rem] p-2 flex justify-center items-center font-bold ${buttonClass}`; + const StylesDefaul = `text-base text-text-lm min-w-[4.34rem] max-w-[8.6875rem] min-h-2.75[rem] max-h-[2.75rem] p-2 flex justify-center items-center font-medium ${buttonClass}`; if (to) { return ( diff --git a/src/components/navBar/navBar.tsx b/src/components/navBar/navBar.tsx index 489b395..bcf2815 100644 --- a/src/components/navBar/navBar.tsx +++ b/src/components/navBar/navBar.tsx @@ -2,56 +2,70 @@ import Image from 'next/image'; import React from 'react'; import { Images } from '~/assets/img'; -import ButtonComponent from '../button/button'; -import { FaAtlas, FaUser } from 'react-icons/fa'; -import { BsCartFill } from 'react-icons/bs'; -import Link from 'next/link'; +import ButtonComponent, { MainButton } from '../button/button'; import { DropDownMenu } from '../dropdownMenu/dropdownMenu'; import { ThemeModeButton } from '../ThemeMode'; import { InputField } from '../inputs/InputField'; export const NavBar = () => { return ( -
-
- - Your Company - - - +
+ Your Company - -
-
- { - +
  • + +
    • +
  • + +
    • +
  • + Nosotros +
    • +
  • + Contacto +
    • + + + + } -
    -
    - + /> +
    + Ingresar - I
    -
    + ); }; From 6e5858a5474028726fcf67276800e9593e0e3585 Mon Sep 17 00:00:00 2001 From: jhoniernem Date: Mon, 4 Sep 2023 13:05:23 -0500 Subject: [PATCH 3/8] fix - input styles --- src/components/inputs/InputField.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/inputs/InputField.tsx b/src/components/inputs/InputField.tsx index 405cb3e..84024c3 100644 --- a/src/components/inputs/InputField.tsx +++ b/src/components/inputs/InputField.tsx @@ -43,15 +43,15 @@ export function InputField({
    )} {rightIcon && (
    Date: Mon, 4 Sep 2023 14:00:40 -0500 Subject: [PATCH 4/8] pendiente --- src/components/ThemeMode.tsx | 2 +- src/components/button/button.tsx | 4 +- src/components/inputs/InputField.tsx | 4 +- src/components/navBar/navBar.tsx | 130 +++++++++++++++------------ 4 files changed, 81 insertions(+), 59 deletions(-) diff --git a/src/components/ThemeMode.tsx b/src/components/ThemeMode.tsx index 5e30220..f3be3f6 100644 --- a/src/components/ThemeMode.tsx +++ b/src/components/ThemeMode.tsx @@ -6,7 +6,7 @@ type ThemeModeButtonProps = { sizeIcon?: number; }; -export function ThemeModeButton({ sizeIcon = 25 }: ThemeModeButtonProps) { +export function ThemeModeButton({ sizeIcon = 30 }: ThemeModeButtonProps) { const { systemTheme, theme, setTheme } = useTheme(); const currentTheme = theme === 'system' ? systemTheme : theme; diff --git a/src/components/button/button.tsx b/src/components/button/button.tsx index a6afd5e..3056857 100644 --- a/src/components/button/button.tsx +++ b/src/components/button/button.tsx @@ -50,10 +50,12 @@ type MainButtonProps = { variant?: 'default' | 'secondary' | 'tertiary'; color?: 'default' | 'red'; children: React.ReactNode; + className?: string; }; export const MainButton: React.FC = ({ variant = 'default', color = 'default', + className, children, }) => { const variant_style = @@ -65,7 +67,7 @@ export const MainButton: React.FC = ({ return ( diff --git a/src/components/inputs/InputField.tsx b/src/components/inputs/InputField.tsx index 84024c3..35bb05f 100644 --- a/src/components/inputs/InputField.tsx +++ b/src/components/inputs/InputField.tsx @@ -6,6 +6,7 @@ type InputFieldProps = { leftIcon?: React.ReactNode; rightIcon?: React.ReactNode; color?: 'default' | 'red'; + className?: string; } & React.DetailedHTMLProps< React.InputHTMLAttributes, HTMLInputElement @@ -17,6 +18,7 @@ export function InputField({ leftIcon, rightIcon, color, + className, ...props }: InputFieldProps) { const currentColor = color === 'red' ? 'primary-lm' : 'secondary-dm'; @@ -49,7 +51,7 @@ export function InputField({ className={`w-full py-1.5 px-3 outline-none border rounded-md text-secondary-dm ${leftIcon && 'pl-9'} ${rightIcon && 'pr-9'} - border-${currentColor}`} + border-${currentColor} ${className}`} required={required} autoComplete="off" /> diff --git a/src/components/navBar/navBar.tsx b/src/components/navBar/navBar.tsx index bcf2815..d3ac8f0 100644 --- a/src/components/navBar/navBar.tsx +++ b/src/components/navBar/navBar.tsx @@ -9,63 +9,81 @@ import { InputField } from '../inputs/InputField'; export const NavBar = () => { return ( - + +
  • + +
    • +
  • + Nosotros +
    • +
  • + Contacto +
    • + + + + + } + /> +
    + + Ingresar + + + + + + + +
    + +
    ); }; From e302a065bf455847a3dae0c354c910c977e46ae6 Mon Sep 17 00:00:00 2001 From: Clay Martinez Date: Thu, 7 Sep 2023 17:31:12 -0500 Subject: [PATCH 5/8] =?UTF-8?q?Modifique=20talwind.config=20para=20habilit?= =?UTF-8?q?ar=20y=20modificar=20los=20breakpoint.=20container=5Fpage=20cam?= =?UTF-8?q?bieel=20importa=20de=20NavBar.=20iconos:=20a=20varios=20iconos?= =?UTF-8?q?=20le=20quite=20el=20stroke-widht=20que=20estaba=20generando=20?= =?UTF-8?q?un=20error,=20cree=20iconos=20carShoping,=20hamburguerClose,=20?= =?UTF-8?q?hamburguerOpen,=20Login,=20en=20index=20de=20img=20assets=20agr?= =?UTF-8?q?egue=20la=20imagen=20del=20logo=20sin=20letras=20para=20el=20na?= =?UTF-8?q?vbar,=20agregue=20a=20assets=20img=20la=20imagen=20del=20carrit?= =?UTF-8?q?o=20sin=20letras.=20iconText.tsx=20lo=20modifique=20para=20que?= =?UTF-8?q?=20los=20iconos=20no=20tengan=20un=20mismo=20tama=C3=B1o,=20aho?= =?UTF-8?q?ra=20el=20tama=C3=B1o=20se=20lo=20damos=20con=20className=20cua?= =?UTF-8?q?ndo=20llamamos=20a=20iconText=20higth=20y=20width.=20pagination?= =?UTF-8?q?:=20elimino=20los=20strokes-width=20que=20generaban=20error,=20?= =?UTF-8?q?cambio=20value=20por=20placeholder=20que=20tambien=20generaba?= =?UTF-8?q?=20error.=20ThemeMode:=20le=20cambio=20el=20tama=C3=B1o=20por?= =?UTF-8?q?=20defecto.=20Mainbutton:=20lo=20modifico=20para=20poder=20usar?= =?UTF-8?q?=20className.=20brandCard:=20elimino=20el=20background=20que=20?= =?UTF-8?q?no=20dejaba=20ver=20el=20texto=20del=20hover.=20LandingCard:=20?= =?UTF-8?q?elimino=20el=20border=20y=20agrego=20shadow.=20containerCardsBr?= =?UTF-8?q?ands:=20modifico=20la=20cantidad=20de=20items=20por=20pagina.?= =?UTF-8?q?=20inputField:=20en=20lefticon=20le=20agrego=20un=20pading=20le?= =?UTF-8?q?ft.=20Paymethod:=20modifico=20el=20tama=C3=B1o=20del=20icontext?= =?UTF-8?q?=20con=20el=20className.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/container_page.tsx | 2 +- src/assets/icons/CarShoping.tsx | 18 ++ src/assets/icons/CardCredit.tsx | 24 +-- src/assets/icons/Cash.tsx | 2 +- src/assets/icons/HamburguerClose.tsx | 17 ++ src/assets/icons/HamburguerOpen.tsx | 18 ++ src/assets/icons/Login.tsx | 20 ++ src/assets/icons/Shield.tsx | 15 +- src/assets/icons/Truck.tsx | 13 +- src/assets/icons/warranty.tsx | 13 +- src/assets/img/index.ts | 13 +- src/assets/img/logo/AtcLogoNavBar.png | Bin 0 -> 2413 bytes src/components/IconText.tsx | 8 +- src/components/ThemeMode.tsx | 2 +- src/components/button/button.tsx | 8 +- src/components/cards/brandCard.tsx | 2 +- src/components/cards/landingCard.tsx | 2 +- .../containerCards/containerCardsBrands.tsx | 28 +-- src/components/inputs/InputField.tsx | 2 +- src/components/navBar/navBar.tsx | 196 ++++++++++++------ src/components/pagination.tsx | 7 +- src/components/paymentMethod/payMethod.tsx | 14 +- src/types/icons.d.ts | 2 +- tailwind.config.js | 6 +- 24 files changed, 302 insertions(+), 130 deletions(-) create mode 100644 src/assets/icons/CarShoping.tsx create mode 100644 src/assets/icons/HamburguerClose.tsx create mode 100644 src/assets/icons/HamburguerOpen.tsx create mode 100644 src/assets/icons/Login.tsx create mode 100644 src/assets/img/logo/AtcLogoNavBar.png diff --git a/src/app/container_page.tsx b/src/app/container_page.tsx index 5ee17d2..6966357 100644 --- a/src/app/container_page.tsx +++ b/src/app/container_page.tsx @@ -1,5 +1,5 @@ import { Footer } from '~/components/Footer'; -import { NavBar } from '~/components/navBar/navBar'; +import NavBar from '~/components/navBar/navBar'; type ContainerPageProps = { children: React.ReactNode; diff --git a/src/assets/icons/CarShoping.tsx b/src/assets/icons/CarShoping.tsx new file mode 100644 index 0000000..abb212a --- /dev/null +++ b/src/assets/icons/CarShoping.tsx @@ -0,0 +1,18 @@ +import React from 'react'; + +export default function Cash() { + return ( + + + + ); +} diff --git a/src/assets/icons/CardCredit.tsx b/src/assets/icons/CardCredit.tsx index ed593b2..4f39358 100644 --- a/src/assets/icons/CardCredit.tsx +++ b/src/assets/icons/CardCredit.tsx @@ -1,18 +1,18 @@ - import React from 'react'; export default function CardCredit() { return ( - - + + ); -} \ No newline at end of file +} diff --git a/src/assets/icons/Cash.tsx b/src/assets/icons/Cash.tsx index 5ed229e..ad22473 100644 --- a/src/assets/icons/Cash.tsx +++ b/src/assets/icons/Cash.tsx @@ -2,7 +2,7 @@ import React from 'react'; export default function Cash() { return ( - + ); diff --git a/src/assets/icons/HamburguerClose.tsx b/src/assets/icons/HamburguerClose.tsx new file mode 100644 index 0000000..4c68050 --- /dev/null +++ b/src/assets/icons/HamburguerClose.tsx @@ -0,0 +1,17 @@ +import React from 'react'; + +export default function HamburguerClose() { + return ( + + + + ); +} diff --git a/src/assets/icons/HamburguerOpen.tsx b/src/assets/icons/HamburguerOpen.tsx new file mode 100644 index 0000000..eca8faa --- /dev/null +++ b/src/assets/icons/HamburguerOpen.tsx @@ -0,0 +1,18 @@ +import React from 'react'; + +export default function HamburguerClose() { + return ( + + + + ); +} diff --git a/src/assets/icons/Login.tsx b/src/assets/icons/Login.tsx new file mode 100644 index 0000000..fb5d5fe --- /dev/null +++ b/src/assets/icons/Login.tsx @@ -0,0 +1,20 @@ +import React from 'react'; + +export default function Login() { + return ( + + + + ); +} diff --git a/src/assets/icons/Shield.tsx b/src/assets/icons/Shield.tsx index ef37a9b..d4cf638 100644 --- a/src/assets/icons/Shield.tsx +++ b/src/assets/icons/Shield.tsx @@ -2,8 +2,17 @@ import React from 'react'; export default function Shield() { return ( - - + + ); -} \ No newline at end of file +} diff --git a/src/assets/icons/Truck.tsx b/src/assets/icons/Truck.tsx index c9169ce..594bbef 100644 --- a/src/assets/icons/Truck.tsx +++ b/src/assets/icons/Truck.tsx @@ -2,8 +2,17 @@ import React from 'react'; export default function Truck() { return ( - - + + ); } diff --git a/src/assets/icons/warranty.tsx b/src/assets/icons/warranty.tsx index 1d5754e..ae7498a 100644 --- a/src/assets/icons/warranty.tsx +++ b/src/assets/icons/warranty.tsx @@ -2,8 +2,17 @@ import React from 'react'; export default function warranty() { return ( - - + + ); } diff --git a/src/assets/img/index.ts b/src/assets/img/index.ts index 5422f70..956159b 100644 --- a/src/assets/img/index.ts +++ b/src/assets/img/index.ts @@ -10,11 +10,11 @@ import LogoShieldRed from './logo/LogoATCShieldRed.webp'; import CompraSegura from './iconsImg/IconCompraSegura.webp'; import GarantiaServicioCliente from './iconsImg/IconGarantiaServicoAlCliente.webp'; import SelloGarantia from './iconsImg/SelloGarantia.webp'; -import FaviconRed from './favicon/FaviconRed.webp' +import FaviconRed from './favicon/FaviconRed.webp'; import FaviconRedWhite from './favicon/FaviconRedWhite.webp'; -import BannerCarrucelFarolas from './banners/BannerCarucelFarolas.webp' +import BannerCarrucelFarolas from './banners/BannerCarucelFarolas.webp'; import BannerCarrucelMainCategory from './banners/BannerCarucelMainCategory.webp'; -import BannerCarucelMainCategoryWithLogo from './banners/BannerCarucelMainCategoryWithLogo.webp' +import BannerCarucelMainCategoryWithLogo from './banners/BannerCarucelMainCategoryWithLogo.webp'; import BannnerCarrucelMainCategoryWhithLogo2 from './banners/BannerCarucelMainCategoryWithLogo2.webp'; import BannerCategoryCarRed from './banners/BannerCategoryCarRed.webp'; import BannerCarGreyLogo from './banners/BannerCategoryCarGreyLogo.webp'; @@ -23,7 +23,7 @@ import BannerWomenAndCar from './banners/BannerWomenAndCar.webp'; import CategoryFarolas from './banners/CategoryFarolas.webp'; import FlyerCategores from './banners/FlyerCategories.webp'; import LogoCardBanner from './banners/LogoCardBanner.webp'; - +import ActLogo from './logo/AtcLogoNavBar.png'; export const Images = { LogoATCBubbleBlack, @@ -50,5 +50,6 @@ export const Images = { BannerWomenAndCar, CategoryFarolas, FlyerCategores, - LogoCardBanner -}; \ No newline at end of file + LogoCardBanner, + ActLogo, +}; diff --git a/src/assets/img/logo/AtcLogoNavBar.png b/src/assets/img/logo/AtcLogoNavBar.png new file mode 100644 index 0000000000000000000000000000000000000000..19eaf72c18de86b01e771400e0cab39b9929d5fb GIT binary patch literal 2413 zcmV-z36l1SP)3_G|VBdOOz6!_%>z>$9e9s7aaewrPuz)1iJP@{?8 zl4HF~0**UW5$P$?TeQJ*^qlR_0|&naoGbw>D7XHM!BLB|KLIQb$V&nX#%rIM#uZGZ z9w4CmIHr^Id(w7gLdT4X8xy>lv=eo>G2FUny4lyox?P)->!bkZF)@Hn0)d$DNnXY| zwPKdua|+`!w>;|lJsMk1N#o?&oIgJ3eICz6^0ZE`b=bSNEyC7IF`?- z*#!0ha#s`8E*#PY?B=4ULZMTsAQZH^IzScAcGfHf*LB#IYp;~!IGPoYLt%uzA_xMn zSX6GI5NMAMab!eHEnWR<{FLrz1CCPAx40t7tuwVA3gr+$586Xv5`)d8mZab!7wIXo zzu~&4OMz3d!SnPIyr|Y=DLw>&)D~==zXi=qwws$%m_OfTU4^-Gt1xGdi*(vWeZ7mi zI-Y-(CMfeH@w^cfiv?0%=ks|C51-e)y*c;rVPAjopO341^-BDe`Qr{eLy-=mk05fm zlJ?Nz=kPSW@Dp6;8VhoDOjfa_^HzHevHp_`8=H8S z1~oO+1m@CQwe-^rixyx`v_()EoylZ5H=}!cGO3$StqN~X2cA$*jsw#sgOPxLlTFt) z#VqO{q%Ww+8ORGl?EDMseWaD7zp=eaMc%@KTN#^_qKT})w-G+~RNuf*(As(uvzg4- z*Yn1t6&e~eH70jX00#u;6PQP{9M#35m}F6Bvqj``Mcv;&q6Y^@*dBGijvg>r>CN~W zg}8$|^xIgsRN16D5trm1-L0lbt?YOSIX@t~hqN5#er_52U7KuM%yYMW%FiKRP1o>t zps|O1A4+&VRN(I8E}y2;!jo)edr=8F#rr+Sam$tY>>z?XoHDs-*}{2Gv-%RLo%64a z`d!!qz<0-FE^33nd{Ch?02ay#ws2F9`VD)h(T*`b>N4#IpIkg*3M z!8rCAR8Tmlp6l;*47e4{=a$m0jz{1mI5q{7pYKAF+pSe5#x#=Zl<60zo#PydO?k_U zC+p>A$2p)&GL#6IHd%*9fW!Pu(8|d^ZO&h3_KJiQ54g-W2UX%@&s2ru@?3jf)TS%l z!0Pb`T#taWzl{Nt)1~0QfV~fiBIC{}1E3(8y<<~K{;8ohYFW=xCIyqU>=pTN!-%_| z;Laq0N#Th%)|vy9(vKMw$M}uFu(&A>?kJ3%O1gDIfThfx`Mw1vLhR$rm)Q53Hi~ zF7_`bluCucAlz{$+rLAZluD21ieq`An4)J)F+)>4&68>?1|n@E&D6t&IC9E6HAJxY47$8b3mr!a3Vu-ktH%p-g@n4oGX` zF!TkIWF4=Qwv!$v-AlSXYo1eOU;S2=KgHJjtuFDdjE((CZ0xawELV+fNE2E{BY)It zq{p7HeEpSIx!AP0*!d;)5YPDtOpbSGx^$^RZ~{iYlSI}dar2Q>_?8Z3YM|CvQR@$p z|EwJ&nis8$S-04}J5XuircI;=0;3r@841{r>C%8NsBq0@?(@G2two+ZpSJVvw~2#f zKdbR>iZ;1uMP_y(g?ntKplwrt>LmSAk0&5u$;!LbB+-}WUsy9OblVH~CXpw!Sc$|! fdAD_zy8`b3uQAbXw&~qg00000NkvXXu0mjfeD{+| literal 0 HcmV?d00001 diff --git a/src/components/IconText.tsx b/src/components/IconText.tsx index 1dff086..4495ec5 100644 --- a/src/components/IconText.tsx +++ b/src/components/IconText.tsx @@ -1,15 +1,17 @@ +'use client'; import Icon from '~/assets/icons/icon'; import { IconTypes } from '~/types/icons'; interface Props { - text: string; + text?: string; icon: IconTypes; + className?: string; } -export default function IconText({ icon, text }: Props) { +export default function IconText({ icon, text, className }: Props) { return (

    - + {text} diff --git a/src/components/ThemeMode.tsx b/src/components/ThemeMode.tsx index f3be3f6..466a7d1 100644 --- a/src/components/ThemeMode.tsx +++ b/src/components/ThemeMode.tsx @@ -6,7 +6,7 @@ type ThemeModeButtonProps = { sizeIcon?: number; }; -export function ThemeModeButton({ sizeIcon = 30 }: ThemeModeButtonProps) { +export function ThemeModeButton({ sizeIcon = 35 }: ThemeModeButtonProps) { const { systemTheme, theme, setTheme } = useTheme(); const currentTheme = theme === 'system' ? systemTheme : theme; diff --git a/src/components/button/button.tsx b/src/components/button/button.tsx index 3056857..17e74a1 100644 --- a/src/components/button/button.tsx +++ b/src/components/button/button.tsx @@ -51,12 +51,17 @@ type MainButtonProps = { color?: 'default' | 'red'; children: React.ReactNode; className?: string; -}; +} & React.DetailedHTMLProps< + React.ButtonHTMLAttributes, + HTMLButtonElement +>; + export const MainButton: React.FC = ({ variant = 'default', color = 'default', className, children, + ...props }) => { const variant_style = variant === 'secondary' @@ -68,6 +73,7 @@ export const MainButton: React.FC = ({ return ( diff --git a/src/components/cards/brandCard.tsx b/src/components/cards/brandCard.tsx index 1caff38..921780b 100644 --- a/src/components/cards/brandCard.tsx +++ b/src/components/cards/brandCard.tsx @@ -20,7 +20,7 @@ const Card: FC = ({ title, imageSrc }) => {

    -

    +

    {title.toUpperCase()}

    diff --git a/src/components/cards/landingCard.tsx b/src/components/cards/landingCard.tsx index e4da8d7..3e7c92b 100644 --- a/src/components/cards/landingCard.tsx +++ b/src/components/cards/landingCard.tsx @@ -11,7 +11,7 @@ interface CardProps { const Card: FC = ({ title, price, nota, imageSrc }) => { return ( -
    +
    Cubre Volante { - const [pagination, setPagination] = useState({ page: 1, - itemsPage: 11, + itemsPage: 5, }); const maximo = Math.ceil(brand.length / pagination.itemsPage); @@ -41,16 +39,10 @@ const BrandCategory = ({ brand }: ContainerCardProps) => { return (
    -

    - Marcas -

    +

    Marcas

    {brand.slice(startIndex, endIndex).map((brand) => ( - + ))}
    @@ -64,4 +56,4 @@ const BrandCategory = ({ brand }: ContainerCardProps) => { ); }; -export default BrandCategory; \ No newline at end of file +export default BrandCategory; diff --git a/src/components/inputs/InputField.tsx b/src/components/inputs/InputField.tsx index 35bb05f..6d0036b 100644 --- a/src/components/inputs/InputField.tsx +++ b/src/components/inputs/InputField.tsx @@ -39,7 +39,7 @@ export function InputField({
    {leftIcon && (
    {leftIcon}
    diff --git a/src/components/navBar/navBar.tsx b/src/components/navBar/navBar.tsx index d3ac8f0..4095078 100644 --- a/src/components/navBar/navBar.tsx +++ b/src/components/navBar/navBar.tsx @@ -1,60 +1,133 @@ 'use client'; import Image from 'next/image'; -import React from 'react'; +import React, { FC, useState } from 'react'; import { Images } from '~/assets/img'; import ButtonComponent, { MainButton } from '../button/button'; import { DropDownMenu } from '../dropdownMenu/dropdownMenu'; import { ThemeModeButton } from '../ThemeMode'; import { InputField } from '../inputs/InputField'; +import Link from 'next/link'; +import IconText from '../IconText'; +import Icon from '~/assets/icons/icon'; + +interface NavBarProps {} + +const NavBar: FC = ({}) => { + const [isOpen, setIsOpen] = useState(false); + + const toggleNavbar = () => { + setIsOpen(!isOpen); + }; -export const NavBar = () => { return ( -
    - + {/* Input */} +
    { } /> -
    - - Ingresar - - - - - - - +
    + {/* Menu mobile */} + {isOpen && ( + - + )}
    ); }; + +export default NavBar; diff --git a/src/components/pagination.tsx b/src/components/pagination.tsx index 10546e4..27b25df 100644 --- a/src/components/pagination.tsx +++ b/src/components/pagination.tsx @@ -29,7 +29,7 @@ const Pagination: FC = ({ xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" > - + = ({ className="w-12 h-7 border text-center" name="page" autoComplete="off" - value={page} + placeholder={page + ''} />

    de {maximo}

    @@ -65,14 +65,13 @@ const Pagination: FC = ({ xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" > - + - {' '} {' '} diff --git a/src/components/paymentMethod/payMethod.tsx b/src/components/paymentMethod/payMethod.tsx index c8ea413..e4cae2e 100644 --- a/src/components/paymentMethod/payMethod.tsx +++ b/src/components/paymentMethod/payMethod.tsx @@ -6,15 +6,15 @@ interface PaymentMethodProps { link: string; } -const PaymentMethod: React.FC = ({ imageSrc, title, link }) => { +const PaymentMethod: React.FC = ({ + imageSrc, + title, + link, +}) => { return ( diff --git a/src/types/icons.d.ts b/src/types/icons.d.ts index 642a002..539c939 100644 --- a/src/types/icons.d.ts +++ b/src/types/icons.d.ts @@ -1 +1 @@ -export type IconTypes = | 'CardCredit' | 'Cash' | 'Facebook' | 'icon' | 'Instagram' | 'MapLocation' | 'Moon' | 'Shield' | 'Sun' | 'Truck' | 'warranty' | 'Whatsapp' \ No newline at end of file +export type IconTypes = | 'CardCredit' | 'CarShoping' | 'Cash' | 'Facebook' | 'HamburguerClose' | 'HamburguerOpen' | 'icon' | 'Instagram' | 'Login' | 'MapLocation' | 'Moon' | 'Shield' | 'Sun' | 'Truck' | 'warranty' | 'Whatsapp' \ No newline at end of file diff --git a/tailwind.config.js b/tailwind.config.js index 66439ac..06ed4c5 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -21,12 +21,12 @@ module.exports = { 'text-dm': '#f1f1f1', white: '#fff', }, - screen: { + screens: { xs: '480px', ms: '768px', - md: '990px', + md: '1080px', lg: '1200px', - xl: '1480', + xl: '1480px', }, extend: {}, }, From db41415822559fa72a2b2d2bea9fc3a926ba334b Mon Sep 17 00:00:00 2001 From: Clay Martinez Date: Fri, 8 Sep 2023 15:23:11 -0500 Subject: [PATCH 6/8] agregue icono Searchicon para usarlo en el input. elimine el bg blanco del button defaul para usarlo en el nav que es transparente. inputField elimine el borde. --- src/assets/icons/SearchIcon.tsx | 18 +++ src/components/button/button.tsx | 2 +- src/components/inputs/InputField.tsx | 4 +- src/components/navBar/navBar.tsx | 226 ++++++++++++--------------- src/types/icons.d.ts | 2 +- 5 files changed, 123 insertions(+), 129 deletions(-) create mode 100644 src/assets/icons/SearchIcon.tsx diff --git a/src/assets/icons/SearchIcon.tsx b/src/assets/icons/SearchIcon.tsx new file mode 100644 index 0000000..fddda84 --- /dev/null +++ b/src/assets/icons/SearchIcon.tsx @@ -0,0 +1,18 @@ +import React from 'react'; + +export default function CardCredit() { + return ( + + + + ); +} diff --git a/src/components/button/button.tsx b/src/components/button/button.tsx index 17e74a1..3aa3fd2 100644 --- a/src/components/button/button.tsx +++ b/src/components/button/button.tsx @@ -68,7 +68,7 @@ export const MainButton: React.FC = ({ ? `border ${color === 'red' ? 'border-primary-lm text-primary-lm' : ''}` : variant === 'tertiary' ? `${color === 'red' ? 'text-primary-lm' : ''}` - : `${color === 'red' ? 'bg-primary-lm text-white' : 'bg-white'}`; + : `${color === 'red' ? 'bg-primary-lm text-white' : 'bg-none'}`; return (