crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-04 04:01:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

🎨 styles: component recipe detail

Browse Source 
:%s
This commit is contained in:
lytrankieio123 2021-09-01 16:04:07 +07:00
parent a7d0eb051c
commit 6169634dca
13 changed files with 224 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
pages/demo.tsx Normal file
View File

@ -0,0 +1,13 @@
import { Layout, RecipeDetail } from 'src/components/common';
import { ProductInfoDetail } from 'src/components/modules/product-detail'
export default function Demo() {
return <>
<ProductInfoDetail />
<RecipeDetail />
</>
}
Demo.Layout = Layout

2
pages/index.tsx
View File

@ -14,7 +14,7 @@ export default function Home() {
<HomeRecipe />
<HomeSubscribe />
// todo: uncomment
{/* // todo: uncomment */}
{/* <ModalCreateUserInfo/> */}
</>
)

3
pages/product/[slug].tsx
View File

@ -1,10 +1,11 @@
import { Layout } from 'src/components/common'
import { Layout, RecipeDetail } from 'src/components/common'
import { ProductInfoDetail } from 'src/components/modules/product-detail'
export default function Slug() {
return <>
<ProductInfoDetail/>
<RecipeDetail/>
</>
}

62
src/components/common/RecipeDetail/RecipeDetail.module.scss Normal file
View File

@ -0,0 +1,62 @@
@import "../../../styles/utilities";
.recipeDetail {
@apply spacing-horizontal;
margin: 5.6rem auto;
@screen md {
@apply flex;
}
.img {
width: fit-content;
margin: auto;
margin-top: 0;
@screen sm-only {
margin-bottom: 2rem;
}
@screen lg {
max-width: 60rem;
}
img {
@apply w-full;
object-fit: contain;
max-height: 64rem;
border-radius: 2.4rem;
@screen md {
max-height: 90rem;
}
}
}
.recipeInfo {
@screen md {
max-width: 39rem;
margin-left: 4.8rem;
}
@screen lg {
margin-left: 11.2rem;
}
.top {
margin-bottom: 4.8rem;
.name {
@apply heading-1 font-heading;
margin-bottom: 1.6rem;
}
}
.detail {
.item {
&:not(:last-child) {
margin-bottom: 2.4rem;
}
.heading {
@apply heading-3 font-heading;
margin-bottom: 0.8rem;
}
.content {
list-style: disc;
margin-left: 2rem;
}
}
}
}
}

59
src/components/common/RecipeDetail/RecipeDetail.tsx Normal file
View File

@ -0,0 +1,59 @@
import React from 'react'
import RecipeBriefInfo from './components/RecipeBriefInfo/RecipeBriefInfo'
import s from './RecipeDetail.module.scss'
interface Props {
className?: string
children?: any
}
const RecipeDetail = ({ }: Props) => {
return (
<section className={s.recipeDetail}>
<div className={s.img}>
<img src="https://user-images.githubusercontent.com/76729908/131634880-8ae1437b-d3f8-421e-a546-d5a4f9a28e5f.png" alt="Recipe" />
</div>
<div className={s.recipeInfo}>
<div className={s.top}>
<h1 className={s.name}>
Crispy Fried Calamari
</h1>
<RecipeBriefInfo />
</div>
<div className={s.detail}>
<div className={s.item}>
<h3 className={s.heading}>Ingredients</h3>
<ul className={s.content}>
<li>Canola oil for frying</li>
<li>1 pound clean squid bodies cut in 1/4 inch rings and dried with a paper towel</li>
<li>2 cups flour</li>
<li>1/2 teaspoon kosher salt</li>
<li>1/2 teaspoon garlic powder</li>
<li>1/8 teaspoon coarse ground black pepper</li>
<li>1 lemon cut into wedges</li>
</ul>
</div>
<div className={s.item}>
<h3 className={s.heading}>Preparation</h3>
<ul className={s.content}>
<li>1In a large pot or dutch oven add three inches of oil and bring to 350 degrees.</li>
<li>Add the flour, salt, garlic powder and pepper to a large bowl and stir to combine.</li>
<li>Toss the squid pieces in the flour then into the hot oil.</li>
<li>Fry the squid for 1-2 minutes. You want the color to stay pale like in the pictures.</li>
<li>Remove to a cookie sheet to drain (do not add paper towels as it will steam the calamari and make it soft.)</li>
<li>Serve with lemon wedges.</li>
</ul>
</div>
<div className={s.item}>
<h3 className={s.heading}>Link</h3>
<a href="https://dinnerthendessert.com/crispy-fried-calamari" target="_blank" rel="noopener noreferrer">https://dinnerthendessert.com/crispy-fried-calamari</a>
</div>
</div>
</div>
</section >
)
}
export default RecipeDetail

