Skip to content

Commit

Permalink
Add link component and minors corrections
Browse files Browse the repository at this point in the history
  • Loading branch information
@GregdTd
GregdTd committed Jan 28, 2024
1 parent 89e3087 commit 29852ea
Show file tree
Hide file tree
Showing 4 changed files with 145 additions and 98 deletions.
32 changes: 32 additions & 0 deletions src/components/Link.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import React from 'react'
import styled from 'styled-components'
import { Colors } from '../styles/Colors'

interface LinkProps {
url: string
children?: React.ReactNode
className?: string
}

export const Link: React.FC<LinkProps> = ({ url, children, className }) => {
return (
<StyledLink
className={className}
href={url}
target="_blank"
rel="noopener noreferrer"
>
{children}
</StyledLink>
)
}

const StyledLink = styled.a`
font-size: 14px;
color: ${Colors.black};
text-decoration: underline;
&:hover {
color: ${Colors.light_green};
}
`
59 changes: 34 additions & 25 deletions src/pages/Accomodation.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,16 @@ import {
Meta,
Tag
} from '../components/Card'

import { Link as BaseLink } from '../components/Link'
import { Colors } from '../styles/Colors'
import { SectionWrapper } from '../styles/Layout'
import { mobile } from '../styles/media-queries'
import { Pages } from '../utils/types'

