Create `ProjectInfo` component (left/right layout)
まだ誰も着手していません。
評価
- 難易度
- 4/5
- 見積もり時間
- 3〜5日
- 初心者へのやさしさ
- 48/100
- issue の種類
- 機能追加
- 明瞭さ
- おおむね明確
- 活発さ
- 静か
- 技術スタック
- react, typescript
調査の方向性
Figma プロトタイプから始め、components/project または同様の場所に ProjectInfo.tsx を作成する前に、既存のコンポーネント構成を確認してください。プロジェクトメタデータの型を定義してから、MUI のレスポンシブレイアウトを使用して、左側のチェックボックスパネルと右側の動的な値を実装してください。完了の条件は、コンポーネントが Figma の構成に一致し、指定されたコントロールとメタデータをレンダリングし、将来の地図統合をサポートすることです。
索引モデルが issue の本文から書いたものです。
説明
Issue created with ChatGPT models' help¹
Description
Create a reusable ProjectInfo component that renders the lower information panel shown beneath the map after a project marker is clicked¹. The component should follow the Figma design closely and be divided into two major sections: a left window (map layer toggles / controls) and a right window (project metadata and information display)².
This issue is primarily focused on creating the component structure, layout, styling, and data rendering flow using React + TypeScript + Material UI³. The left panel should support checkbox-based layer toggles, while the right panel should support dynamically rendered values based on the selected project⁴.
Some properties in the left window may later become conditionally rendered depending on whether the selected land project contains those values⁵. If possible, contributors may implement conditional rendering now, but it is not strictly required for completion of this issue¹.
Goals
- Create reusable
ProjectInfocomponent¹ - Implement left/right panel layout from Figma²
- Support checkbox skeleton functionality for map layers³
- Could Dynamically render project information values⁴
- Use TypeScript types/interfaces for project data¹
- Prepare component for future responsive/mobile support²
Implementation Instructions
- Create
ProjectInfo.tsxunder components/project or similar folder¹ - Use Material UI components (
Box,Stack,Checkbox,Typography, etc.)² - Define TypeScript interfaces/types for project metadata³
- Split layout into left window + right window⁴
- Add placeholder/skeleton checkbox behavior for map layer toggles¹
- Checkbox interactions should prepare for future Leaflet layer toggling²
- Render static property labels with dynamic project values³
- Consider conditional rendering of properties with missing/null values⁴
- Keep layout responsive using breakpoints where possible¹
- Styling can use MUI
sx, theme folder, or styles folder²
Layout Specs (Figma)
Project info container
- width: 1188;¹
- height: 451;²
- angle: 0 deg;³
- opacity: 1;⁴
- border-bottom-width: 2px;¹
- padding-right: 24px;²
- padding-left: 24px;³
- background: #FFFFFF;⁴
- border-bottom: 2px solid #E8E8E8;¹
Left window
⚠️ Note: Some left window properties or the entire left panel itself may later become conditionally rendered depending on available land project data¹.
Suggested condition:
- If a project does not contain values for a property/layer, do not render that property²
This logic is optional for this issue but recommended if contributor bandwidth allows³.
Layout Specs
- width: 300;¹
- height: 451;²
- angle: 0 deg;³
- opacity: 1;⁴
- border-right-width: 2px;¹
- padding-top: 4px;²
- padding-right: 24px;³
- border-right: 2px solid #E8E8E8;⁴
Right window
⚠️ Note: The right window intentionally contains extra whitespace because additional metadata sections will be added later¹.
Layout Specs
- width: 840;²
- height: 451;³
- angle: 0 deg;⁴
- opacity: 1;¹
- padding-top: 4px;²
- padding-left: 24px;³
Expected Component Behavior
Left Window
- Contains layer/property checkboxes¹
- Checkbox interactions should prepare for future Leaflet map layer toggling²
- Example behavior: checking “Acreage” or “Watershed” shows corresponding map layer³
- Full Leaflet integration is optional for this issue⁴
Right Window
-
Property labels may remain static¹
-
Property values should render dynamically based on selected project²
-
Example fields:
- Status³
- Partner⁴
- Acreage¹
- Location²
- Watershed³
- Restoration Services⁴
- Active Monitoring¹
Notes
- Please reach out to the maintainer team for access to the Figma file¹
- Use the Figma file for exact spacing/typography/details because this issue may not list every specification²
- Consider using responsive breakpoints³
- Structure component cleanly for future routing/services integration⁴
Acceptance Criteria
- ProjectInfo component renders correctly with left/right layout¹
- Left panel contains checkbox controls²
- Right panel is setup to display dynamically rendered project metadata values³
- Layout visually matches Figma structure⁴
- Component uses React + TypeScript + MUI¹
- Code structure supports future responsiveness and map integration²
- Critical Testing validation optional but good to have
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://mui.com/material-ui/react-box/
² https://mui.com/material-ui/react-checkbox/
³ https://react.dev/learn/conditional-rendering
⁴ https://react.dev/learn/typescript
Figma Design (Refer for full details): 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
- 主要言語
- HTML
- スター
- 2
- フォーク
- 11
- PR マージ指標
- 30日以内にマージされた PR はありません
環境構築
このプロジェクトの開発コンテナを、あなたの GitHub アカウントでブラウザ上に起動します。
- Dockerfile・Docker Compose ファイルなし
- プルリクエストのテンプレートあり
- コントリビューションガイドを読む
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- 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
-
Button with href and icon is missing a gap when used as Card action (display reset from inline-flex to block)対応中かも このイシューにリンクされたプルリクエストがオープン中、またはマージ済みです。 オープンunconfirmed
難易度 2/5 1〜3時間 初心者へのやさしさ 68/100
ant-design/ant-design#59725 · コメント 1 件 · リアクション 1 件 ·
メンテナーはふだん 1 日以内に返信
-
enhancement UX
難易度 2/5 1〜3時間 初心者へのやさしさ 68/100
online-go/online-go.com#3878 ·
メンテナーはふだん 1 日以内に返信
-
Pills' meter dots fade on bright and deep pills対応中かも @wassim-azi が今日担当しました。 オープン
難易度 2/5 1〜3時間 初心者へのやさしさ 75/100
wassim-azi/agy-powerline#168 ·
メンテナーはふだん 1 日以内に返信
-
feature
難易度 2/5 1〜3時間 初心者へのやさしさ 68/100
メンテナーはふだん 1 日以内に返信
-
Extrude dialog clips a failed Cut to “the operation failed: no”対応中かも このイシューにリンクされたプルリクエストがオープン中、またはマージ済みです。 オープンarea:kernel needs-triage
難易度 2/5 1〜3時間 初心者へのやさしさ 68/100
bherbruck/solvecraft#8454 · リアクション 1 件 ·