Create static layout

package.json

@@ -18,6 +18,8 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
+    "semantic-ui-css": "^2.5.0",
+    "semantic-ui-react": "^2.1.5",
     "typescript": "^4.9.5",
     "web-vitals": "^2.1.4"
   },

src/Foo.tsx

@@ -1,8 +1,101 @@
+import React from 'react';
+import { Container, Header, Menu, Dropdown, Grid, Comment, Form, Button, Input, List } from 'semantic-ui-react';
 
+const SectionView = () => (
+  <Container>
+    {/* Menu */}
+    <Menu>
+      <Menu.Item>
+        <Header as='h2'>My section</Header>
+      </Menu.Item>
+      <Menu.Menu position='right'>
+        <Dropdown item icon='ellipsis vertical' simple>
+          <Dropdown.Menu>
+            <Dropdown.Item>Edit title</Dropdown.Item>
+            <Dropdown.Item>Edit Progression</Dropdown.Item>
+            <Dropdown.Item>Duplicate</Dropdown.Item>
+            <Dropdown.Item>Delete</Dropdown.Item>
+          </Dropdown.Menu>
+        </Dropdown>
+      </Menu.Menu>
+    </Menu>
 
+    {/* Chord Progression */}
+    <Header as='h3'>Progression: C Dm Em F</Header>
 
-let ChordProgression = () => {
-    return (<h1> Hello, Universe!</h1>);
-  };
+    {/* Grid Layout */}
+    <Grid columns={2} divided>
+      <Grid.Row>
+        <Grid.Column>
+          <List>
+            <List.Item>
+              <List.Icon name='file audio' />
+              <List.Content>
+                <List.Header>Bass.mp3</List.Header>
+                <List.Description>2 comments</List.Description>
+              </List.Content>
+            </List.Item>
+            <List.Item>
+              <List.Icon name='file audio' />
+              <List.Content>
+                <List.Header>Guitar.mp3</List.Header>
+                <List.Description>23 comments</List.Description>
+              </List.Content>
+            </List.Item>
+            <List.Item>
+              <List.Icon name='file audio' />
+              <List.Content>
+                <List.Header>Guitar.mp3</List.Header>
+                <List.Description>23 comments</List.Description>
+              </List.Content>
+            </List.Item>
+          </List>
+        </Grid.Column>
+        <Grid.Column>
+        <List.Item>
+              <List.Icon name='file audio' />
+              <List.Content>
+                <List.Header>Guitar.mp3</List.Header>
+                <List.Description>23 comments</List.Description>
+              </List.Content>
+            </List.Item>
+            <List.Item>
+              <List.Icon name='file audio' />
+              <List.Content>
+                <List.Header>Guitar.mp3</List.Header>
+                <List.Description>23 comments</List.Description>
+              </List.Content>
+            </List.Item>
+        </Grid.Column>
+      </Grid.Row>
+    </Grid>
 
-  export default ChordProgression
+    {/* Comments Section */}
+    <Header as='h3'>Comments for section</Header>
+    <Comment.Group>
+      <Comment>
+        <Comment.Avatar src='/images/avatar/small/matt.jpg' />
+        <Comment.Content>
+          <Comment.Author as='a'>Dave</Comment.Author>
+          <Comment.Text>Great section!</Comment.Text>
+        </Comment.Content>
+      </Comment>
+      <Comment>
+        <Comment.Avatar src='/images/avatar/small/matt.jpg' />
+        <Comment.Content>
+          <Comment.Author as='a'>Matthews</Comment.Author>
+          <Comment.Text>Great section!</Comment.Text>
+        </Comment.Content>
+      </Comment>
+      {/* Add more comments as needed */}
+    </Comment.Group>
+
+    {/* Comment Form */}
+    <Form reply>
+      <Form.TextArea />
+      <Button content='Submit' labelPosition='left' icon='edit' primary />
+    </Form>
+  </Container>
+);
+
+export default SectionView;

src/index.tsx

@@ -3,6 +3,8 @@ import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
+import 'semantic-ui-css/semantic.min.css';
+
 
 window.addEventListener('load', async () => {
     const root = ReactDOM.createRoot(