diff --git a/pages/demo.tsx b/pages/demo.tsx new file mode 100644 index 000000000..5ca1c8040 --- /dev/null +++ b/pages/demo.tsx @@ -0,0 +1,13 @@ +import { Layout, RecipeDetail } from 'src/components/common'; +import { ProductInfoDetail } from 'src/components/modules/product-detail' + + + +export default function Demo() { + return <> + + + +} + +Demo.Layout = Layout diff --git a/pages/index.tsx b/pages/index.tsx index 0ddbcfe80..203cf253d 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -14,7 +14,7 @@ export default function Home() { - // todo: uncomment + {/* // todo: uncomment */} {/* */} ) diff --git a/pages/product/[slug].tsx b/pages/product/[slug].tsx index b26de19bb..adf1fd8dd 100644 --- a/pages/product/[slug].tsx +++ b/pages/product/[slug].tsx @@ -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 <> + } diff --git a/src/components/common/RecipeDetail/RecipeDetail.module.scss b/src/components/common/RecipeDetail/RecipeDetail.module.scss new file mode 100644 index 000000000..64c8db389 --- /dev/null +++ b/src/components/common/RecipeDetail/RecipeDetail.module.scss @@ -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; + } + } + } + } +} diff --git a/src/components/common/RecipeDetail/RecipeDetail.tsx b/src/components/common/RecipeDetail/RecipeDetail.tsx new file mode 100644 index 000000000..715c61ed2 --- /dev/null +++ b/src/components/common/RecipeDetail/RecipeDetail.tsx @@ -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 ( +
+
+ Recipe +
+
+
+

+ Crispy Fried Calamari +

+ +
+
+
+

Ingredients

+
    +
  • Canola oil for frying
    • +
  • 1 pound clean squid bodies cut in 1/4 inch rings and dried with a paper towel
    • +
  • 2 cups flour
    • +
  • 1/2 teaspoon kosher salt
    • +
  • 1/2 teaspoon garlic powder
    • +
  • 1/8 teaspoon coarse ground black pepper
    • +
  • 1 lemon cut into wedges
    • +
+
+ +
+

Preparation

+
    +
  • 1In a large pot or dutch oven add three inches of oil and bring to 350 degrees.
    • +
  • Add the flour, salt, garlic powder and pepper to a large bowl and stir to combine.
    • +
  • Toss the squid pieces in the flour then into the hot oil.
    • +
  • Fry the squid for 1-2 minutes. You want the color to stay pale like in the pictures.
    • +
  • Remove to a cookie sheet to drain (do not add paper towels as it will steam the calamari and make it soft.)
    • +
  • Serve with lemon wedges.
    • +
+
+ +
+
+
+ ) +} + +export default RecipeDetail diff --git a/src/components/common/RecipeDetail/components/RecipeBriefInfo/RecipeBriefInfo.module.scss b/src/components/common/RecipeDetail/components/RecipeBriefInfo/RecipeBriefInfo.module.scss new file mode 100644 index 000000000..56f1e6500 --- /dev/null +++ b/src/components/common/RecipeDetail/components/RecipeBriefInfo/RecipeBriefInfo.module.scss @@ -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; + } + } +} diff --git a/src/components/common/RecipeDetail/components/RecipeBriefInfo/RecipeBriefInfo.tsx b/src/components/common/RecipeDetail/components/RecipeBriefInfo/RecipeBriefInfo.tsx new file mode 100644 index 000000000..d06387914 --- /dev/null +++ b/src/components/common/RecipeDetail/components/RecipeBriefInfo/RecipeBriefInfo.tsx @@ -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 ( +
+
+ +
15 minutes
+
+
+ +
4 People
+
+
+ +
15 minutes
+
+
+ ) +} + +export default RecipeBriefInfo diff --git a/src/components/common/index.ts b/src/components/common/index.ts index def6d83b0..8f193bd5f 100644 --- a/src/components/common/index.ts +++ b/src/components/common/index.ts @@ -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' diff --git a/src/components/icons/IconLocation.tsx b/src/components/icons/IconLocation.tsx new file mode 100644 index 000000000..3dc0a81b9 --- /dev/null +++ b/src/components/icons/IconLocation.tsx @@ -0,0 +1,11 @@ +import React from 'react' + +const IconLocation = () => { + return ( + + + + ) +} + +export default IconLocation diff --git a/src/components/icons/IconPeople.tsx b/src/components/icons/IconPeople.tsx new file mode 100644 index 000000000..0075b0f75 --- /dev/null +++ b/src/components/icons/IconPeople.tsx @@ -0,0 +1,11 @@ +import React from 'react' + +const IconPeople = () => { + return ( + + + + ) +} + +export default IconPeople diff --git a/src/components/icons/IconTime.tsx b/src/components/icons/IconTime.tsx new file mode 100644 index 000000000..81064df9d --- /dev/null +++ b/src/components/icons/IconTime.tsx @@ -0,0 +1,11 @@ +import React from 'react' + +const IconTime = () => { + return ( + + + + ) +} + +export default IconTime diff --git a/src/components/icons/index.ts b/src/components/icons/index.ts index d71c1bbec..8180f1001 100644 --- a/src/components/icons/index.ts +++ b/src/components/icons/index.ts @@ -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' diff --git a/src/styles/_base.scss b/src/styles/_base.scss index e17e36944..339db22d2 100644 --- a/src/styles/_base.scss +++ b/src/styles/_base.scss @@ -79,5 +79,6 @@ html { } a { - -webkit-tap-highlight-color: var(--text-active); + -webkit-tap-highlight-color: var(--primary); + color: var(--primary); }