Hacktoberfest 2026：メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

Create `ProjectTitle` component

オープン
  • 何か問題がありますか？
#4 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

@echelonCodes がすでに取り組んでいます。

2026年5月2日 から。

  • #6 @echelonCodes による — オープン

評価

難易度
3/5
見積もり時間
1〜2日
初心者へのやさしさ
68/100
issue の種類
機能追加
明瞭さ
おおむね明確
活発さ
静か
技術スタック
react
領域
design, frontend

調査の方向性

ProjectTitle.tsx または .jsx を作成する前に、既存の map-marker 選択フローと、親となる map と情報パネルのレイアウトを特定します。Figma のリファレンスと、指定された寸法、flex 配置、border、padding を UI 仕様として使用します。完了とは、再利用可能なコンポーネントがタイトルを受け取り、選択されたプロジェクトに対してのみレンダリングされ、marker ラベルから更新され、列挙された受け入れ基準を満たすことを意味します。

索引モデルが issue の本文から書いたものです。

説明

Beginner California Tribal GIS Hackathon

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⁴.

Image

Goals

  • Create reusable ProjectTitle component¹
  • 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 optional onSave handler²
  • 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

Figma Design: https://www.figma.com/proto/e9z8edludVssFYABGEWsoI/OpenNature-Map--Hackathons-?node-id=1-1465&viewport=787%2C545%2C0.11&t=Xwc2asfn9Qksi99P-8&scaling=scale-down&content-scaling=fixed&starting-point-node-id=1%3A896&page-id=0%3A1&hide-ui=1

Image
主要言語
HTML
スター
2
フォーク
11
30日以内にマージされた PR はありません

環境構築

Codespaces で開く

このプロジェクトの開発コンテナを、あなたの GitHub アカウントでブラウザ上に起動します。

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

OpenSourceFellows/map_dashboard_hackathon のほかの issue

OpenSourceFellows/map_dashboard_hackathon の issue をすべて見る

似ている issue

Design の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。