diff --git a/pages/index.tsx b/pages/index.tsx index 1d3072ef7..e428ff533 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,18 +1,37 @@ -import { Layout } from 'src/components/common' -import { HomeBanner, HomeCollection, HomeCTA, HomeSubscribe, HomeVideo, HomeCategories, HomeFeature, HomeRecipe } from 'src/components/modules/home'; +import { Layout } from 'src/components/common'; +import { HomeBanner, HomeCategories, HomeCollection, HomeCTA, HomeFeature, HomeRecipe, HomeSubscribe, HomeVideo } from 'src/components/modules/home'; +import {SelectCommon} from 'src/components/common' + +const OPTION_SORT = [ + { + name: "By Name" + }, + { + name: "Price (High to Low)" + }, + { + name: "On Sale" + } +] export default function Home() { return ( <> - + {/* + - + */} + Sort By + Sort By + + // todo: uncomment + {/* */} ) } diff --git a/src/components/common/Banner/Banner.module.scss b/src/components/common/Banner/Banner.module.scss index f4b374dd0..e69de29bb 100644 --- a/src/components/common/Banner/Banner.module.scss +++ b/src/components/common/Banner/Banner.module.scss @@ -1,52 +0,0 @@ -@import "../../../styles/utilities"; - -.banner { - @apply bg-primary-light custom-border-radius-lg overflow-hidden; - @screen md { - border: 1px solid var(--primary); - } - &.large { - margin-bottom: 2.8rem; - .inner { - @screen xl { - @apply bg-right-bottom; - background-size: unset; - } - } - } - .inner { - @apply bg-no-repeat; - background-size: 90%; - background-position: right -500% bottom 0%; - .content { - background-image: linear-gradient( - to right, - rgb(227, 242, 233, 0.9), - rgb(227, 242, 233, 0.5) 80%, - rgb(227, 242, 233, 0) - ); - padding: 1.6rem; - max-width: 37rem; - @screen md { - max-width: 49.6rem; - padding: 4.8rem; - } - .top { - .heading { - @apply heading-1 font-heading; - margin-bottom: 1.6rem; - } - .subHeading { - @apply sub-headline; - @screen md { - @apply caption; - } - } - } - - .bottom { - margin-top: 4rem; - } - } - } -} diff --git a/src/components/common/Banner/Banner.tsx b/src/components/common/Banner/Banner.tsx index a953052b6..1dbc04d9f 100644 --- a/src/components/common/Banner/Banner.tsx +++ b/src/components/common/Banner/Banner.tsx @@ -1,47 +1,24 @@ -import classNames from 'classnames' -import Link from 'next/link' import React, { memo } from 'react' -import { IconArrowRight } from 'src/components/icons' -import { ROUTE } from 'src/utils/constanst.utils' -import { LANGUAGE } from 'src/utils/language.utils' -import ButtonCommon from '../ButtonCommon/ButtonCommon' -import s from './Banner.module.scss' +import CarouselCommon from '../CarouselCommon/CarouselCommon' +import BannerItem, { BannerItemProps } from './BannerItem/BannerItem' interface Props { - imgLink: string, - title: string, - subtitle: string, - buttonLabel?: string, - linkButton?: string, - size?: 'small' | 'large', + data: BannerItemProps[], } -const Banner = memo(({ imgLink, title, subtitle, buttonLabel = LANGUAGE.BUTTON_LABEL.SHOP_NOW, linkButton = ROUTE.HOME, size = 'large' }: Props) => { +const option = { + slidesPerView: 1, + breakpoints: {} +} +const Banner = memo(({ data }: Props) => { return ( -
-
-
-
-

- {title} -

-
- {subtitle} -
-
- -
-
-
+ + data={data} + itemKey="banner" + Component={BannerItem} + option={option} + isDot = {true} + /> ) }) diff --git a/src/components/common/Banner/BannerItem/BannerItem.module.scss b/src/components/common/Banner/BannerItem/BannerItem.module.scss new file mode 100644 index 000000000..72690f92d --- /dev/null +++ b/src/components/common/Banner/BannerItem/BannerItem.module.scss @@ -0,0 +1,52 @@ +@import "../../../../styles/utilities"; + +.bannerItem { + @apply bg-primary-light custom-border-radius-lg overflow-hidden; + @screen md { + border: 1px solid var(--primary); + } + &.large { + margin-bottom: 2.8rem; + .inner { + @screen xl { + @apply bg-right-bottom; + background-size: unset; + } + } + } + .inner { + @apply bg-no-repeat; + background-size: 90%; + background-position: right -500% bottom 0%; + .content { + background-image: linear-gradient( + to right, + rgb(227, 242, 233, 0.9), + rgb(227, 242, 233, 0.5) 80%, + rgb(227, 242, 233, 0) + ); + padding: 1.6rem; + max-width: 37rem; + @screen md { + max-width: 49.6rem; + padding: 4.8rem; + } + .top { + .heading { + @apply heading-1 font-heading; + margin-bottom: 1.6rem; + } + .subHeading { + @apply sub-headline; + @screen md { + @apply caption; + } + } + } + + .bottom { + margin-top: 4rem; + } + } + } +} diff --git a/src/components/common/Banner/BannerItem/BannerItem.tsx b/src/components/common/Banner/BannerItem/BannerItem.tsx new file mode 100644 index 000000000..c7516d362 --- /dev/null +++ b/src/components/common/Banner/BannerItem/BannerItem.tsx @@ -0,0 +1,48 @@ +import classNames from 'classnames' +import Link from 'next/link' +import React, { memo } from 'react' +import { IconArrowRight } from 'src/components/icons' +import { ROUTE } from 'src/utils/constanst.utils' +import { LANGUAGE } from 'src/utils/language.utils' +import ButtonCommon from '../../ButtonCommon/ButtonCommon' +import s from './BannerItem.module.scss' + +export interface BannerItemProps { + imgLink: string, + title: string, + subtitle: string, + buttonLabel?: string, + linkButton?: string, + size?: 'small' | 'large', +} + +const BannerItem = memo(({ imgLink, title, subtitle, buttonLabel = LANGUAGE.BUTTON_LABEL.SHOP_NOW, linkButton = ROUTE.HOME, size = 'large' }: BannerItemProps) => { + return ( +
+
+
+
+

+ {title} +

+
+ {subtitle} +
+
+ +
+
+
+ ) +}) + +export default BannerItem diff --git a/src/components/common/Header/Header.tsx b/src/components/common/Header/Header.tsx index 12d656026..e9a06b9a8 100644 --- a/src/components/common/Header/Header.tsx +++ b/src/components/common/Header/Header.tsx @@ -3,6 +3,7 @@ import React, { memo, useEffect, useState } from 'react' import { useModalCommon } from 'src/components/hooks/useModalCommon' import { isMobile } from 'src/utils/funtion.utils' import ModalAuthenticate from '../ModalAuthenticate/ModalAuthenticate' +import ModalCreateUserInfo from '../ModalCreateUserInfo/ModalCreateUserInfo' import HeaderHighLight from './components/HeaderHighLight/HeaderHighLight' import HeaderMenu from './components/HeaderMenu/HeaderMenu' import HeaderSubMenu from './components/HeaderSubMenu/HeaderSubMenu' @@ -13,6 +14,7 @@ import s from './Header.module.scss' const Header = memo(() => { const [isFullHeader, setIsFullHeader] = useState(true) const { visible: visibleModalAuthen, closeModal: closeModalAuthen, openModal: openModalAuthen } = useModalCommon({ initialValue: false }) + const { visible: visibleModalInfo, closeModal: closeModalInfo, openModal: openModalInfo } = useModalCommon({ initialValue: false }) useEffect(() => { window.addEventListener('scroll', handleScroll) @@ -35,12 +37,15 @@ const Header = memo(() => {
- +
+ ) }) diff --git a/src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx b/src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx index a5ef71951..969964608 100644 --- a/src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx +++ b/src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx @@ -11,14 +11,19 @@ interface Props { children?: any, isFull: boolean, openModalAuthen: () => void, + openModalInfo: () => void, } -const HeaderMenu = memo(({ isFull, openModalAuthen }: Props) => { +const HeaderMenu = memo(({ isFull, openModalAuthen, openModalInfo }: Props) => { const optionMenu = useMemo(() => [ { onClick: openModalAuthen, name: 'Login (Demo)', }, + { + onClick: openModalInfo, + name: 'Create User Info (Demo)', + }, { link: ROUTE.ACCOUNT, name: 'Account', diff --git a/src/components/common/InputCommon/InputCommon.module.scss b/src/components/common/InputCommon/InputCommon.module.scss index 1ef1fdbc7..acfc07647 100644 --- a/src/components/common/InputCommon/InputCommon.module.scss +++ b/src/components/common/InputCommon/InputCommon.module.scss @@ -1,51 +1,94 @@ @import "../../../styles/utilities"; .inputWrap { - @apply flex items-center relative; - .icon { - @apply absolute; - content: ""; - left: 1.6rem; - margin-right: 1.6rem; - svg path { - fill: currentColor; + .inputInner { + @apply flex items-center relative; + .icon { + @apply absolute flex justify-center items-center; + content: ""; + left: 1.6rem; + margin-right: 1.6rem; + svg path { + fill: currentColor; + } } - } - .icon + .inputCommon { - padding-left: 4.8rem; - } - .inputCommon { - @apply block w-full transition-all duration-200 rounded; - padding: 1.2rem 1.6rem; - border: 1px solid var(--border-line); - &:hover, - &:focus, - &:active { - outline: none; - border: 1px solid var(--primary); - @apply shadow-md; + .icon + .inputCommon { + padding-left: 4.8rem; } - &::placeholder { - @apply text-label; - } - - &.custom { - @apply custom-border-radius; - border: 1px solid transparent; - background: var(--gray); + .inputCommon { + @apply block w-full transition-all duration-200 rounded; + padding: 1.2rem 1.6rem; + border: 1px solid var(--border-line); &:hover, &:focus, &:active { + outline: none; border: 1px solid var(--primary); + @apply shadow-md; + } + + &::placeholder { + @apply text-label; + } + + &.custom { + @apply custom-border-radius; + border: 1px solid transparent; + background: var(--gray); + &:hover, + &:focus, + &:active { + border: 1px solid var(--primary); + } + } + &.bgTransparent { + background: rgb(227, 242, 233, 0.3); + color: var(--white); + &::placeholder { + color: var(--white); + } } } - &.bgTransparent { - background: rgb(227, 242, 233, 0.3); - color: var(--white); - &::placeholder { - color: var(--white); + + &.preserve { + @apply flex-row-reverse; + .icon { + left: unset; + right: 1.6rem; + margin-left: 1.6rem; + margin-right: 0; + svg path { + fill: var(--text-label); + } + } + .icon + .inputCommon { + padding-left: 1.6rem; + padding-right: 4.8rem; + } + } + &.success { + .icon { + svg path { + fill: var(--primary); + } + } + } + + &.error { + .icon { + svg path { + fill: var(--negative); + } + } + input { + border-color: var(--negative) !important; } } } + .errorMessage { + @apply caption; + color: var(--negative); + margin-top: 0.4rem; + } } diff --git a/src/components/common/InputCommon/InputCommon.tsx b/src/components/common/InputCommon/InputCommon.tsx index 6a42d5537..943b0a632 100644 --- a/src/components/common/InputCommon/InputCommon.tsx +++ b/src/components/common/InputCommon/InputCommon.tsx @@ -1,5 +1,6 @@ import classNames from 'classnames'; -import React, { forwardRef, useImperativeHandle, useRef } from 'react'; +import React, { forwardRef, useImperativeHandle, useMemo, useRef, useState } from 'react'; +import { IconCheck, IconError, IconPassword, IconPasswordCross } from 'src/components/icons'; import { KEY } from 'src/utils/constanst.utils'; import s from './InputCommon.module.scss'; @@ -14,14 +15,29 @@ interface Props { styleType?: 'default' | 'custom', backgroundTransparent?: boolean, icon?: React.ReactNode, + isIconSuffix?: boolean, + isShowIconSuccess?: boolean, + error?: string, onChange?: (value: string | number) => void, onEnter?: (value: string | number) => void, } const InputCommon = forwardRef(({ value, placeholder, type, styleType = 'default', icon, backgroundTransparent = false, + isIconSuffix, isShowIconSuccess, error, onChange, onEnter }: Props, ref) => { const inputElementRef = useRef(null); + const iconElement = useMemo(() => { + if (error) { + return + } else if (isShowIconSuccess) { + return + } else if (icon) { + return {icon} + } + return <> + }, [icon, error, isShowIconSuccess]) + useImperativeHandle(ref, () => ({ focus: () => { inputElementRef.current?.focus(); @@ -44,23 +60,33 @@ const InputCommon = forwardRef(({ value, placeholder, type, styleTyp } return ( -
+
+
+ {iconElement} + +
{ - icon && {icon} + error &&
{error}
} -
) diff --git a/src/components/common/InputPassword/InputPassword.module.scss b/src/components/common/InputPassword/InputPassword.module.scss new file mode 100644 index 000000000..598620891 --- /dev/null +++ b/src/components/common/InputPassword/InputPassword.module.scss @@ -0,0 +1,10 @@ +.iconPassword { + all: unset; + cursor: pointer; + &:focus { + outline: none; + } + &:focus-visible { + outline: 2px solid var(--text-active); + } +} diff --git a/src/components/common/InputPassword/InputPassword.tsx b/src/components/common/InputPassword/InputPassword.tsx new file mode 100644 index 000000000..83e91cfcc --- /dev/null +++ b/src/components/common/InputPassword/InputPassword.tsx @@ -0,0 +1,40 @@ +import React, { useState } from 'react'; +import { IconPassword, IconPasswordCross } from 'src/components/icons'; +import { Inputcommon } from '..'; +import s from './InputPassword.module.scss'; + +interface Props { + children?: React.ReactNode, + value?: string | number, + placeholder?: string, + styleType?: 'default' | 'custom', + error?: string, + onChange?: (value: string | number) => void, + onEnter?: (value: string | number) => void, +} + +const InputPassword = ({ value, placeholder, styleType = 'default', error, + onChange, onEnter }: Props) => { + const [isShowPassword, setIsShowPassword] = useState(false) + const toggleShowPassword = () => { + setIsShowPassword(!isShowPassword) + } + + return ( + + {isShowPassword ? : } + } + isIconSuffix={true} + onChange={onChange} + onEnter={onEnter} + /> + ) +} + +export default InputPassword diff --git a/src/components/common/ModalAuthenticate/components/FormAuthen.module.scss b/src/components/common/ModalAuthenticate/components/FormAuthen.module.scss index bdfc69387..2ec8bf91f 100644 --- a/src/components/common/ModalAuthenticate/components/FormAuthen.module.scss +++ b/src/components/common/ModalAuthenticate/components/FormAuthen.module.scss @@ -1,17 +1,12 @@ +@import '../../../../styles/utilities'; + .formAuthen { - @apply bg-white w-full; + @apply bg-white w-full u-form; .inner { @screen md { - max-width: 52rem; + width: 60rem; margin: auto; } - .body { - > div { - &:not(:last-child) { - margin-bottom: 1.6rem; - } - } - } .others { @apply font-bold text-center; margin-top: 4rem; diff --git a/src/components/common/ModalAuthenticate/components/FormLogin/FormLogin.tsx b/src/components/common/ModalAuthenticate/components/FormLogin/FormLogin.tsx index 7ef3ec9ba..bedb993f4 100644 --- a/src/components/common/ModalAuthenticate/components/FormLogin/FormLogin.tsx +++ b/src/components/common/ModalAuthenticate/components/FormLogin/FormLogin.tsx @@ -1,12 +1,12 @@ import Link from 'next/link' -import React, { useRef, useEffect } from 'react' -import { Inputcommon, ButtonCommon } from 'src/components/common' +import React, { useEffect, useRef } from 'react' +import { ButtonCommon, Inputcommon } from 'src/components/common' +import InputPassword from 'src/components/common/InputPassword/InputPassword' import { ROUTE } from 'src/utils/constanst.utils' -import SocialAuthen from '../SocialAuthen/SocialAuthen' -import s from '../FormAuthen.module.scss' -import styles from './FormLogin.module.scss' -import classNames from 'classnames' import { CustomInputCommon } from 'src/utils/type.utils' +import s from '../FormAuthen.module.scss' +import SocialAuthen from '../SocialAuthen/SocialAuthen' +import styles from './FormLogin.module.scss' interface Props { isHide: boolean, @@ -23,14 +23,13 @@ const FormLogin = ({ onSwitch, isHide }: Props) => { }, [isHide]) return ( -
+
- - + + {/* */} +
diff --git a/src/components/common/ModalAuthenticate/components/FormRegister/FormRegister.tsx b/src/components/common/ModalAuthenticate/components/FormRegister/FormRegister.tsx index 1624f2c1c..d03dbc39e 100644 --- a/src/components/common/ModalAuthenticate/components/FormRegister/FormRegister.tsx +++ b/src/components/common/ModalAuthenticate/components/FormRegister/FormRegister.tsx @@ -24,12 +24,11 @@ const FormRegister = ({ onSwitch, isHide }: Props) => {
- +
Must contain 8 characters with at least 1 uppercase and 1 lowercase letter and either 1 number or 1 special character.
diff --git a/src/components/common/ModalCommon/ModalCommon.module.scss b/src/components/common/ModalCommon/ModalCommon.module.scss index d4967b04e..87900b1a1 100644 --- a/src/components/common/ModalCommon/ModalCommon.module.scss +++ b/src/components/common/ModalCommon/ModalCommon.module.scss @@ -8,7 +8,7 @@ @apply flex justify-center items-center min-h-screen; .modal{ @apply inline-block align-bottom bg-white relative; - max-width: 60rem; + max-width: 66.4rem; padding: 3.2rem; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.24); border-radius: 1.2rem; @@ -17,7 +17,7 @@ } .title{ @apply font-heading heading-3; - padding: 0 0.8rem 0 0.8rem; + padding: 0 1.6rem 0 0.8rem; } .close{ @apply absolute; diff --git a/src/components/common/ModalCreateUserInfo/ModalCreateUserInfo.module.scss b/src/components/common/ModalCreateUserInfo/ModalCreateUserInfo.module.scss new file mode 100644 index 000000000..199028061 --- /dev/null +++ b/src/components/common/ModalCreateUserInfo/ModalCreateUserInfo.module.scss @@ -0,0 +1,19 @@ +@import "../../../styles/utilities"; + +.formUserInfo { + @apply u-form; + .inner { + @screen md { + width: 60rem; + margin: auto; + } + .bottom { + @apply grid grid-cols-2; + margin-top: 4rem; + grid-gap: 1.6rem; + > button { + @apply w-full; + } + } + } +} diff --git a/src/components/common/ModalCreateUserInfo/ModalCreateUserInfo.tsx b/src/components/common/ModalCreateUserInfo/ModalCreateUserInfo.tsx new file mode 100644 index 000000000..85817c930 --- /dev/null +++ b/src/components/common/ModalCreateUserInfo/ModalCreateUserInfo.tsx @@ -0,0 +1,46 @@ +import classNames from 'classnames'; +import Link from 'next/link'; +import React, { useRef } from 'react'; +import { useModalCommon } from 'src/components/hooks/useModalCommon'; +import { CustomInputCommon } from 'src/utils/type.utils'; +import { Inputcommon } from '..'; +import ButtonCommon from '../ButtonCommon/ButtonCommon'; +import ModalCommon from '../ModalCommon/ModalCommon'; +import s from './ModalCreateUserInfo.module.scss'; + +// todo: remove +interface Props { + demoVisible: boolean, + demoCloseModal: () => void, +} + + +const ModalCreateUserInfo = ({ demoVisible: visible, demoCloseModal: closeModal }: Props) => { + // const { visible, closeModal } = useModalCommon({ initialValue: false}) + const firstInputRef = useRef(null) + + return ( + +
+
+
+ + +
+ {/* todo: select, not input */} + + +
+ +
+
+ Skip + Submit +
+
+
+ + ); +} + +export default ModalCreateUserInfo; \ No newline at end of file diff --git a/src/components/common/SelectCommon/SelectCommon.module.scss b/src/components/common/SelectCommon/SelectCommon.module.scss index dcb9120da..d91b1831e 100644 --- a/src/components/common/SelectCommon/SelectCommon.module.scss +++ b/src/components/common/SelectCommon/SelectCommon.module.scss @@ -1,32 +1,69 @@ @import "../../../styles/utilities"; .select{ - @apply rounded-lg border-solid; - display: flex; - flex-direction: row; - justify-content: center; - align-items: center; - padding: 1.2rem 1.6rem; + background-color: var(--white); &.base{ - width: 18.6rem; - height: 4.8rem; + width: 20.6rem; + .selectTrigger{ + width: 20.6rem; + padding: 1.2rem 1.6rem; + } } &.large{ width: 34.25rem; - height: 5.6rem; + .selectTrigger{ + width: 34.25rem; + padding: 1.6rem 1.6rem; + } } &.default{ - @apply border; + .selectTrigger{ + @apply border-solid border border-current; + } + } + &.custom{ + .selectTrigger{ + @apply border-2; + border-color: var(--border-line); + color: var(--text-label); + } + } + &.isActive{ + .selectOptionWrapper{ + @apply block; + } + } +} +.selectTrigger{ + @apply outline-none flex justify-between; + color: var(--text-active); + border-radius: 0.8rem; + +} +.selectOptionWrapper{ + @apply outline-none hidden z-10 absolute; + border-radius: 0.8rem; + background-color: var(--white); + padding: 0.4rem 0rem 0.4rem 0rem; + margin-top: 0.6rem; + &.base{ + width: 20.6rem; + } + &.large{ + width: 34.25rem; + } + &.default{ + @apply border-solid border border-current; } &.custom{ @apply border-2; border-color: var(--border-line); color: var(--text-label); } - .option{ - &:hover{ - background-color: black; - } + &.active{ + @apply hidden; } } + + diff --git a/src/components/common/SelectCommon/SelectCommon.tsx b/src/components/common/SelectCommon/SelectCommon.tsx index 8360a700f..5bb3d15d6 100644 --- a/src/components/common/SelectCommon/SelectCommon.tsx +++ b/src/components/common/SelectCommon/SelectCommon.tsx @@ -1,26 +1,75 @@ import s from './SelectCommon.module.scss' import classNames from 'classnames' +import { useState, useRef, useEffect } from 'react' +import { IconVectorDown } from 'src/components/icons' +import SelectOption from './SelectOption/SelectOption' interface Props { - placeHolder? : string, + children? : React.ReactNode, size?: 'base' | 'large', type?: 'default' | 'custom', option: {name: string}[], } -const SelectCommon = ({ type = 'default', size = 'base', option, placeHolder }: Props) => { - return( - + else{ + setActive(false) + } + } + document.addEventListener('click', handleClick) + return () => { + document.removeEventListener('click', handleClick) + } + }, [ref]) + + const changeActiveStatus = () => { + setActive(!isActive) + } + + const changeSelectedName = (item:string) => { + setSelectedName(item) + } + return( + <> +
+
{selectedName}
+ +
+ { + option.map(item => + + ) + } +
+
+ ) } diff --git a/src/components/common/SelectCommon/SelectOption/SelectOption.module.scss b/src/components/common/SelectCommon/SelectOption/SelectOption.module.scss new file mode 100644 index 000000000..5448f9879 --- /dev/null +++ b/src/components/common/SelectCommon/SelectOption/SelectOption.module.scss @@ -0,0 +1,17 @@ +@import "../../../../styles/utilities"; + +.selectOption { + @apply outline-none; + background-color: var(--white); + &.base{ + width: 20.4rem; + padding: 0.8rem 1.6rem; + } + &.large{ + width: 33.75rem; + padding: 0.8rem 1.6rem; + } + &:hover{ + background-color: var(--gray); + } +} \ No newline at end of file diff --git a/src/components/common/SelectCommon/SelectOption/SelectOption.tsx b/src/components/common/SelectCommon/SelectOption/SelectOption.tsx new file mode 100644 index 000000000..54877d5fe --- /dev/null +++ b/src/components/common/SelectCommon/SelectOption/SelectOption.tsx @@ -0,0 +1,25 @@ +import s from './SelectOption.module.scss' +import classNames from 'classnames' + +interface Props{ + onClick: (value: string) => void, + itemName: string, + size: 'base' | 'large', +} + +const SelectOption = ({onClick, itemName, size}: Props) => { + + const changeName = () => { + onClick(itemName) + } + return( +
{itemName}
+ ) +} + +export default SelectOption \ No newline at end of file diff --git a/src/components/common/index.ts b/src/components/common/index.ts index ba7743f70..e8c279019 100644 --- a/src/components/common/index.ts +++ b/src/components/common/index.ts @@ -12,6 +12,7 @@ export { default as ViewAllItem} from './ViewAllItem/ViewAllItem' export { default as ItemWishList} from './ItemWishList/ItemWishList' export { default as Logo} from './Logo/Logo' export { default as Inputcommon} from './InputCommon/InputCommon' +export { default as InputPassword} from './InputPassword/InputPassword' export { default as CheckboxCommon} from './CheckboxCommon/CheckboxCommon' export { default as Author} from './Author/Author' export { default as DateTime} from './DateTime/DateTime' @@ -30,3 +31,4 @@ export { default as SelectCommon} from './SelectCommon/SelectCommon' export { default as ModalCommon} from './ModalCommon/ModalCommon' export { default as ModalConfirm} from "./ModalConfirm/ModalConfirm" export { default as ModalInfo} from "./ModalInfo/ModalInfo" +export { default as ModalCreateUserInfo} from './ModalCreateUserInfo/ModalCreateUserInfo' diff --git a/src/components/icons/IconCheck.tsx b/src/components/icons/IconCheck.tsx new file mode 100644 index 000000000..cbd1e861c --- /dev/null +++ b/src/components/icons/IconCheck.tsx @@ -0,0 +1,11 @@ +import React from 'react' + +const IconCheck = () => { + return ( + + + + ) +} + +export default IconCheck diff --git a/src/components/icons/IconError.tsx b/src/components/icons/IconError.tsx new file mode 100644 index 000000000..c7c59fb60 --- /dev/null +++ b/src/components/icons/IconError.tsx @@ -0,0 +1,11 @@ +import React from 'react' + +const IconError = () => { + return ( + + + + ) +} + +export default IconError diff --git a/src/components/icons/IconPassword.tsx b/src/components/icons/IconPassword.tsx new file mode 100644 index 000000000..e07c4dc22 --- /dev/null +++ b/src/components/icons/IconPassword.tsx @@ -0,0 +1,11 @@ +import React from 'react' + +const IconPassword = () => { + return ( + + + + ) +} + +export default IconPassword diff --git a/src/components/icons/IconPasswordCross.tsx b/src/components/icons/IconPasswordCross.tsx new file mode 100644 index 000000000..d05bbd713 --- /dev/null +++ b/src/components/icons/IconPasswordCross.tsx @@ -0,0 +1,11 @@ +import React from 'react' + +const IconPasswordCross = () => { + return ( + + + + ) +} + +export default IconPasswordCross diff --git a/src/components/icons/IconVectorDown.tsx b/src/components/icons/IconVectorDown.tsx new file mode 100644 index 000000000..019fc2806 --- /dev/null +++ b/src/components/icons/IconVectorDown.tsx @@ -0,0 +1,21 @@ + + +const IconVectorDown = ({ ...props }) => { + return ( + + + + ) + } + + export default IconVectorDown \ No newline at end of file diff --git a/src/components/icons/index.ts b/src/components/icons/index.ts index 02b4947cb..949b1f3b1 100644 --- a/src/components/icons/index.ts +++ b/src/components/icons/index.ts @@ -9,9 +9,14 @@ export { default as IconHome } from './IconHome' export { default as IconShopping } from './IconShopping' export { default as IconHeart } from './IconHeart' export { default as IconVector } from './IconVector' +export { default as IconVectorDown } from './IconVectorDown' export { default as IconFacebookColor } from './IconFacebookColor' export { default as IconGoogleColor } from './IconGoogleColor' export { default as IconApple } from './IconApple' export { default as ArrowLeft } from './ArrowLeft' export { default as ArrowRight } from './ArrowRight' export { default as Close } from './Close' +export { default as IconPassword } from './IconPassword' +export { default as IconPasswordCross } from './IconPasswordCross' +export { default as IconError } from './IconError' +export { default as IconCheck } from './IconCheck' diff --git a/src/components/modules/home/HomeBanner/HomeBanner.module.scss b/src/components/modules/home/HomeBanner/HomeBanner.module.scss index 3f41797d0..507558cad 100644 --- a/src/components/modules/home/HomeBanner/HomeBanner.module.scss +++ b/src/components/modules/home/HomeBanner/HomeBanner.module.scss @@ -5,6 +5,7 @@ margin-bottom: 2.8rem; .left { @apply hidden; + margin-bottom: 3rem; } @screen xl { @apply grid; diff --git a/src/components/modules/home/HomeBanner/HomeBanner.tsx b/src/components/modules/home/HomeBanner/HomeBanner.tsx index 8bbf75138..2a3a632fb 100644 --- a/src/components/modules/home/HomeBanner/HomeBanner.tsx +++ b/src/components/modules/home/HomeBanner/HomeBanner.tsx @@ -2,6 +2,7 @@ import React from 'react' import { Banner } from 'src/components/common' import s from './HomeBanner.module.scss' import BannerImgRight from './assets/banner_full.png' +import BannerImgRight2 from './assets/banner_product.png' interface Props { className?: string @@ -13,14 +14,25 @@ const HomeBanner = ({ }: Props) => {
- Freshness
guaranteed + Freshness
guaranteed
) diff --git a/src/components/modules/home/HomeBanner/assets/banner_product.png b/src/components/modules/home/HomeBanner/assets/banner_product.png new file mode 100644 index 000000000..82f1b7fee Binary files /dev/null and b/src/components/modules/home/HomeBanner/assets/banner_product.png differ diff --git a/src/styles/_utilities.scss b/src/styles/_utilities.scss index 93291dc3a..26cea17c0 100644 --- a/src/styles/_utilities.scss +++ b/src/styles/_utilities.scss @@ -80,7 +80,7 @@ font-size: 10px; line-height: 16px; } - + .spacing-horizontal { padding-left: 2rem; padding-right: 2rem; @@ -119,4 +119,22 @@ .font-logo { font-family: var(--font-logo); } + + .u-form { + .body { + > div { + &:not(:last-child) { + margin-bottom: 1.6rem; + } + } + .line { + @apply flex justify-between items-center; + > div { + &:not(:last-child) { + margin-right: 1.6rem; + } + } + } + } + } }