export const Accomodation: React.FC = () => {
return (
<SectionWrapper id={Pages.PROGRAM}>
<SectionWrapper id={Pages.ACCOMODATION}>
<Wrapper>
<Column>
<Card title="Crac'h" bordered={true}>
Expand All @@ -25,9 +28,9 @@ export const Accomodation: React.FC = () => {
<Description>
<span>
Bungalows, emplacements pour tentes.{' '}
<a href="https://www.fort-espagnol.com/sejournez/">
<Link url="https://www.fort-espagnol.com/sejournez/">
Plus d'information
</a>
</Link>
</span>
</Description>
}
Expand All @@ -39,47 +42,47 @@ export const Accomodation: React.FC = () => {
title={<ItemTitle>Kerpunce</ItemTitle>}
description={
<Description>
<a href="https://www.booking.com/Share-C890zgQ">
<Link url="https://www.booking.com/Share-C890zgQ">
Plus d'information
</a>
</Link>
</Description>
}
/>
<Tag bordered={false}>Chambre d'hôte</Tag>
</Item>
</Card>
<Card title="Saint Philibert" bordered={true}>
<Meta description="13 min en voiture du lieu de mariage" />
<Card title="Locmariaquer" bordered={true}>
<Meta description="Lieu de la messe - 12 min en voiture du lieu du mariage" />
<Item>
<Meta
title={<ItemTitle>La villa Bel ange</ItemTitle>}
title={<ItemTitle>Rêves de bord de mer</ItemTitle>}
description={
<Description>
<a href="https://www.booking.com/Share-XSsf0c">
<Link url="https://www.booking.com/Share-z3UNCq">
Plus d'information
</a>
</Link>
</Description>
}
/>
<Tag bordered={false}>Hôtel</Tag>
<Tag bordered={false}>Chambre d'höte</Tag>
</Item>
</Card>
</Column>
<Column>
<Card title="Locmariaquer" bordered={true}>
<Meta description="Lieu de la messe - 12 min en voiture du lieu du mariage" />
<Card title="Saint Philibert" bordered={true}>
<Meta description="13 min en voiture du lieu de mariage" />
<Item>
<Meta
title={<ItemTitle>Rêves de bord de mer</ItemTitle>}
title={<ItemTitle>La villa Bel ange</ItemTitle>}
description={
<Description>
<a href="https://www.booking.com/Share-z3UNCq">
<Link url="https://www.booking.com/Share-XSsf0c">
Plus d'information
</a>
</Link>
</Description>
}
/>
<Tag bordered={false}>Chambre d'höte</Tag>
<Tag bordered={false}>Hôtel</Tag>
</Item>
</Card>
<Card title="La Trinité-sur-Mer" bordered={true}>
Expand All @@ -89,9 +92,9 @@ export const Accomodation: React.FC = () => {
title={<ItemTitle>Les chambre du Keriolet</ItemTitle>}
description={
<Description>
<a href="https://www.booking.com/Share-URCH5w">
<Link url="https://www.booking.com/Share-URCH5w">
Plus d'information
</a>
</Link>
</Description>
}
/>
Expand All @@ -102,9 +105,9 @@ export const Accomodation: React.FC = () => {
title={<ItemTitle>Le galet hôtel & spa</ItemTitle>}
description={
<Description>
<a href="https://www.booking.com/Share-3OHrTzs">
<Link url="https://www.booking.com/Share-3OHrTzs">
Plus d'information
</a>
</Link>
</Description>
}
/>
Expand All @@ -115,9 +118,9 @@ export const Accomodation: React.FC = () => {
title={<ItemTitle>Le lodge Kerisper</ItemTitle>}
description={
<Description>
<a href="https://www.booking.com/Share-URCH5w">
<Link url="https://www.booking.com/Share-URCH5w">
Plus d'information
</a>
</Link>
</Description>
}
/>
Expand All @@ -128,9 +131,9 @@ export const Accomodation: React.FC = () => {
title={<ItemTitle>Trinité Hotel</ItemTitle>}
description={
<Description>
<a href="https://www.booking.com/Share-BLBKkYc">
<Link url="https://www.booking.com/Share-BLBKkYc">
Plus d'information
</a>
</Link>
</Description>
}
/>
Expand Down Expand Up @@ -162,3 +165,9 @@ const Column = styled.div`
flex-direction: column;
padding: 0px 0px;
`

const Link = styled(BaseLink)`
&:hover {
color: ${Colors.green};
}
`
136 changes: 73 additions & 63 deletions src/pages/Location.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,69 +6,79 @@ import { SectionWrapper } from '../styles/Layout'
import { mobile } from '../styles/media-queries'
import { Pages } from '../utils/types'
export const Place: React.FC = () => {
return (
<SectionWrapper id={Pages.LOCATION}>
<MainWrapper>
<Wrapper>
<GoogleTitle>Église Notre Dame de Kedro</GoogleTitle>
<StyledGoogleFrame
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1345.9655645846701!2d-2.9452889612618542!3d47.56912840248482!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x481011e2b3e53d0b%3A0x188d9b6a1ba0e0f7!2s%C3%89glise%20Notre-Dame%20de%20Locmariaquer!5e0!3m2!1sen!2sfr!4v1702234753928!5m2!1sen!2sfr"
allowFullScreen={false}
loading="lazy"
referrerPolicy="no-referrer-when-downgrade"
></StyledGoogleFrame>
<GoogleTitle>Lieu de réception</GoogleTitle>
<StyledGoogleFrame
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2688.8213638879993!2d-2.9647473!3d47.629603599999996!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x48101331dd572fd9%3A0x3f348baf0ac63b33!2zQ2jDonRlYXUgZGUgS2VyYW50csOp!5e0!3m2!1sen!2sfr!4v1702234411432!5m2!1sen!2sfr"
allowFullScreen={true}
loading="lazy"
referrerPolicy="no-referrer-when-downgrade"
/>
</Wrapper>
<Wrapper>
<ColumnWrapper>
<Train src={TrainPng} />
<span>
Gare la plus proche - <b>Auray</b>
</span>
<span>
<Tag bordered={false} onClick={() => window.open('https://www.sncf-connect.com/app/home/search?userInput=Auray&destinationId=')}>
sncf-connect.com
</Tag>
</span>
</ColumnWrapper>
<ColumnWrapper>
<Car src={CarPng} />
<CarTextWrapper>
<CarText>
Depuis Lille<span>7h20</span>
</CarText>
<CarText>
Depuis Paris<span>5h00</span>
</CarText>
<CarText>
Depuis Orléans<span>4h40</span>
</CarText>
<CarText>
Depuis Nantes<span>1h30</span>
</CarText>
</CarTextWrapper>
</ColumnWrapper>
<ColumnWrapper>
<Plane src={PlanePng} />
<span>
Aéroport le plus proche - <b>Nantes</b>
</span>
<span>
<Tag bordered={false} onClick={() => window.open('https://www.skyscanner.fr/')}>
skyscanner.fr
</Tag>
</span>
</ColumnWrapper>
</Wrapper>
</MainWrapper>
</SectionWrapper>
)
return (
<SectionWrapper id={Pages.LOCATION}>
<MainWrapper>
<Wrapper>
<GoogleTitle>Église Notre Dame de Kedro</GoogleTitle>
<StyledGoogleFrame
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1345.9655645846701!2d-2.9452889612618542!3d47.56912840248482!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x481011e2b3e53d0b%3A0x188d9b6a1ba0e0f7!2s%C3%89glise%20Notre-Dame%20de%20Locmariaquer!5e0!3m2!1sen!2sfr!4v1702234753928!5m2!1sen!2sfr"
allowFullScreen={false}
loading="lazy"
referrerPolicy="no-referrer-when-downgrade"
/>
<GoogleTitle>Lieu de réception</GoogleTitle>
<StyledGoogleFrame
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2688.8213638879993!2d-2.9647473!3d47.629603599999996!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x48101331dd572fd9%3A0x3f348baf0ac63b33!2zQ2jDonRlYXUgZGUgS2VyYW50csOp!5e0!3m2!1sen!2sfr!4v1702234411432!5m2!1sen!2sfr"
allowFullScreen={true}
loading="lazy"
referrerPolicy="no-referrer-when-downgrade"
/>
</Wrapper>
<Wrapper>
<ColumnWrapper>
<Train src={TrainPng} />
<span>
Gare la plus proche - <b>Auray</b>
</span>
<span>
<Tag
bordered={false}
onClick={() =>
window.open(
'https://www.sncf-connect.com/app/home/search?userInput=Auray&destinationId='
)
}
>
sncf-connect.com
</Tag>
</span>
</ColumnWrapper>
<ColumnWrapper>
<Car src={CarPng} />
<CarTextWrapper>
<CarText>
Depuis Lille<span>7h20</span>
</CarText>
<CarText>
Depuis Paris<span>5h00</span>
</CarText>
<CarText>
Depuis Orléans<span>4h40</span>
</CarText>
<CarText>
Depuis Nantes<span>1h30</span>
</CarText>
</CarTextWrapper>
</ColumnWrapper>
<ColumnWrapper>
<Plane src={PlanePng} />
<span>
Aéroport le plus proche - <b>Nantes</b>
</span>
<span>
<Tag
bordered={false}
onClick={() => window.open('https://www.skyscanner.fr/')}
>
skyscanner.fr
</Tag>
</span>
</ColumnWrapper>
</Wrapper>
</MainWrapper>
</SectionWrapper>
)
}

const MainWrapper = styled.div`
Expand Down
16 changes: 6 additions & 10 deletions src/pages/Program.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export const Program: React.FC = () => {
return (
<SectionWrapper id={Pages.PROGRAM}>
<ColumnWrapper>
<Column>
<div>
<Card title="Vendredi 14 juin" bordered={true}>
<Item>
<Meta
Expand All @@ -44,8 +44,8 @@ export const Program: React.FC = () => {
<Tag bordered={false}>17h30</Tag>
</Item>
</Card>
</Column>
<Column>
</div>
<div>
<Card title="Samedi 15 juin" bordered={true}>
<Item>
<Meta
Expand All @@ -68,7 +68,7 @@ export const Program: React.FC = () => {
<Tag bordered={false}>20h30</Tag>
</Item>
</Card>
</Column>
</div>
</ColumnWrapper>
</SectionWrapper>
)
Expand All @@ -82,15 +82,11 @@ const ColumnWrapper = styled.div`
gap: 24px;
padding-bottom: 150px;
@media ${mobile} {
padding-bottom: unset;
@media ${mobile} {
padding-bottom: unset;
}
`

const Column = styled.div`
padding: 0px 0px;
`

const Emoji = styled(BaseEmoji)`
padding-right: 15px;
`
Expand Down

0 comments on commit 29852ea

Please sign in to comment.