🎨 styles: product info detail

:%s

src/components/modules/product-detail/ProductInfoDetail/ProductInfoDetail.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import ProductImgs from './components/ProductImgs/ProductImgs'
+import ProductInfo from './components/ProductInfo/ProductInfo'
+import s from './ProductInfoDetail.module.scss'
+
+interface Props {
+    className?: string
+    children?: any
+}
+
+const ProductInfoDetail = ({ }: Props) => {
+    return (
+        <section className={s.productInfoDetail}>
+            <ProductImgs/>
+            <ProductInfo/>
+        </section >
+    )
+}
+
+export default ProductInfoDetail

src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.module.scss

@@ -0,0 +1,6 @@
+.productImgs {
+    .img {
+        @apply w-full h-full;
+        object-fit: cover;
+    }
+}

src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import { CarouselCommon } from 'src/components/common'
+import s from './ProductImgs.module.scss'
+
+interface ImgProps {
+    src: string, alt?: string
+}
+
+interface Props {
+    className?: string
+    children?: any,
+    // data: ImgProps[]
+}
+
+const ProductImgs = ({ }: Props) => {
+    return (
+        <section className={s.productImgs}>
+            {/* <CarouselCommon<ImgProps>  /> */}
+            <img className={s.img} src="https://user-images.githubusercontent.com/76729908/130574371-3b75fa72-9552-4605-aba9-a4b31cd9dce7.png" alt="" />
+        </section >
+    )
+}
+
+export default ProductImgs

src/components/modules/product-detail/ProductInfoDetail/components/ProductInfo/ProductInfo.module.scss

@@ -0,0 +1,40 @@
+@import "../../../../../../styles/utilities";
+
+.productInfo {
+    .info {
+        margin-bottom: 3.2rem;
+        .heading {
+            @apply heading-2 font-heading;
+            margin-top: 0.8rem;
+        }
+        .price {
+            margin-top: 0.8rem;
+            .old {
+                margin-bottom: 0.8rem;
+                .number {
+                    margin-right: 0.8rem;
+                    color: var(--text-label);
+                    text-decoration: line-through;
+                }
+            }
+            .current {
+                @apply text-active;
+            }
+        }
+        .description {
+            margin-top: 0.8rem;
+        }
+    }
+    .bottom {
+        @screen md {
+            margin-top: 2.4rem;
+            max-width: 39rem;
+            button {
+                @apply w-full;
+                &:first-child {
+                    margin-bottom: 0.8rem;
+                }
+            }
+        }
+    }
+}

src/components/modules/product-detail/ProductInfoDetail/components/ProductInfo/ProductInfo.tsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import { ButtonCommon, LabelCommon, QuanittyInput } from 'src/components/common'
+import { LANGUAGE } from 'src/utils/language.utils'
+import s from './ProductInfo.module.scss'
+
+interface Props {
+    className?: string
+    children?: any,
+}
+
+const ProductInfo = ({ }: Props) => {
+    return (
+        <section className={s.productInfo}>
+            <div className={s.info}>
+                <LabelCommon shape='half'>SEAFOOD</LabelCommon>
+                <h2 className={s.heading}>SeaPAk</h2>
+                <div className={s.price}>
+                    <div className={s.old}>
+                        <span className={s.number}>Rp 32.000</span>
+                        <LabelCommon type='discount'>-15%</LabelCommon>
+                    </div>
+                    <div className={s.current}>Rp 27.500</div>
+                </div>
+                <div className={s.description}>
+                    In a large non-reactive dish, mix together the orange juice, soy sauce, olive oil, lemon juice, parsley
+                </div>
+            </div>
+            <QuanittyInput />
+            <div className={s.bottom}>
+                <ButtonCommon size='large'>{LANGUAGE.BUTTON_LABEL.BUY_NOW}</ButtonCommon>
+                <ButtonCommon size='large' type='light'>{LANGUAGE.BUTTON_LABEL.ADD_TO_CARD}</ButtonCommon>
+            </div>
+        </section >
+    )
+}
+
+export default ProductInfo

src/components/modules/product-detail/index.ts

@@ -0,0 +1 @@
+export { default as ProductInfoDetail } from './ProductInfoDetail/ProductInfoDetail'