Skip to content

Commit

Permalink
Add click to edit to offices template (#932)
Browse files Browse the repository at this point in the history
  • Loading branch information
@jackreimers
jackreimers authored Jul 5, 2023
1 parent 4494a43 commit 3c959e6
Show file tree
Hide file tree
Showing 2 changed files with 108 additions and 81 deletions.
117 changes: 66 additions & 51 deletions components/offices/contactPanel.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,60 +1,75 @@
import Image from "next/image";
import Link from "next/link";

const ContactPanel = ({
phone,
streetAddress,
suburb,
addressLocality,
addressRegion,
postalCode,
addressCountry,
sideImg,
sidebarSecondaryPlace,
}) => (
<>
<h3>Contact Us</h3>
<p>
Whether you're having trouble with your development process or you just
need us to write some awesome software, our team of experts is ready to
help.
</p>
import { tinaField } from "tinacms/dist/react";

<p>
Give us a call on
<br />
<strong>{phone}</strong>
</p>
const ContactPanel = ({ office }) => {
return (
<>
<h3>Contact Us</h3>
<p>
Whether you're having trouble with your development process or you just
need us to write some awesome software, our team of experts is ready to
help.
</p>

<p>
Find us at
<br />
<strong>
{streetAddress} <br />
{suburb}, {addressRegion} {postalCode} <br />
{addressCountry}
</strong>
</p>
<p>
Give us a call on
<br />
<span data-tina-field={tinaField(office, "phone")}>
<strong>{office.phone}</strong>
</span>
</p>
<p>
Find us at
<br />
<strong>
<span data-tina-field={tinaField(office, "streetAddress")}>
{office.streetAddress}
</span>
<br />
<span data-tina-field={tinaField(office, "suburb")}>
{office.suburb + ", "}
</span>
<span data-tina-field={tinaField(office, "addressRegion")}>
{office.addressRegion + " "}
</span>
<span data-tina-field={tinaField(office, "postalCode")}>
{office.postalCode}
</span>
<br />
<span data-tina-field={tinaField(office, "addressCountry")}>
{office.addressCountry}
</span>
</strong>
</p>
<p>
{"Learn more on "}
<Link href={`https://sswchapel.com.au/${office.addressLocality}`}>
SSW Chapel
</Link>
{!!office.sidebarSecondaryPlace && (
<>
{" and "}
<Link href={office.sidebarSecondaryPlace.url}>
{office.sidebarSecondaryPlace.name}
</Link>
</>
)}
</p>

<p>
{"Learn more on "}
<Link href={`https://sswchapel.com.au/${addressLocality}`}>
SSW Chapel
</Link>
{!!sidebarSecondaryPlace && (
<>
{" and "}
<Link href={sidebarSecondaryPlace.url}>
{sidebarSecondaryPlace.name}
</Link>
</>
{office.sideImg && (
<div data-tina-field={tinaField(office, "sideImg")}>
<Image
src={office.sideImg}
width={285}
height={160}
alt="Sidebar Image"
/>
</div>
)}
</p>

{sideImg && (
<Image src={sideImg} width={285} height={160} alt="Sidebar Image" />
)}
</>
);
</>
);
};

export default ContactPanel;
72 changes: 42 additions & 30 deletions pages/offices/[filename].tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import Image from "next/image";

import { useTina } from "tinacms/dist/react";
import { tinaField, useTina } from "tinacms/dist/react";
import { TinaMarkdown } from "tinacms/dist/rich-text";
import { client } from "../../.tina/__generated__/client";

Expand Down Expand Up @@ -34,6 +34,7 @@ export default function OfficePage(
<div className="mx-auto max-w-9xl px-6 sm:px-8">
<div className="h-auto w-auto">
<Image
data-tina-field={tinaField(data.offices, "coverImg")}
width={1320}
height={485}
src={data.offices.coverImg}
Expand Down Expand Up @@ -76,11 +77,14 @@ const OfficeLayout = ({ office }) => {
return (
<div className="prose max-w-full">
<h2>About Us</h2>
<TinaMarkdown components={componentRenderer} content={office.aboutUs} />
<div data-tina-field={tinaField(office, "aboutUs")}>
<TinaMarkdown components={componentRenderer} content={office.aboutUs} />
</div>
{office.map ? (
<>
<h2>SSW {office.addressLocality} Map</h2>
<Image
data-tina-field={tinaField(office, "map")}
src={office.map}
width={1920}
height={1080}
Expand All @@ -92,7 +96,10 @@ const OfficeLayout = ({ office }) => {
)}
<h2 id="Directions">SSW {office.addressLocality} Directions</h2>
<h4>
<a href={office.directionsUrl}>
<a
data-tina-field={tinaField(office, "directionsUrl")}
href={office.directionsUrl}
>
<Image
src="/images/icons/map-pin.svg"
alt="Map pin icon"
Expand All @@ -103,32 +110,43 @@ const OfficeLayout = ({ office }) => {
{`${office.streetAddress}, ${office.suburb}, ${office.addressRegion} ${office.postalCode}, ${office.addressCountry}`}
</a>
</h4>
<TinaMarkdown
components={componentRenderer}
content={office.directions}
/>
<div data-tina-field={tinaField(office, "directions")}>
<TinaMarkdown
components={componentRenderer}
content={office.directions}
/>
</div>
{office.parking.children.length > 0 && (
<>
<h2>Parking</h2>
<TinaMarkdown
components={componentRenderer}
content={office.parking}
/>
<div data-tina-field={tinaField(office, "parking")}>
<TinaMarkdown
components={componentRenderer}
content={office.parking}
/>
</div>
</>
)}
{office.publicTransport.children.length > 0 && (
<>
<h2>Public Transport</h2>
<TinaMarkdown
components={componentRenderer}
content={office.publicTransport}
/>
<div data-tina-field={tinaField(office, "publicTransport")}>
<TinaMarkdown
components={componentRenderer}
content={office.publicTransport}
/>
</div>
</>
)}
{office.team.children.length > 0 ? (
<>
<h2>The SSW {office.addressLocality} Team</h2>
<TinaMarkdown components={componentRenderer} content={office.team} />
<div data-tina-field={tinaField(office, "team")}>
<h2>The SSW {office.addressLocality} Team</h2>
<TinaMarkdown
components={componentRenderer}
content={office.team}
/>
</div>
</>
) : (
<></>
Expand All @@ -145,7 +163,12 @@ const OfficeLayout = ({ office }) => {
{office._body.children.length > 0 && (
<>
<hr />
<TinaMarkdown components={componentRenderer} content={office._body} />
<div data-tina-field={tinaField(office, "_body")}>
<TinaMarkdown
components={componentRenderer}
content={office._body}
/>
</div>
</>
)}
</div>
Expand All @@ -155,18 +178,7 @@ const OfficeLayout = ({ office }) => {
const SidePanel = ({ office, testimonial }) => {
return (
<div className="prose max-w-full">
<ContactPanel
phone={office.phone}
streetAddress={office.streetAddress}
suburb={office.suburb}
addressLocality={office.addressLocality}
addressRegion={office.addressRegion}
postalCode={office.postalCode}
addressCountry={office.addressCountry}
sideImg={office.sideImg}
sidebarSecondaryPlace={office.sidebarSecondaryPlace}
/>

<ContactPanel office={office} />
<MicrosoftPanel />
<TestimonialPanel testimonial={testimonial} />
</div>
Expand Down

0 comments on commit 3c959e6

Please sign in to comment.