From 3d278320801d5fd6379f4eaa3f04fac8ae819b29 Mon Sep 17 00:00:00 2001 From: quangnhankie Date: Thu, 26 Aug 2021 09:23:01 +0700 Subject: [PATCH] feat: Author Datetime bug: CheckboxCommon --- next-env.d.ts | 3 --- package.json | 1 - pages/index.tsx | 7 +++--- .../common/Author/Author.module.scss | 17 ++++++++++++++ src/components/common/Author/Author.tsx | 21 ++++++++++++++++++ src/components/common/Author/img/author.png | Bin 0 -> 1645 bytes .../CheckboxCommon/CheckboxCommon.module.scss | 8 +++++-- .../common/CheckboxCommon/CheckboxCommon.tsx | 6 ++--- .../common/DateTime/DateTime.module.scss | 9 ++++++++ src/components/common/DateTime/DateTime.tsx | 15 +++++++++++++ src/components/common/index.ts | 4 +++- 11 files changed, 78 insertions(+), 13 deletions(-) create mode 100644 src/components/common/Author/Author.module.scss create mode 100644 src/components/common/Author/Author.tsx create mode 100644 src/components/common/Author/img/author.png create mode 100644 src/components/common/DateTime/DateTime.module.scss create mode 100644 src/components/common/DateTime/DateTime.tsx diff --git a/next-env.d.ts b/next-env.d.ts index 9bc3dd46b..c6643fda1 100644 --- a/next-env.d.ts +++ b/next-env.d.ts @@ -1,6 +1,3 @@ /// /// /// - -// NOTE: This file should not be edited -// see https://nextjs.org/docs/basic-features/typescript for more information. diff --git a/package.json b/package.json index 387ca946b..60f049ce4 100644 --- a/package.json +++ b/package.json @@ -74,7 +74,6 @@ "prettier": "^2.3.0", "typescript": "4.3.4" }, - "lint-staged": { "**/*.{js,jsx,ts,tsx}": [ "prettier --write", diff --git a/pages/index.tsx b/pages/index.tsx index 9374596a6..1f438f12f 100644 --- a/pages/index.tsx +++ b/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 }) =>
{p export default function Home() { return ( <> - + + ) } diff --git a/src/components/common/Author/Author.module.scss b/src/components/common/Author/Author.module.scss new file mode 100644 index 000000000..0459a9fbb --- /dev/null +++ b/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; + } +} \ No newline at end of file diff --git a/src/components/common/Author/Author.tsx b/src/components/common/Author/Author.tsx new file mode 100644 index 000000000..bbb389fbd --- /dev/null +++ b/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 ( +
+ +
{name}
+
+ ) +} + +export default Author; \ No newline at end of file diff --git a/src/components/common/Author/img/author.png b/src/components/common/Author/img/author.png new file mode 100644 index 0000000000000000000000000000000000000000..70c922bc67a3fbce3b836fd1806b6a74df60cfb2 GIT binary patch literal 1645 zcmV-z29o)SP)$$$;MDkVH7B0DA_&CSup$o-3+1c6D)z{C^ z)XvY-#mLZCH#0&gB0nc0J0u|0)z!nt&uK|TKq(|YCLvlmHB>b)JtZK=$%>rlOggpr4YG zgoulRgM@j1fsK8BopF1ee0h(2bCY&%gKKDhYG`?5VrXApWmaC0Xk17~N?A=wS3^i+ zNg zf7(zKhr`_6-Q6uN5C|cGlptj-Rwz((Ln>R_b#}Cx{dYPV{i=J|M4in&Ft_`xl^}2du~Yf7{f5@H@z)` zz5Luxf3^2pw{D$-k27U}c)sb#KCfi&(@wImkJlkNco>G6nEk=|tJf>{+3iU0MZf#| zN)i%7U_Ba-$L}Q)=gwcN;3bLg`^%x~jVMJJMfD8I9I2?RsH(3<5XA27mpw;U7}e`b zN;pD?6=}7JMCG~a$_jTltVg77O1&crX6uO}oetA#i;F*1RaIAQdx&8sT?y<}hID~p zgpcUCHEVQ5fZAB!c75a7N5#cj%tVxQ1vkL+yu_>5a=JAfimXLnSMS_-`rXZtHiQ*n zx{)eq#8QXDqefR8J9YB-u~#owp53|qY)f)kHtLsJ!lC%62}<~)nVVE9(w+S0tU)z!F5)3|GwCOI7%lbh=) zjYN*-Y+h|JSbg7HcLy`|t$vbBk))7n8V}`yc%tf+3Sh1AU1`g>J|tS4W^-CFi)n#^ zqUzFUsTu$UTMae7y2~xB>+tpVrE%381x5l z!Df?1d@wXT8ZBK5>ksARS*#k(i>H@Zwz=6AaN@GjRwxJNL#m!&*9^SjCvfT6@r$hA z<91^{;%imo3w rX9@IwRKo^N9!0oEPw6te-S7VcwdOC@0u^uF00000NkvXXu0mjfWQ-G5 literal 0 HcmV?d00001 diff --git a/src/components/common/CheckboxCommon/CheckboxCommon.module.scss b/src/components/common/CheckboxCommon/CheckboxCommon.module.scss index 00d6836b1..a26a23aec 100644 --- a/src/components/common/CheckboxCommon/CheckboxCommon.module.scss +++ b/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; } } \ No newline at end of file diff --git a/src/components/common/CheckboxCommon/CheckboxCommon.tsx b/src/components/common/CheckboxCommon/CheckboxCommon.tsx index 7493078e9..d901f91f4 100644 --- a/src/components/common/CheckboxCommon/CheckboxCommon.tsx +++ b/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(); + const [value, setValue] = useState(true); useEffect(()=>{ onChange && onChange(value) @@ -31,7 +31,7 @@ const CheckboxCommon = ({onChange,defaultChecked = true,...props}: CheckboxProps
- +
) diff --git a/src/components/common/DateTime/DateTime.module.scss b/src/components/common/DateTime/DateTime.module.scss new file mode 100644 index 000000000..db64a6434 --- /dev/null +++ b/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); +} \ No newline at end of file diff --git a/src/components/common/DateTime/DateTime.tsx b/src/components/common/DateTime/DateTime.tsx new file mode 100644 index 000000000..3e1b6288a --- /dev/null +++ b/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 ( +
{date}
+ ) +} + +export default DateTime; \ No newline at end of file diff --git a/src/components/common/index.ts b/src/components/common/index.ts index ca922bbb0..c0313b67e 100644 --- a/src/components/common/index.ts +++ b/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' \ No newline at end of file +export { default as CheckboxCommon} from './CheckboxCommon/CheckboxCommon' +export { default as Author} from './Author/Author' +export { default as DateTime} from './DateTime/DateTime' \ No newline at end of file