19
src/components/common/RecipeDetail/components/RecipeBriefInfo/RecipeBriefInfo.module.scss Normal file
View File

@ -0,0 +1,19 @@
.recipeBriefInfo {
@apply flex;
.item {
@apply flex;
&:not(:last-child) {
margin-right: 2.4rem;
}
svg {
width: 2rem;
height: 2rem;
path {
fill: var(--text-label);
}
}
.content {
margin-left: 0.8rem;
}
}
}

29
src/components/common/RecipeDetail/components/RecipeBriefInfo/RecipeBriefInfo.tsx Normal file
View File

@ -0,0 +1,29 @@
import React from 'react'
import { IconLocation, IconPeople, IconTime } from 'src/components/icons'
import s from './RecipeBriefInfo.module.scss'
interface Props {
className?: string
children?: any,
}
const RecipeBriefInfo = ({ }: Props) => {
return (
<section className={s.recipeBriefInfo}>
<div className={s.item}>
<IconTime />
<div className={s.content}>15 minutes</div>
</div>
<div className={s.item}>
<IconPeople />
<div className={s.content}>4 People</div>
</div>
<div className={s.item}>
<IconLocation />
<div className={s.content}>15 minutes</div>
</div>
</section >
)
}
export default RecipeBriefInfo

1
src/components/common/index.ts
View File

@ -31,3 +31,4 @@ export { default as SelectCommon} from './SelectCommon/SelectCommon'
export { default as ModalCommon} from './ModalCommon/ModalCommon'
export { default as ModalCreateUserInfo} from './ModalCreateUserInfo/ModalCreateUserInfo'
export { default as ImgWithLink} from './ImgWithLink/ImgWithLink'
export { default as RecipeDetail} from './RecipeDetail/RecipeDetail'

11
src/components/icons/IconLocation.tsx Normal file
View File

@ -0,0 +1,11 @@
import React from 'react'
const IconLocation = () => {
return (
<svg width="18" height="22" viewBox="0 0 18 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.9999 3.47991C13.4086 1.88861 11.2504 0.994629 8.99993 0.994629C6.74949 0.994629 4.59123 1.88861 2.99993 3.47991C1.40863 5.07121 0.514648 7.22947 0.514648 9.47991C0.514648 11.7303 1.40863 13.8886 2.99993 15.4799L8.26993 20.7599C8.36289 20.8536 8.47349 20.928 8.59535 20.9788C8.71721 21.0296 8.84792 21.0557 8.97993 21.0557C9.11194 21.0557 9.24265 21.0296 9.36451 20.9788C9.48637 20.928 9.59697 20.8536 9.68993 20.7599L14.9999 15.4299C16.5846 13.8452 17.4748 11.696 17.4748 9.45491C17.4748 7.21386 16.5846 5.06459 14.9999 3.47991ZM13.5699 13.9999L8.99993 18.5899L4.42993 13.9999C3.52707 13.0962 2.91241 11.9452 2.66362 10.6922C2.41484 9.43925 2.54312 8.14066 3.03223 6.96059C3.52135 5.78052 4.34935 4.77196 5.41156 4.06239C6.47377 3.35281 7.72251 2.97409 8.99993 2.97409C10.2773 2.97409 11.5261 3.35281 12.5883 4.06239C13.6505 4.77196 14.4785 5.78052 14.9676 6.96059C15.4567 8.14066 15.585 9.43925 15.3362 10.6922C15.0875 11.9452 14.4728 13.0962 13.5699 13.9999ZM5.99993 6.40991C5.19264 7.21968 4.73932 8.31648 4.73932 9.45991C4.73932 10.6033 5.19264 11.7001 5.99993 12.5099C6.59969 13.1107 7.36352 13.521 8.19558 13.6893C9.02764 13.8576 9.89088 13.7765 10.677 13.4561C11.4631 13.1356 12.1371 12.5902 12.6144 11.8882C13.0917 11.1861 13.3511 10.3588 13.3599 9.50991C13.3644 8.94311 13.2553 8.38117 13.0388 7.8573C12.8224 7.33343 12.5032 6.85827 12.0999 6.45991C11.7036 6.05449 11.231 5.73145 10.7094 5.50938C10.1877 5.2873 9.62727 5.17059 9.06033 5.16594C8.49339 5.16129 7.93113 5.26881 7.4059 5.4823C6.88067 5.69579 6.40285 6.01104 5.99993 6.40991ZM10.6899 11.0899C10.311 11.4747 9.81014 11.7158 9.27306 11.7722C8.73597 11.8285 8.19599 11.6966 7.74544 11.3988C7.29488 11.1011 6.96173 10.6562 6.80294 10.14C6.64415 9.62384 6.66958 9.06855 6.87489 8.56907C7.0802 8.06958 7.45263 7.65693 7.92851 7.40165C8.4044 7.14637 8.95418 7.06432 9.48387 7.16953C10.0135 7.27474 10.4902 7.56067 10.8324 7.97844C11.1746 8.39621 11.3611 8.91988 11.3599 9.45991C11.3454 10.0772 11.0864 10.6634 10.6399 11.0899H10.6899Z" fill="#8F8F8F" />
</svg>
)
}
export default IconLocation

