LocationSingle
Location Single Template comes with a featured card showcasing an image, heading, contact field, address fields and opening hours. A Google maps section is then presented revealing the location, and followed up with a call to action section with text area content.
Installation
yarn add @berlitz/location-single
Props
Argument | Type | Required | Default | Example |
---|---|---|---|---|
featuredCardSection | object | {} | View Below | |
mapSection | object | {} | View Below | |
contentSection | object | {} | View Below |
const featuredCardSection = {
heading: `Awesome Language Center`,
image: {
url: 'https://picsum.photos/1280/720/?random',
description: 'random image',
},
nonPhysicalLocation: false,
nonPhysicalLocationDescription: 'Awesome Language Center Description',
email: 'a@a.com',
phone: '623-207-7801',
addressLineOne: '420 Blaze It, Street',
addressLineTwo: 'Perth AU 6000',
classroomHours: [
{ day: 'Monday - Friday', hours: '8:00AM - 9:00PM' },
{ day: 'Saturday', hours: '9:00AM - 12:00PM' },
],
officeHours: [
{ day: 'Monday - Friday', hours: '8:00AM - 9:00PM' },
{ day: 'Saturday', hours: '9:00AM - 12:00PM' },
],
addressTitle: 'Address',
classroomHoursTitle: 'Classroom Hours',
officeHoursTitle: 'Öffice Hours',
}
const mapSection = {
location: { lat: -31.953832, lng: 115.853299 },
googleMapURL: '{API URL HERE}',
}
const contentSection = {
innerHTML: `
<h2>Awesome Language Center</h2>
<p>You're obsessed with the fat lady! Here's my chance. I've crashed into a beet truck. Remind me to thank John for a lovely weekend. This thing comes fully loaded. Just my luck, no ice. I've crashed into a beet truck. A computer virus.</p>
`,
}
Usage
import React from 'react'
import LocationSingle from '@berlitz/location-single'
const MyApp = () => {
return (
<LocationSingle
featuredCardSection={featuredCardSection}
mapSection={mapSection}
contentSection={contentSection}
/>
)
}
When to use this component
- Single Page with Location Data
Notes
Recommended packages to work with location-single
@berlitz/location-index