Create `ProjectTitle` component
评估
调研方向
在创建 ProjectTitle.tsx 或 .jsx 之前，先定位现有的 map-marker 选择流程以及作为父级的地图加信息面板布局。将 Figma 参考以及所述的尺寸、flex 对齐、边框和 padding 作为 UI 规范。完成意味着可复用组件接受一个标题、仅在选中项目时渲染、根据 marker 标签更新，并符合列出的验收标准。
由索引模型根据 Issue 内容生成。
描述
Issue created with ChatGPT models help¹
Parent: Epic Feature – Project Detail View (Map Interaction + Title & Info Panels)³
Description
Create a reusable ProjectTitle React component that appears when a user clicks on a map marker and the project detail view is activated¹. This component represents the top header bar (as shown in Figma) and displays the project title dynamically based on the clicked marker label².
The component should visually match the Figma design. The primary goal of this issue is to implement the UI structure and styling, while keeping the component flexible for future integration with routing and backend services⁴.
Goals
- Create reusable
ProjectTitlecomponent¹ - Dynamically display project title from marker click event²
- Match Figma layout and styling exactly³
- Keep component extensible for future routing/service integration¹
Implementation Instructions
- Create
ProjectTitle.tsx(or.jsx) component¹ - Accept props such as
title(string) and optionalonSavehandler² - Render title text dynamically from selected map marker³
- Apply exact Figma layout specs (see below)¹
- Use flex layout for alignment and spacing²
- Ensure component integrates cleanly with parent layout (map + info panel)³
- Please use MUI components where possible.
- (Optional) Add basic state handling for saved/unsaved UI toggle⁴
Layout Specs (Figma)
- Width: 1188px¹
- Height: 73px²
- Gap: 12px³
- Padding: 20px (top/bottom), 24px (left/right)⁴
- Border-bottom: 2px solid #E8E8E8¹
- Background: #FFFFFF²
- Display: Flex (row, space-between alignment recommended)³
Behavior
- Title updates dynamically based on clicked marker label¹
- Component should render only when a project is selected⁴
Acceptance Criteria
- ProjectTitle component renders with correct layout and styling¹
- Title updates dynamically from selected marker²
- Component visually matches Figma design⁴
- Component is reusable and accepts props cleanly¹
Consider helping after PR for this issue is merged
- Once PR for this issue is merged, please check dependencies heading in #16, if all the issues there are done, please move that issue to ready column/status
Resources
¹ https://react.dev/learn/passing-props-to-a-component
² https://react.dev/learn/conditional-rendering
³ https://developer.mozilla.org/en-US/docs/Web/CSS/flex
⁴ https://developer.mozilla.org/en-US/docs/Web/CSS/padding
- 主要语言
- HTML
- 星标
- 2
- 派生
- 11
- PR 合并指标
- 30 天内没有已合并 PR
环境准备
在浏览器里用你自己的 GitHub 账号启动这个项目的开发容器。
- 没有 Dockerfile 或 Docker Compose 文件
- 有 Pull Request 模板
- 阅读贡献指南
从这里开始
- 先读完整个 Issue，再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库，在一个分支上完成修改。
- 提交 Pull Request，并在描述里引用这个 Issue 编号。
OpenSourceFellows/map_dashboard_hackathon 的其他 Issue
-
California Tribal GIS Hackathon Intermediate
难度 2/5 半天 新手友好度 68/100
-
California Tribal GIS Hackathon Intermediate
难度 3/5 1-2 天 新手友好度 68/100
-
Advanced California Tribal GIS Hackathon
难度 4/5 3-5 天 新手友好度 45/100
-
Advanced California Tribal GIS Hackathon
难度 3/5 1-2 天 新手友好度 48/100
-
Advanced California Tribal GIS Hackathon
难度 4/5 3-5 天 新手友好度 45/100
查看 OpenSourceFellows/map_dashboard_hackathon 的全部 Issue
相似的 Issue
-
[good first issue, hacktoberfest] ⛩️ Add new Theme: Sakura Latte (good-first-issue)可能已有人在做 @PGrayCS 今天认领。 未关闭community first-timers-only good first issue hacktoberfest help wanted low hanging fruit up-for-grabs
难度 1/5 1-3 小时 新手友好度 78/100
lingdojo/kana-dojo#31937 · 1 条评论 · 5 个 reaction ·
维护者通常 1 天内回复
-
P1 Team M Type: Enhancement
难度 2/5 1-3 小时 新手友好度 68/100
google/site-kit-wp#13822 ·
维护者通常 3 天内回复
-
难度 2/5 1-3 小时 新手友好度 62/100
grommet/hpe-design-system#6633 ·
维护者通常 1 天内回复
-
难度 2/5 1-3 小时 新手友好度 62/100
yschimke/glimmer-catalog#35 ·
维护者通常 1 天内回复
-
难度 2/5 1-3 小时 新手友好度 70/100
italia/bootstrap-italia#1968 ·
维护者通常 1 天内回复