feat: Author Datetime bug: CheckboxCommon

next-env.d.ts

@@ -1,6 +1,3 @@
 /// <reference types="next" />
 /// <reference types="next/types/global" />
 /// <reference types="next/image-types/global" />
-
-// NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.

package.json

@@ -74,7 +74,6 @@
     "prettier": "^2.3.0",
     "typescript": "4.3.4"
   },
-
   "lint-staged": {
     "**/*.{js,jsx,ts,tsx}": [
       "prettier --write",

pages/index.tsx

@@ -1,6 +1,6 @@
 
-import { CarouselCommon, LabelCommon, Layout, QuanittyInput,CheckboxCommon } from 'src/components/common'
-
+import { CarouselCommon, LabelCommon, Layout, QuanittyInput,CheckboxCommon ,Author,DateTime} from 'src/components/common'
+import imgAuthor from '../src/components/common/Author/img/author.png';
 const dataTest = [{
   text: 1
 }, {
@@ -18,8 +18,9 @@ const test = (props: { text: string }) => <div className="h-64 bg-yellow-300">{p
 export default function Home() {
   return (
     <>
-      
       <CheckboxCommon defaultChecked={true}></CheckboxCommon>
+      <Author image={imgAuthor} name="Alessandro Del Piero"></Author>
+      <DateTime date="april 30,2021"></DateTime>
     </>
   )
 }

src/components/common/Author/Author.module.scss

@@ -0,0 +1,17 @@
+.authorWarper{
+    @apply flex flex-row items-center;
+    
+    .authorImage{
+        width:3.2rem;
+        height:3.2rem;
+        border-radius:3.2rem;
+    }
+    .authorName{
+        margin-left:1rem;
+        color:var(--text-label);
+        font-family: var(--font-sans);
+        font-size: 1.2rem;
+        line-height: 2rem;
+        font-feature-settings: 'salt' on;
+    }
+}

src/components/common/Author/Author.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import s from './Author.module.scss';
+import classNames from 'classnames';
+
+import Image from "next/image";
+interface Props {
+    image:any,
+    name: string
+}
+
+const Author = ({image,name}:Props) =>{
+
+    return (
+        <div className={classNames(s.authorWarper)}>
+            <Image className={classNames(s.authorImage)}  src={image}  alt=""/>
+            <div className={classNames(s.authorName)}>{name}</div>
+        </div>
+    )
+}
+
+export default Author;

src/components/common/CheckboxCommon/CheckboxCommon.module.scss

@@ -1,12 +1,11 @@
 @import '../../../styles/utilities';
 .checkboxCommonWarper{
     @apply flex flex-col;
-    margin-left:2rem;
+
     .checkboxItem{
         display: block;
         position: relative;
         cursor: pointer;
-        margin-top:2rem;
         border-radius: 0.4rem;
         width:50%;
         &:hover .checkboxInput ~ .checkMark {
@@ -62,5 +61,10 @@
     }
     .checkboxText{
         margin-left:3rem;
+        font-size:1.2rem;
+        line-height: 2rem;
+        font-family: var(--font-sans);
+        color:var(--text-base);
+        letter-spacing: 0.01em;
     }
 }

src/components/common/CheckboxCommon/CheckboxCommon.tsx

@@ -1,4 +1,4 @@
-import React,{useState,useEffect} from 'react';
+import React,{ChangeEvent,useState,useEffect} from 'react';
 import s from './CheckboxCommon.module.scss';
 import classNames from 'classnames';
 
@@ -12,7 +12,7 @@ interface CheckboxProps extends Omit<
 
 const CheckboxCommon = ({onChange,defaultChecked = true,...props}: CheckboxProps) =>{
     
-    const [value, setValue] = useState<boolean>();
+    const [value, setValue] = useState<boolean>(true);
 
     useEffect(()=>{
         onChange && onChange(value)
@@ -31,7 +31,7 @@ const CheckboxCommon = ({onChange,defaultChecked = true,...props}: CheckboxProps
                 <span className={s.checkMark}></span>
              </label>
              <div className={classNames(s.checkboxText)}>
-                <label for="check"> Billing address is same as shipping </label>
+                <label htmlFor="check"> Billing address is same as shipping </label>
              </div>
         </div>
     )

src/components/common/DateTime/DateTime.module.scss

@@ -0,0 +1,9 @@
+.dateTime{
+    color:var(--text-label);
+    text-transform: uppercase;
+    font-size: 1.2rem;
+    line-height: 2rem;
+    letter-spacing: 0.01em;
+    font-feature-settings: 'salt' on;
+    font-family: var(--font-sans);
+}

src/components/common/DateTime/DateTime.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import s from './DateTime.module.scss';
+import classNames from 'classnames';
+
+interface Props {
+    date:string,
+}
+
+const DateTime = ({date}:Props) =>{
+    return (
+      <div  className={classNames(s.dateTime)}>{date}</div>
+    )
+}
+
+export default DateTime;

src/components/common/index.ts

@@ -8,4 +8,6 @@ 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 CheckboxCommon} from './CheckboxCommon/CheckboxCommon'
+export { default as CheckboxCommon} from './CheckboxCommon/CheckboxCommon'
+export { default as Author} from './Author/Author'
+export { default as DateTime} from './DateTime/DateTime'