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: '[email protected]',
  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