Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

Create `ProjectTitle` component

Aperta
  • Qualcosa non va?
#4 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

@echelonCodes ci sta già lavorando.

Dal 2/5/2026.

  • #6 di @echelonCodes — aperta

Valutazione

Difficoltà
3/5
Tempo stimato
1-2 giorni
Idoneità per principianti
68/100
Tipo di issue
Funzionalità
Chiarezza
Abbastanza chiara
Stato di attività
Tranquilla
Stack tecnologico
react
Ambito
design, frontend

Direzione di ricerca

Individua il flusso esistente di selezione di map-marker e il layout padre composto da mappa e pannello informativo prima di creare ProjectTitle.tsx o .jsx. Usa il riferimento Figma e le dimensioni, l’allineamento flex, il bordo e il padding indicati come specifica UI. Il lavoro è completato quando il componente riutilizzabile accetta un titolo, viene renderizzato solo per un progetto selezionato, si aggiorna dall’etichetta del marker e soddisfa i criteri di accettazione elencati.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

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
Lingua principale
HTML
Stelle
2
Fork
11
Nessuna PR unita negli ultimi 30g

Preparare l'ambiente

Apri in Codespaces

Avvia il container di sviluppo del progetto nel browser, con il tuo account GitHub.

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di OpenSourceFellows/map_dashboard_hackathon

Tutte le issue di OpenSourceFellows/map_dashboard_hackathon

Issue simili

Altre issue su Design

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.