11
src/components/icons/IconPeople.tsx Normal file
View File

@ -0,0 +1,11 @@
import React from 'react'
const IconPeople = () => {
return (
<svg width="22" height="18" viewBox="0 0 22 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.3 9.22C11.8336 8.75813 12.2616 8.18688 12.5549 7.54502C12.8482 6.90316 13 6.20571 13 5.5C13 4.17392 12.4732 2.90215 11.5355 1.96447C10.5979 1.02678 9.32608 0.5 8 0.5C6.67392 0.5 5.40215 1.02678 4.46447 1.96447C3.52678 2.90215 3 4.17392 3 5.5C2.99999 6.20571 3.1518 6.90316 3.44513 7.54502C3.73845 8.18688 4.16642 8.75813 4.7 9.22C3.30014 9.85388 2.11247 10.8775 1.27898 12.1685C0.445495 13.4596 0.00147185 14.9633 0 16.5C0 16.7652 0.105357 17.0196 0.292893 17.2071C0.48043 17.3946 0.734784 17.5 1 17.5C1.26522 17.5 1.51957 17.3946 1.70711 17.2071C1.89464 17.0196 2 16.7652 2 16.5C2 14.9087 2.63214 13.3826 3.75736 12.2574C4.88258 11.1321 6.4087 10.5 8 10.5C9.5913 10.5 11.1174 11.1321 12.2426 12.2574C13.3679 13.3826 14 14.9087 14 16.5C14 16.7652 14.1054 17.0196 14.2929 17.2071C14.4804 17.3946 14.7348 17.5 15 17.5C15.2652 17.5 15.5196 17.3946 15.7071 17.2071C15.8946 17.0196 16 16.7652 16 16.5C15.9985 14.9633 15.5545 13.4596 14.721 12.1685C13.8875 10.8775 12.6999 9.85388 11.3 9.22ZM8 8.5C7.40666 8.5 6.82664 8.32405 6.33329 7.99441C5.83994 7.66476 5.45542 7.19623 5.22836 6.64805C5.0013 6.09987 4.94189 5.49667 5.05764 4.91473C5.1734 4.33279 5.45912 3.79824 5.87868 3.37868C6.29824 2.95912 6.83279 2.6734 7.41473 2.55764C7.99667 2.44189 8.59987 2.5013 9.14805 2.72836C9.69623 2.95542 10.1648 3.33994 10.4944 3.83329C10.8241 4.32664 11 4.90666 11 5.5C11 6.29565 10.6839 7.05871 10.1213 7.62132C9.55871 8.18393 8.79565 8.5 8 8.5ZM17.74 8.82C18.38 8.09933 18.798 7.20905 18.9438 6.25634C19.0896 5.30362 18.9569 4.32907 18.5618 3.45C18.1666 2.57093 17.5258 1.8248 16.7165 1.30142C15.9071 0.77805 14.9638 0.499742 14 0.5C13.7348 0.5 13.4804 0.605357 13.2929 0.792893C13.1054 0.98043 13 1.23478 13 1.5C13 1.76522 13.1054 2.01957 13.2929 2.20711C13.4804 2.39464 13.7348 2.5 14 2.5C14.7956 2.5 15.5587 2.81607 16.1213 3.37868C16.6839 3.94129 17 4.70435 17 5.5C16.9986 6.02524 16.8593 6.5409 16.5961 6.99542C16.3328 7.44994 15.9549 7.82738 15.5 8.09C15.3517 8.17552 15.2279 8.29766 15.1404 8.44474C15.0528 8.59182 15.0045 8.7589 15 8.93C14.9958 9.09976 15.0349 9.2678 15.1137 9.41826C15.1924 9.56872 15.3081 9.69665 15.45 9.79L15.84 10.05L15.97 10.12C17.1754 10.6917 18.1923 11.596 18.901 12.7263C19.6096 13.8566 19.9805 15.1659 19.97 16.5C19.97 16.7652 20.0754 17.0196 20.2629 17.2071C20.4504 17.3946 20.7048 17.5 20.97 17.5C21.2352 17.5 21.4896 17.3946 21.6771 17.2071C21.8646 17.0196 21.97 16.7652 21.97 16.5C21.9782 14.9654 21.5938 13.4543 20.8535 12.1101C20.1131 10.7659 19.0413 9.63331 17.74 8.82Z" fill="#8F8F8F" />
</svg>
)
}
export default IconPeople

