mirror of
https://github.com/vercel/commerce.git
synced 2025-07-09 22:31:21 +00:00
🐛 bug: style home categories
:%s
This commit is contained in:
lytrankieio123
parent
a5a0878a8f
commit
900c3633ed
@ -1,13 +1,6 @@
|
||||
|
||||
import { CarouselCommon, LabelCommon, Layout, QuanittyInput,CheckboxCommon ,Author,DateTime} from 'src/components/common'
|
||||
import { Layout } from 'src/components/common';
|
||||
import { HomeCategories } from 'src/components/modules/home';
|
||||
import imgAuthor from '../src/components/common/Author/img/author.png';
|
||||
|
||||
import veggle from '../src/components/modules/home/homeCategories/img/veggle.png';
|
||||
import seafood from '../src/components/modules/home/homeCategories/img/seafood.png';
|
||||
import frozen from '../src/components/modules/home/homeCategories/img/frozen.png';
|
||||
import coffeebean from '../src/components/modules/home/homeCategories/img/coffeebean.png';
|
||||
import sauce from '../src/components/modules/home/homeCategories/img/sauce.png';
|
||||
|
||||
|
||||
|
||||
@ -25,44 +18,14 @@ const dataTest = [{
|
||||
text: 6
|
||||
}]
|
||||
const test = (props: { text: string }) => <div className="h-64 bg-yellow-300">{props.text}</div>
|
||||
const categories = [
|
||||
{
|
||||
id:1,
|
||||
image:veggle,
|
||||
name:"Veggie",
|
||||
link:"veggie.html"
|
||||
}, {
|
||||
id:2,
|
||||
image:seafood,
|
||||
name:"Seafood",
|
||||
link:"seafood.html"
|
||||
}
|
||||
, {
|
||||
id:3,
|
||||
image:frozen,
|
||||
name:"Frozen",
|
||||
link:"frozen.html"
|
||||
}
|
||||
, {
|
||||
id:4,
|
||||
image:coffeebean,
|
||||
name:"Coffe Bean",
|
||||
link:"frozen.html"
|
||||
}
|
||||
, {
|
||||
id:5,
|
||||
image:sauce,
|
||||
name:"Sauce",
|
||||
link:"frozen.html"
|
||||
}
|
||||
]
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<>
|
||||
{/* <CheckboxCommon defaultChecked={true}></CheckboxCommon>
|
||||
<Author image={imgAuthor} name="Alessandro Del Piero"></Author>
|
||||
<DateTime date="april 30,2021"></DateTime>*/}
|
||||
<HomeCategories categories={categories}></HomeCategories>
|
||||
<HomeCategories />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
@ -1,80 +1,24 @@
|
||||
@import '../../../../../styles/_utilities';
|
||||
@import "../../../../../styles/_utilities";
|
||||
|
||||
.categoryItem{
|
||||
|
||||
@screen md{
|
||||
font-size:1.6rem;
|
||||
}
|
||||
.categoryItemImage{
|
||||
.categoryItem {
|
||||
.categoryItemImage {
|
||||
width: 10.6rem;
|
||||
margin: 0 auto;
|
||||
max-height: 14rem;
|
||||
object-fit: cover;
|
||||
cursor: pointer;
|
||||
@screen md{
|
||||
@screen md {
|
||||
width: 100%;
|
||||
}
|
||||
img{
|
||||
width:100%;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.categoryItemText{
|
||||
|
||||
font-size: 1.6rem;
|
||||
line-height: 2.4rem;
|
||||
.categoryItemText {
|
||||
@apply sub-headline;
|
||||
text-align: center;
|
||||
color: #000000;
|
||||
font-feature-settings: 'salt' on;
|
||||
font-feature-settings: "salt" on;
|
||||
cursor: pointer;
|
||||
@screen md{
|
||||
font-family: var(--font-sans);
|
||||
font-size:2.4rem;
|
||||
line-height: 3.2rem;
|
||||
}
|
||||
}
|
||||
// @screen md {
|
||||
// width:33%;
|
||||
|
||||
// }
|
||||
}
|
||||
|
||||
|
||||
|
||||
// @import '../../../../styles/utilities';
|
||||
// .homeFeature {
|
||||
// @apply spacing-horizontal-left;
|
||||
// vertical-align: middle;
|
||||
// @screen md {
|
||||
// @apply spacing-horizontal grid grid-cols-3;
|
||||
|
||||
// }
|
||||
// }
|
||||
// .homeFeatureItem {
|
||||
// @apply inline-block;
|
||||
|
||||
// .itemImg {
|
||||
// @apply float-left clear-both;
|
||||
// width: 5.6rem;
|
||||
// height: 5.6rem;
|
||||
// @screen md {
|
||||
// @apply float-left clear-both;
|
||||
// width: 11.2rem;
|
||||
// height: 11.2rem;
|
||||
// vertical-align: middle;
|
||||
// }
|
||||
// }
|
||||
// .itemText {
|
||||
// @apply collection-subtitle;
|
||||
// width: 28rem;
|
||||
// height: 9.6rem;
|
||||
// margin-left: 2.4rem;
|
||||
// @screen md {
|
||||
// @apply collection-subtitle text-justify;
|
||||
// width: 28rem;
|
||||
// height: 9.6rem;
|
||||
// margin-left: 2.4rem;
|
||||
// color: red;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
}
|
||||
@ -6,23 +6,27 @@ import Image from "next/image";
|
||||
import Link from 'next/link';
|
||||
|
||||
interface CategoryItem {
|
||||
image: string,
|
||||
image: StaticImageData,
|
||||
name: string,
|
||||
link: string
|
||||
}
|
||||
|
||||
const CategoryItem = ({image,name,link}:CategoryItem) => {
|
||||
const CategoryItem = ({ image, name, link }: CategoryItem) => {
|
||||
return (
|
||||
<div className={classNames(s.categoryItem)}>
|
||||
<div className={classNames(s.categoryItemImage)}>
|
||||
<Link href="#">
|
||||
<Image src={image} />
|
||||
<div className={classNames(s.categoryItemImage)}>
|
||||
<Link href={link}>
|
||||
<a>
|
||||
<Image src={image} />
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
<Link href="#">
|
||||
<div className={classNames(s.categoryItemText)}>{name}</div>
|
||||
<Link href={link}>
|
||||
<a>
|
||||
<div className={classNames(s.categoryItemText)}>{name}</div>
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
</div >
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -1,41 +1,21 @@
|
||||
@import '../../../../styles/_utilities';
|
||||
.homeCategoriesWrapper{
|
||||
@apply flex flex-col items-center justify-center ;
|
||||
width: 100%;
|
||||
background-color:white;
|
||||
|
||||
@screen md{
|
||||
background-color:var(--background);
|
||||
height: 36.531rem;
|
||||
@import "../../../../styles/_utilities";
|
||||
.homeCategoriesWrapper {
|
||||
@apply flex flex-col items-center justify-center spacing-horizontal;
|
||||
@screen md {
|
||||
background-color: var(--background);
|
||||
}
|
||||
|
||||
.homeCategoriesHeading{
|
||||
width: 100%;
|
||||
font-weight: bold;
|
||||
line-height: 0.64rem;
|
||||
@screen md{
|
||||
width:auto;
|
||||
}
|
||||
.headingCommon{
|
||||
font-size: 3.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.homeCategoryList {
|
||||
@apply spacing-horizontal flex justify-start items-center flex-wrap ;
|
||||
@apply flex justify-start items-center flex-wrap;
|
||||
margin: 1rem 0;
|
||||
@screen md{
|
||||
@apply flex-nowrap ;
|
||||
@screen md {
|
||||
@apply flex-nowrap;
|
||||
}
|
||||
.homeCategoriesItem{
|
||||
width: calc(100% / 3);
|
||||
@screen md{
|
||||
margin-top:2rem;
|
||||
width:100%;
|
||||
.homeCategoriesItem {
|
||||
width: calc(100% / 3);
|
||||
@screen md {
|
||||
margin-top: 2rem;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
@ -1,31 +1,67 @@
|
||||
import React from 'react';
|
||||
|
||||
import s from './HomeCategories.module.scss'
|
||||
import classNames from 'classnames';
|
||||
import CategoryItem from './CategoriesItem/CategoryItem';
|
||||
import React from 'react';
|
||||
import HeadingCommon from "../../../common/HeadingCommon/HeadingCommon";
|
||||
import CategoryItem from './CategoriesItem/CategoryItem';
|
||||
import s from './HomeCategories.module.scss';
|
||||
import coffeebean from './img/coffeebean.png';
|
||||
import frozen from './img/frozen.png';
|
||||
import sauce from './img/sauce.png';
|
||||
import seafood from './img/seafood.png';
|
||||
import veggle from './img/veggle.png';
|
||||
|
||||
interface HomeCategories {
|
||||
categories: any[]
|
||||
}
|
||||
|
||||
const HomeCategories = ({categories}:HomeCategories) => {
|
||||
const categories = [
|
||||
{
|
||||
id: 1,
|
||||
image: veggle,
|
||||
name: "Veggie",
|
||||
link: "veggie.html"
|
||||
}, {
|
||||
id: 2,
|
||||
image: seafood,
|
||||
name: "Seafood",
|
||||
link: "seafood.html"
|
||||
}
|
||||
, {
|
||||
id: 3,
|
||||
image: frozen,
|
||||
name: "Frozen",
|
||||
link: "frozen.html"
|
||||
}
|
||||
, {
|
||||
id: 4,
|
||||
image: coffeebean,
|
||||
name: "Coffe Bean",
|
||||
link: "frozen.html"
|
||||
}
|
||||
, {
|
||||
id: 5,
|
||||
image: sauce,
|
||||
name: "Sauce",
|
||||
link: "frozen.html"
|
||||
}
|
||||
]
|
||||
|
||||
const HomeCategories = () => {
|
||||
return (
|
||||
|
||||
<div className={classNames(s.homeCategoriesWrapper)}>
|
||||
<div className={classNames(s.homeCategoriesHeading)}>
|
||||
<HeadingCommon children="CATEGORIES"></HeadingCommon>
|
||||
</div>
|
||||
|
||||
<div className={classNames(s.homeCategoryList)}>
|
||||
{categories?.map((props,index)=>(
|
||||
<div key={index} className={classNames(s.homeCategoriesItem)}>
|
||||
<CategoryItem {...props}></CategoryItem>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className={classNames(s.homeCategoriesWrapper)}>
|
||||
<div className={classNames(s.homeCategoriesHeading)}>
|
||||
<HeadingCommon align='center' children="CATEGORIES"></HeadingCommon>
|
||||
</div>
|
||||
|
||||
|
||||
<div className={classNames(s.homeCategoryList)}>
|
||||
{categories?.map(item => (
|
||||
<div key={item.name} className={classNames(s.homeCategoriesItem)}>
|
||||
<CategoryItem
|
||||
name={item.name}
|
||||
image={item.image}
|
||||
link={item.link}
|
||||
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user