diff --git a/package.json b/package.json index fba887a..500a259 100644 --- 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 index 6f09560..41f0dc4 100644 --- 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 = () => ( + diff --git a/src/pages/Program.tsx b/src/pages/Program.tsx new file mode 100644 index 0000000..cbd85c1 --- /dev/null +++ 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 ( + + + + + + ⛪️} + title={Messe} + description={Église notre dame de Kedro à Locmariaquer} + /> + }>15h00 + + + + 🍸} title={Cocktail} description={Château de Kérantré à Crach'h} /> + }>17h30 + + + 🍽️} title={Dîner} description={Château de Kérantré à Crach'h} /> + }>20h00 + + + 💃} title={Soirée} description={Château de Kérantré à Crach'h} /> + }>23h30 + + + + + + + 🦪} title={Retour de plage} description={Château de Kérantré à Crac'h} /> + }>17h30 + + + 🪩} title={Rebond} description={Château de Kérantré à Crach'h} /> + }>20h30 + + + + + + ) +} + +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 index 18c14f1..d17410e 100644 --- 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 index 9e35b62..3614254 100644 --- 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==