) => {
+ onChange && onChange(e.target.value)
+ }
+
+ const handleKeyDown = (e: any) => {
+ if (e.key === KEY.ENTER && onEnter) {
+ const value = inputElementRef.current?.value || ''
+ onEnter(value)
+ }
+ }
+
+ return (
+
+ {
+ icon && {icon}
+ }
+
+
+ )
+
+})
+
+export default InputCommon
diff --git a/src/components/common/InputSearch/InputSearch.tsx b/src/components/common/InputSearch/InputSearch.tsx
new file mode 100644
index 000000000..9c02a239c
--- /dev/null
+++ b/src/components/common/InputSearch/InputSearch.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import { IconSearch } from 'src/components/icons';
+import { LANGUAGE } from 'src/utils/language.utils';
+import { Inputcommon } from '..';
+
+interface Props {
+ onChange?: (value: string | number) => void,
+ onEnter?: (value: string | number) => void,
+}
+
+const InputSearch = ({ onChange, onEnter }: Props) => {
+ return (
+ }
+ onChange={onChange}
+ onEnter={onEnter}
+ />
+ )
+}
+
+export default InputSearch
diff --git a/src/components/common/ProductCard/ProductCard.module.scss b/src/components/common/ProductCard/ProductCard.module.scss
new file mode 100644
index 000000000..a854a7d2b
--- /dev/null
+++ b/src/components/common/ProductCard/ProductCard.module.scss
@@ -0,0 +1,52 @@
+.productCardWarpper{
+ max-width: 20.8rem;
+ max-height: 31.8rem;
+ padding: 1.2rem 1.2rem 0 1.2rem;
+ @apply border border-solid border-black;
+ .cardTop{
+ @apply border border-solid border-yellow-300 relative;
+ max-height: 13.8rem;
+ .productImage{
+ @apply flex justify-center items-center;
+ img{
+ @apply inline;
+ }
+ .productLabel{
+ @apply absolute left-0 bottom-0;
+ }
+ }
+ }
+ .cardMid{
+ padding: 1.6rem 0;
+ .cardMid{
+ .productname{
+ font-weight: bold;
+ line-height: 2.4rem;
+ font-size: 1.6rem;
+ color: var(--text-active);
+ }
+ .productWeight{
+ font-size: 1.2rem;
+ line-height: 2rem;
+ letter-spacing: 0.01em;
+ color: var(--text-base);
+ }
+ }
+ .cardMidBot{
+ margin-top: 2.8rem;
+ @apply flex justify-between items-center border-t border-solid border-line;
+ .productPrice{
+ @apply font-bold;
+ font-size: 2rem;
+ line-height: 2.8rem;
+ letter-spacing: -0.01em;
+ }
+ }
+ }
+ .cardBot{
+ @apply flex justify-between items-center;
+ .cardButton{
+ width: 13.6rem;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/components/common/ProductCard/ProductCard.tsx b/src/components/common/ProductCard/ProductCard.tsx
new file mode 100644
index 000000000..1422c4a3b
--- /dev/null
+++ b/src/components/common/ProductCard/ProductCard.tsx
@@ -0,0 +1,59 @@
+import React from 'react'
+import ButtonCommon from '../ButtonCommon/ButtonCommon'
+import ButtonIconBuy from '../ButtonIconBuy/ButtonIconBuy'
+import ItemWishList from '../ItemWishList/ItemWishList'
+import LabelCommon from '../LabelCommon/LabelCommon'
+import s from './ProductCard.module.scss'
+
+interface ProductCardProps {
+ category: string
+ name: string
+ weight: string
+ price: string
+ buttonText?: string
+ imageSrc: string
+}
+
+const ProductCard = ({
+ category,
+ name,
+ weight,
+ price,
+ buttonText = 'Buy Now',
+ imageSrc,
+}: ProductCardProps) => {
+ return (
+
+
+
+
+
+ {category}
+
+
+
+
+
+ {buttonText}
+
+
+
+ )
+}
+
+export default ProductCard
diff --git a/src/components/common/index.ts b/src/components/common/index.ts
index 6cc7b42d9..7ac42e353 100644
--- a/src/components/common/index.ts
+++ b/src/components/common/index.ts
@@ -3,7 +3,11 @@ export { default as Layout } from './Layout/Layout'
export { default as CarouselCommon } from './CarouselCommon/CarouselCommon'
export { default as QuanittyInput } from './QuanittyInput/QuanittyInput'
export { default as LabelCommon } from './LabelCommon/LabelCommon'
+export { default as ProductCard } from './ProductCard/ProductCard'
export { default as Head } from './Head/Head'
export { default as ViewAllItem} from './ViewAllItem/ViewAllItem'
export { default as ItemWishList} from './ItemWishList/ItemWishList'
-export { default as Logo} from './Logo/Logo'
\ No newline at end of file
+export { default as Logo} from './Logo/Logo'
+export { default as Inputcommon} from './InputCommon/InputCommon'
+export { default as InputSearch} from './InputSearch/InputSearch'
+export { default as ButtonIconBuy} from './ButtonIconBuy/ButtonIconBuy'
diff --git a/src/components/icons/IconSearch.tsx b/src/components/icons/IconSearch.tsx
new file mode 100644
index 000000000..4fc3633b2
--- /dev/null
+++ b/src/components/icons/IconSearch.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+
+const IconSearch = () => {
+ return (
+
+ )
+}
+
+export default IconSearch
diff --git a/src/components/icons/index.ts b/src/components/icons/index.ts
index 155948269..c82e4fa76 100644
--- a/src/components/icons/index.ts
+++ b/src/components/icons/index.ts
@@ -1 +1,3 @@
export { default as IconBuy } from './IconBuy'
+export { default as IconSearch } from './IconSearch'
+
diff --git a/src/styles/_base.scss b/src/styles/_base.scss
index abffa0914..123e581a9 100644
--- a/src/styles/_base.scss
+++ b/src/styles/_base.scss
@@ -32,7 +32,8 @@
--disabled: #cccccc;
--border-line: #ebebeb;
- --background: #f8f8f8;
+ --background: #fff;
+ --gray: #f8f8f8;
--white: #fbfbfb;
--background-arrow:rgba(20, 20, 20, 0.05);
--font-size: 1.6rem;
diff --git a/src/styles/_utilities.scss b/src/styles/_utilities.scss
index 53a0d952b..20093a1b2 100644
--- a/src/styles/_utilities.scss
+++ b/src/styles/_utilities.scss
@@ -89,7 +89,7 @@
}
}
.custom-border-radius {
- border-radius: 60% 10% 60% 2%/ 10% 40% 10% 50%;
+ border-radius: 60% 10% 60% 2%/ 10% 20% 10% 50%;
}
.font-heading {
diff --git a/src/utils/constanst.utils.ts b/src/utils/constanst.utils.ts
index 538cfe306..94f253622 100644
--- a/src/utils/constanst.utils.ts
+++ b/src/utils/constanst.utils.ts
@@ -1,12 +1,3 @@
-
-
-export enum ButonType {
- primary = 'primary',
- light = 'light',
+export const KEY = {
+ ENTER: 'Enter',
}
-
-export enum ButtonSize {
- default = 'default',
- large = 'large',
-}
-
diff --git a/src/utils/language.utils.ts b/src/utils/language.utils.ts
index 4343ed9db..3f8d61926 100644
--- a/src/utils/language.utils.ts
+++ b/src/utils/language.utils.ts
@@ -3,4 +3,7 @@ export const LANGUAGE = {
BUY_NOW: 'Buy now',
SHOP_NOW: 'Shop now',
},
+ PLACE_HOLDER: {
+ SEARCH: 'Search',
+ }
}
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
index d2fe7ee70..2882c260c 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -52,6 +52,11 @@ module.exports = {
'background-arrow':'var(--background-arrow)',
'disabled': 'var(--text-disabled)',
+ line: 'var(--border-line)',
+ background: 'var(--background)',
+ white: 'var(--white)',
+ gray: 'var(--gray)',
+ disabled: 'var(--text-disabled)',
// @deprecated (NOT use these variables)
'primary-2': 'var(--primary-2)',