Add program page

GregdTd · Nov 29, 2023 · e6dbab8 · e6dbab8
1 parent 8387998
commit e6dbab8
Show file tree

Hide file tree

Showing 5 changed files with 114 additions and 1 deletion.
diff --git a/package.json b/package.json
@@ -16,6 +16,7 @@
   "dependencies": {
     "@types/react-scroll": "^1.8.10",
     "antd": "^5.11.4",
+    "dayjs": "^1.11.10",
     "prettier": "^3.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

diff --git a/src/App.tsx b/src/App.tsx
@@ -3,6 +3,7 @@ import { Content, Footer } from 'antd/es/layout/layout'
 import { NavigationBar } from './components/NavigationBar'
 import { Housing } from './pages/Housing'
 import { Place } from './pages/Place'
+import { Program } from './pages/Program'
 import { Welcome } from './pages/Welcome'
 import { Colors } from './styles/Color'
 
@@ -29,6 +30,7 @@ export const App = () => (
             <NavigationBar />
             <Content>
                 <Welcome />
+                <Program />
                 <Place />
                 <Housing />
             </Content>

diff --git a/src/pages/Program.tsx b/src/pages/Program.tsx
@@ -0,0 +1,109 @@
+import { ClockCircleOutlined } from '@ant-design/icons'
+import { Card as BaseCard, Tag as BaseTag } from 'antd'
+import BaseMeta from 'antd/es/card/Meta'
+import dayjs from 'dayjs'
+import customParseFormat from 'dayjs/plugin/customParseFormat'
+import styled from 'styled-components'
+import { Colors } from '../styles/Color'
+import { SectionWrapper } from '../styles/Layout'
+export const Program: React.FC = () => {
+    dayjs.extend(customParseFormat)
+    return (
+        <SectionWrapper id="program" title="Programme">
+            <ColumnWrapper>
+                <Column>
+                    <Card title="Vendredi 14 juin" bordered={true}>
+                        <Item>
+                            <Meta
+                                avatar={<Emoji>⛪️</Emoji>}
+                                title={<ItemTitle>Messe</ItemTitle>}
+                                description={<Description>Église notre dame de Kedro à Locmariaquer</Description>}
+                            />
+                            <Tag icon={<ClockCircleOutlined />}>15h00</Tag>
+                        </Item>
+
+                        <Item>
+                            <Meta avatar={<Emoji>🍸</Emoji>} title={<ItemTitle>Cocktail</ItemTitle>} description={<Description>Château de Kérantré à Crach'h</Description>} />
+                            <Tag icon={<ClockCircleOutlined />}>17h30</Tag>
+                        </Item>
+                        <Item>
+                            <Meta avatar={<Emoji>🍽️</Emoji>} title={<ItemTitle>Dîner</ItemTitle>} description={<Description>Château de Kérantré à Crach'h</Description>} />
+                            <Tag icon={<ClockCircleOutlined />}>20h00</Tag>
+                        </Item>
+                        <Item>
+                            <Meta avatar={<Emoji>💃</Emoji>} title={<ItemTitle>Soirée</ItemTitle>} description={<Description>Château de Kérantré à Crach'h</Description>} />
+                            <Tag icon={<ClockCircleOutlined />}>23h30</Tag>
+                        </Item>
+                    </Card>
+                </Column>
+                <Column>
+                    <Card title="Samedi 15 juin" bordered={true}>
+                        <Item>
+                            <Meta avatar={<Emoji>🦪</Emoji>} title={<ItemTitle>Retour de plage</ItemTitle>} description={<Description>Château de Kérantré à Crac'h</Description>} />
+                            <Tag icon={<ClockCircleOutlined />}>17h30</Tag>
+                        </Item>
+                        <Item>
+                            <Meta avatar={<Emoji>🪩</Emoji>} title={<ItemTitle>Rebond</ItemTitle>} description={<Description>Château de Kérantré à Crach'h</Description>} />
+                            <Tag icon={<ClockCircleOutlined />}>20h30</Tag>
+                        </Item>
+                    </Card>
+                </Column>
+            </ColumnWrapper>
+        </SectionWrapper>
+    )
+}
+
+const ColumnWrapper = styled.div`
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 36px;
+`
+
+const Column = styled.div`
+    padding: 0px 0px;
+`
+
+const Card = styled(BaseCard)`
+    box-shadow:
+        rgba(0, 0, 0, 0.07) 0px 1px 2px,
+        rgba(0, 0, 0, 0.07) 0px 2px 4px,
+        rgba(0, 0, 0, 0.07) 0px 4px 8px,
+        rgba(0, 0, 0, 0.07) 0px 8px 16px,
+        rgba(0, 0, 0, 0.07) 0px 16px 32px,
+        rgba(0, 0, 0, 0.07) 0px 32px 64px;
+`
+
+const Item = styled.li`
+    display: flex;
+    align-items: center;
+    list-style-type: none;
+
+    .ant-card-meta-title {
+        margin-bottom: 0 !important;
+    }
+`
+
+const Emoji = styled.span`
+    font-size: 32px;
+    padding-right: 15px;
+`
+
+const Tag = styled(BaseTag)`
+    background-color: ${Colors.light_green};
+    border-color: ${Colors.green};
+    margin-bottom: 38px;
+`
+
+const Meta = styled(BaseMeta)`
+    text-align: left;
+    padding-bottom: 36px;
+`
+const ItemTitle = styled.div`
+    width: 360px;
+    margin-bottom: 0 !important;
+`
+
+const Description = styled.span`
+    font-size: 16px;
+`
diff --git a/src/styles/Color.ts b/src/styles/Color.ts
@@ -3,4 +3,5 @@ export enum Colors {
     white = 'rgba(255, 255, 255, 0.87)',
     green = 'rgba(104, 157, 113, 1)',
     dark_green = 'rgba(70, 105, 76, 1)',
+    light_green = 'rgba(104, 157, 113, 0.4)',
 }
diff --git a/yarn.lock b/yarn.lock
@@ -1100,7 +1100,7 @@ csstype@^3.0.10, csstype@^3.0.2, csstype@^3.1.2:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.2.tgz#1d4bf9d572f11c14031f0436e1c10bc1f571f50b"
   integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==
 
-dayjs@^1.11.1:
+dayjs@^1.11.1, dayjs@^1.11.10:
   version "1.11.10"
   resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.10.tgz#68acea85317a6e164457d6d6947564029a6a16a0"
   integrity sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ==