26、构建美食发现者应用前端：从基础页面到细节展示

构建美食发现者应用前端：从基础页面到细节展示

1. 构建地点列表组件

首先，我们要实现一个地点列表组件。以下是 components/locations-list/index.tsx 文件的代码：

// 导入必要的模块和类型
import LocationsListItem from "./item";
import styles from "./styles.module.css";
import { LocationType } from "mongoose/locations/schema";

// 定义组件的属性接口
interface PropsInterface {
    locations: LocationType[];
}

// 定义地点列表组件
const LocationsList = (props: PropsInterface) => {
    return (
        <ul className={styles.list}>
            {props.locations.map((location) => (
                <LocationsListItem
                    key={location.location_id}
                    location={location}
                />
            ))}
        </ul>
    );
};

export default L