Skip to content

Commit

Permalink
fix layout homepage
Browse files Browse the repository at this point in the history
  • Loading branch information
@ntnhan90
ntnhan90 committed Jan 13, 2024
1 parent 1218474 commit 414505a
Show file tree
Hide file tree
Showing 4 changed files with 272 additions and 11 deletions.
4 changes: 2 additions & 2 deletions assets/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -698,8 +698,8 @@ body {
box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
}
.category-card {
/*border-radius: 24px;*/
border-radius: 32px;
border-radius: 24px;
/* border-radius: 32px;*/
border: 5px solid var(--primary-500, #00473C);
background: #D9D9D9;
width: 273px;
Expand Down
Binary file added public/images/6387ec276a4eb-62aa10dfb2adca268416cf2fd03d82f5transformed-4@2x.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
10 changes: 5 additions & 5 deletions src/app/homepage/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,31 +12,31 @@ const HomePage = () =>{
<div className="mb-3 categories-wrapper w-100 d-flex justify-content-between">
<div className="category-card d-flex justify-content-center align-items-end"
style={{
backgroundImage: `url(/images/6387ec276a4eb.png)`,
backgroundImage: `url(/images/6387ec276a4eb-62aa10dfb2adca268416cf2fd03d82f5transformed-4@2x.png)`,
backgroundSize: `contain`
}}
>
<div className="category-heading pb-2">Ăn nhẹ &lt; 300 kcal</div>
</div>
<div className="category-card d-flex justify-content-center align-items-end"
style={{
backgroundImage: `url(/images/6387ec276a4eb.png)`,
backgroundImage: `url(/images/6387ec276a4eb-62aa10dfb2adca268416cf2fd03d82f5transformed-4@2x.png)`,
backgroundSize: `contain`
}}
>
<div className="category-heading pb-2">Ăn nhẹ &lt; 300 kcal</div>
</div>
<div className="category-card d-flex justify-content-center align-items-end"
style={{
backgroundImage: `url(/images/6387ec276a4eb.png)`,
backgroundImage: `url(/images/6387ec276a4eb-62aa10dfb2adca268416cf2fd03d82f5transformed-4@2x.png)`,
backgroundSize: `contain`
}}
>
<div className="category-heading pb-2">Ăn nhẹ &lt; 300 kcal</div>
</div>
<div className="category-card d-flex justify-content-center align-items-end"
style={{
backgroundImage: `url(/images/6387ec276a4eb.png)`,
backgroundImage: `url(/images/6387ec276a4eb-62aa10dfb2adca268416cf2fd03d82f5transformed-4@2x.png)`,
backgroundSize: `contain`
}}
>
Expand All @@ -61,7 +61,7 @@ const HomePage = () =>{
</div>
</div>


<InterestingFood />
<div className="outstanding-location-and-chef-section w-100 py-4">
<div className="title-section d-flex justify-content-between align-items-end w-100">
<div className="title-and-sub-title flex-grow-1 d-flex flex-column">
Expand Down
269 changes: 265 additions & 4 deletions src/components/homePage/interesting_food.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import MenuItem from "@/components/menu-item/index";
import MenuItemTitle from "@/components/menu-item/menu-item-title";
import useSwr from 'swr';
import {fetcher} from '@/utils/fetcher';

import { sendRequest } from "@/utils/fetch";

export type IngredientType = {
name?: number | string;
Expand All @@ -25,10 +25,8 @@ export type ProductTypeList = {
ingredient: Array<IngredientType>,
}

const InterestingFood = () => {
const { data } = useSwr('/api/products', fetcher);
const InterestingFood = async () => {

if (!data) return <div>Loading</div>;
return(
<div className="attractive-dishes-section d-flex flex-column w-100">
<div className="title-section d-flex justify-content-between align-items-end w-100">
Expand All @@ -42,6 +40,268 @@ const InterestingFood = () => {
</div>

</div>
<div className="food-cards d-flex justify-content-between py-4">
<div className="food-card d-flex flex-column">
<div className="frame-parent d-flex flex-column position-relative">
<div className="discount-wrapper">
<b className="discount">GIẢM GIÁ ĐẶC BIỆT</b>
</div>
<div className="image-wrapper d-flex justify-content-center">
<img className=""
alt=""
src="/images/6387ec276a4eb-62aa10dfb2adca268416cf2fd03d82f5transformed-3@2x.png"
/>
</div>
</div>
<div className="card-info-wrapper d-flex flex-column position-relative">
<div className="card-info d-flex flex-column gap-1">
<div className="food-and-chef-name d-flex flex-column gap-1">
<b>Mỳ Cá Cờ Sốt Yakitori</b>
<div className="chef-name">
<span className="font-weight-500">by </span>
<b className="name">The Chef Town</b>
</div>
</div>
<div className="general-info d-flex gap-2">
<div className="d-flex align-items-center gap-2px">
<img className="small-icon"
alt=""
src="/images/markerpin02.svg"
/>

<div className="kcal font-weight-600">356 Kcal</div>
</div>
<div className="d-flex align-items-center gap-1">
<img className="small-icon"
alt=""
src="/images/star-icon1.svg"
/>

<div className="text">4.5</div>
</div>
<div className="d-flex align-items-center gap-2px">
<img className="small-icon"
alt=""
src="/images/markerpin021.svg"
/>

<div className="text">3,2 km</div>
</div>
<div className="d-flex align-items-center gap-2px">
<img className="small-icon"
alt=""
src="/images/timer.svg"
/>

<div className="text">20 min</div>
</div>
</div>
<div className="ingredient-wrapper">
<span className="cooking-method font-weight-600">Luộc</span>
<span className="font-weight-500">| Hành tây, tiêu xanh, cà chua, bắp, ngò rí, bơ chín và nước cốt chanh.</span
>
</div>
<div className="pricing-wrapper d-flex align-items-center gap-2">
<div className="price-before">95,000</div>
<b className="price-after">80,000</b>
</div>
<div className="discount-up-to-wrapper d-flex align-items-center gap-1">
<img className="small-icon"
alt=""
src="/imagesc/frame-2729.svg"
/>

<div className="discount-up-to">Ưu đãi đến 50k</div>
</div>
<div className="flavor-time-wrapper d-flex align-items-center gap-1">
<img className="small-icon"
alt=""
src="/images/frame-2725.svg"
/>

<div className="flavor-time">
Đặt trước 09:00 giờ sáng để điều chỉnh vị
</div>
</div>
</div>
<div className="add-to-cart-button">
<img src="/images/plus.svg" alt="" />
</div>
</div>
</div>
<div className="food-card d-flex flex-column">
<div className="frame-parent d-flex flex-column">
<div className="image-wrapper d-flex justify-content-center">
<img className=""
alt=""
src="/images/6387ec276a4eb-62aa10dfb2adca268416cf2fd03d82f5transformed-3@2x.png"
/>
</div>
</div>
<div className="card-info-wrapper d-flex flex-column position-relative">
<div className="card-info d-flex flex-column gap-1">
<div className="food-and-chef-name d-flex flex-column gap-1">
<b>Mỳ Cá Cờ Sốt Yakitori</b>
<div className="chef-name">
<span className="font-weight-500">by </span>
<b className="name">The Chef Town</b>
</div>
</div>
<div className="general-info d-flex gap-2">
<div className="d-flex align-items-center gap-2px">
<img className="small-icon"
alt=""
src="/images/markerpin02.svg"
/>

<div className="kcal font-weight-600">356 Kcal</div>
</div>
<div className="d-flex align-items-center gap-1">
<img className="small-icon"
alt=""
src="/images/star-icon1.svg"
/>

<div className="text">4.5</div>
</div>
<div className="d-flex align-items-center gap-2px">
<img className="small-icon"
alt=""
src="/images/markerpin021.svg"
/>

<div className="text">3,2 km</div>
</div>
<div className="d-flex align-items-center gap-2px">
<img className="small-icon"
alt=""
src="/images/timer.svg"
/>

<div className="text">20 min</div>
</div>
</div>
<div className="ingredient-wrapper">
<span className="cooking-method font-weight-600">Luộc</span>
<span className="font-weight-500">| Hành tây, tiêu xanh, cà chua, bắp, ngò rí, bơ chín và nước cốt chanh.</span
>
</div>
<div className="pricing-wrapper d-flex align-items-center gap-2">
<div className="price-before">95,000</div>
<b className="price-after">80,000</b>
</div>
<div className="discount-up-to-wrapper d-flex align-items-center gap-1">
<img className="small-icon"
alt=""
src="/images/frame-2729.svg"
/>

<div className="discount-up-to">Ưu đãi đến 50k</div>
</div>
<div className="flavor-time-wrapper d-flex align-items-center gap-1">
<img className="small-icon"
alt=""
src="/images/frame-2725.svg"
/>

<div className="flavor-time">
Đặt trước 09:00 giờ sáng để điều chỉnh vị
</div>
</div>
</div>
<div className="add-to-cart-button">
<img src="/images/plus.svg" alt="" />
</div>
</div>
</div>
<div className="food-card d-flex flex-column">
<div className="frame-parent d-flex flex-column">

<div className="image-wrapper d-flex justify-content-center">
<img className=""
alt=""
src="/images/6387ec276a4eb-62aa10dfb2adca268416cf2fd03d82f5transformed-3@2x.png"
/>
</div>
</div>
<div className="card-info-wrapper d-flex flex-column position-relative">
<div className="card-info d-flex flex-column gap-1">
<div className="food-and-chef-name d-flex flex-column gap-1">
<b>Mỳ Cá Cờ Sốt Yakitori</b>
<div className="chef-name">
<span className="font-weight-500">by </span>
<b className="name">The Chef Town</b>
</div>
</div>
<div className="general-info d-flex gap-2">
<div className="d-flex align-items-center gap-2px">
<img className="small-icon"
alt=""
src="/images/markerpin02.svg"
/>

<div className="kcal font-weight-600">356 Kcal</div>
</div>
<div className="d-flex align-items-center gap-1">
<img className="small-icon"
alt=""
src="/images/star-icon1.svg"
/>

<div className="text">4.5</div>
</div>
<div className="d-flex align-items-center gap-2px">
<img className="small-icon"
alt=""
src="/images/markerpin021.svg"
/>

<div className="text">3,2 km</div>
</div>
<div className="d-flex align-items-center gap-2px">
<img className="small-icon"
alt=""
src="/images/timer.svg"
/>

<div className="text">20 min</div>
</div>
</div>
<div className="ingredient-wrapper">
<span className="cooking-method font-weight-600">Luộc</span>
<span className="font-weight-500">| Hành tây, tiêu xanh, cà chua, bắp, ngò rí, bơ chín và nước cốt chanh.</span
>
</div>
<div className="pricing-wrapper d-flex align-items-center gap-2">
<div className="price-before">95,000</div>
<b className="price-after">80,000</b>
</div>
<div className="discount-up-to-wrapper d-flex align-items-center gap-1">
<img className="small-icon"
alt=""
src="/images/frame-2729.svg"
/>

<div className="discount-up-to">Ưu đãi đến 50k</div>
</div>
<div className="flavor-time-wrapper d-flex align-items-center gap-1">
<img className="small-icon"
alt=""
src="/images/frame-2725.svg"
/>

<div className="flavor-time">
Đặt trước 09:00 giờ sáng để điều chỉnh vị
</div>
</div>
</div>
<div className="add-to-cart-button">
<img src="/images/plus.svg" alt="" />
</div>
</div>
</div>
</div>
{/*
<div className="food-cards d-flex justify-content-between py-4">
{data.map((item:ProductTypeList) =>(
<MenuItem key={item.id}
Expand All @@ -60,6 +320,7 @@ const InterestingFood = () => {
/>
))}
</div>
*/}
</div>
)
};
Expand Down

0 comments on commit 414505a

Please sign in to comment.