11
src/components/icons/IconTime.tsx Normal file
View File

@ -0,0 +1,11 @@
import React from 'react'
const IconTime = () => {
return (
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10 0C8.02219 0 6.08879 0.58649 4.4443 1.6853C2.79981 2.78412 1.51809 4.3459 0.761209 6.17317C0.00433284 8.00043 -0.193701 10.0111 0.192152 11.9509C0.578004 13.8907 1.53041 15.6725 2.92894 17.0711C4.32746 18.4696 6.10929 19.422 8.0491 19.8079C9.98891 20.1937 11.9996 19.9957 13.8268 19.2388C15.6541 18.4819 17.2159 17.2002 18.3147 15.5557C19.4135 13.9112 20 11.9778 20 10C20 8.68678 19.7413 7.38642 19.2388 6.17317C18.7363 4.95991 17.9997 3.85752 17.0711 2.92893C16.1425 2.00035 15.0401 1.26375 13.8268 0.761205C12.6136 0.258658 11.3132 0 10 0ZM10 18C8.41775 18 6.87104 17.5308 5.55544 16.6518C4.23985 15.7727 3.21447 14.5233 2.60897 13.0615C2.00347 11.5997 1.84504 9.99113 2.15372 8.43928C2.4624 6.88743 3.22433 5.46197 4.34315 4.34315C5.46197 3.22433 6.88743 2.4624 8.43928 2.15372C9.99113 1.84504 11.5997 2.00346 13.0615 2.60896C14.5233 3.21447 15.7727 4.23984 16.6518 5.55544C17.5308 6.87103 18 8.41775 18 10C18 12.1217 17.1572 14.1566 15.6569 15.6569C14.1566 17.1571 12.1217 18 10 18ZM10 4C9.73479 4 9.48043 4.10536 9.2929 4.29289C9.10536 4.48043 9 4.73478 9 5V9.42L6.9 10.63C6.70736 10.7392 6.5564 10.9092 6.47078 11.1134C6.38517 11.3176 6.36975 11.5444 6.42695 11.7583C6.48414 11.9722 6.61072 12.1611 6.78682 12.2953C6.96292 12.4296 7.17859 12.5015 7.4 12.5C7.57518 12.5012 7.7476 12.4564 7.9 12.37L10.5 10.87L10.59 10.78L10.75 10.65C10.7891 10.6005 10.8226 10.5468 10.85 10.49C10.8826 10.4363 10.9094 10.3793 10.93 10.32C10.9572 10.2564 10.9741 10.1889 10.98 10.12L11 10V5C11 4.73478 10.8946 4.48043 10.7071 4.29289C10.5196 4.10536 10.2652 4 10 4Z" fill="#8F8F8F" />
</svg>
)
}
export default IconTime

3
src/components/icons/index.ts
View File

@ -19,3 +19,6 @@ export { default as IconPassword } from './IconPassword'
export { default as IconPasswordCross } from './IconPasswordCross'
export { default as IconError } from './IconError'
export { default as IconCheck } from './IconCheck'
export { default as IconTime } from './IconTime'
export { default as IconPeople } from './IconPeople'
export { default as IconLocation } from './IconLocation'

3
src/styles/_base.scss
View File

@ -79,5 +79,6 @@ html {
}
a {
-webkit-tap-highlight-color: var(--text-active);
-webkit-tap-highlight-color: var(--primary);
color: var(--primary);
}