{siteConfig.newsletter.description}
- Or subscribe to the{" "} - RSS feed. + {t.rich("rss", { + link: (chunks) => ( + {chunks} + ), + })}
Opt-in to receive future issues of the newsletter via email.
+{t("inboxDescription")}
- Or subscribe to the{" "} - RSS feed. + {t.rich("rss", { + link: (chunks) => ( + {chunks} + ), + })}
Please enter your new password below.
+{t("Auth.resetPassword.body")}
- First time here?
Sorry, we couldn’t find the page you were looking for.
- Home +{t("NotFound.body")}
+ {t("Actions.home")}No messages yet
+{t("Chat.empty")}
{isDemo || message.sender_id === user?.id - ? `You reached out to ${otherPersonName}` + ? t("Chat.youReachedOut", { name: otherPersonName }) : listing?.owner_has_multiple_non_residential_listings && listing?.name - ? `${otherPersonName} reached out to you about ${listing.name}` - : `${otherPersonName} reached out to you`} + ? t("Chat.personReachedOutAbout", { + name: otherPersonName, + listing: listing.name, + }) + : t("Chat.personReachedOut", { + name: otherPersonName, + })}
)} diff --git a/src/components/IntroHeader/IntroHeader.jsx b/src/components/IntroHeader/IntroHeader.jsx index 2978ce98..459b9244 100644 --- a/src/components/IntroHeader/IntroHeader.jsx +++ b/src/components/IntroHeader/IntroHeader.jsx @@ -3,6 +3,7 @@ import { useState, useEffect } from "react"; import MapPin from "@/components/MapPin"; import Avatar from "@/components/Avatar"; import { styled, keyframes } from "@pigment-css/react"; +import { useTranslations } from "next-intl"; const featuredItems = [ { @@ -123,6 +124,7 @@ const enterMarkerAnimation = keyframes({ }); function IntroHeader() { + const t = useTranslations("Index"); const [itemIndex, setItemIndex] = useState(0); const [prevItemIndex, setPrevItemIndex] = useState(null); @@ -149,7 +151,7 @@ function IntroHeader() { isExiting={true} isDemo={true} src={`/avatars/featured/${featuredItems[prevItemIndex].photo}`} - alt="The avatar for a Peels host" + alt={t("hostAvatarAlt")} size="massive" /> @@ -163,7 +165,7 @@ function IntroHeader() { isExiting={false} isDemo={true} src={`/avatars/featured/${featuredItems[itemIndex].photo}`} - alt="The avatar for a Peels host" + alt={t("hostAvatarAlt")} size="massive" /> diff --git a/src/components/Label/Label.jsx b/src/components/Label/Label.tsx similarity index 50% rename from src/components/Label/Label.jsx rename to src/components/Label/Label.tsx index 89a86222..c3eab648 100644 --- a/src/components/Label/Label.jsx +++ b/src/components/Label/Label.tsx @@ -1,5 +1,6 @@ import { Label as HeadlessLabel } from "@headlessui/react"; import { styled } from "@pigment-css/react"; +import type { ComponentProps, ReactNode } from "react"; const StyledLabel = styled(HeadlessLabel)(({ theme }) => ({ color: theme.colors.text.ui.primary, @@ -11,10 +12,21 @@ const StyledLabel = styled(HeadlessLabel)(({ theme }) => ({ }, })); -export default function Label({ required = true, children, ...props }) { +type LabelProps = ComponentProps- This is your own listing{isStub && ", marked as a stub"}.{" "} - {visibility - ? "Lookin’ good!" - : "You’ve hidden it from the map, so only you can see this right now."} + {t("Listings.read.ownerNote", { + stub: isStub ? "true" : "false", + visibility: visibility ? "true" : "false", + })}
{t("Listings.read.stubNote")}
- This is a stub created by the Peels team. Double-check the listing - information before visiting. -
-
- Are you the owner?{" "}
-
- First time here?
{listing?.area_name ? ( - <>Resident of {listing?.area_name} + <>{t("Listings.read.residentOf", { area: listing.area_name })} ) : ( - "Local resident" + t("Listings.read.localResident") )}
)} {listing?.type === "community" && ({listing?.area_name ? ( - <>Community in {listing?.area_name} + <>{t("Listings.read.communityIn", { area: listing.area_name })} ) : ( - "Local community" + t("Listings.read.localCommunity") )}
)} {listing?.type === "business" && ({listing?.area_name ? ( - <>Business in {listing?.area_name} + <>{t("Listings.read.businessIn", { area: listing.area_name })} ) : ( - "Local business" + t("Listings.read.localBusiness") )}
)} - {listing?.is_stub &&Drop photos here
+{t("Listings.photos.dropHere")}
- {listingDisplayName} is a resident of{" "} - {listing.area_name ? listing.area_name : "this area"}. Ask - them for their exact location when you arrange a food scrap - drop-off. + {t("Listings.read.residentialLocation", { + name: listingDisplayName, + area: listing.area_name + ? listing.area_name + : t("Listings.read.thisArea"), + })}
) : (- {listingDisplayName} is{" "} - {listing.type === "business" - ? "a business" - : listing.type === "community" - ? "a community spot" - : ""}{" "} - located in {listing.area_name}. + {t("Listings.read.nonResidentialLocation", { + name: listingDisplayName, + type: + listing.type === "business" + ? t("Listings.read.businessType") + : listing.type === "community" + ? t("Listings.read.communityType") + : "", + area: listing.area_name, + })}
)} @@ -199,7 +209,7 @@ const ListingRead = memo(function Listing({ size="small" href={`/map?listing=${listing.slug}`} > - See nearby listings + {t("Actions.seeNearbyListings")} {listing.type !== "residential" && ( <> @@ -211,7 +221,7 @@ const ListingRead = memo(function Listing({ )}`} target="_blank" > - Open in Apple Maps + {t("Actions.openInAppleMaps")} )} @@ -235,11 +245,14 @@ const ListingRead = memo(function Listing({ !user && listing.type === "residential" ? undefined : "visible" } > -
-
Refine your pin location:
*/} @@ -342,10 +369,11 @@ export default function LocationSelect({- The listing you’re looking for doesn’t exist or has been - removed. Sorry to disappoint. -
+{t("Map.emptyBody")}
{randomFact.fact}
{randomFact.source && (- Source + {t("Common.source")}
diff --git a/src/components/MultiInput/MultiInput.jsx b/src/components/MultiInput/MultiInput.tsx similarity index 67% rename from src/components/MultiInput/MultiInput.jsx rename to src/components/MultiInput/MultiInput.tsx index fb0ba367..9da103d1 100644 --- a/src/components/MultiInput/MultiInput.jsx +++ b/src/components/MultiInput/MultiInput.tsx @@ -1,16 +1,33 @@ "use client"; import { useId, useRef } from "react"; +import type { + ChangeEvent, + HTMLInputTypeAttribute, + KeyboardEvent, + ReactNode, +} from "react"; -import Form from "@/components/Form"; import Fieldset from "@/components/Fieldset"; import Field from "@/components/Field"; import Label from "@/components/Label"; import Input from "@/components/Input"; -import SubmitButton from "@/components/SubmitButton"; import Button from "@/components/Button"; -import Textarea from "@/components/Textarea"; -import { styled } from "@pigment-css/react"; +type MultiInputProps = { + label: ReactNode; + placeholder?: string; + secondaryPlaceholder?: string; + items: string[]; + minRequired?: number; + handleItemChange: (index: number, value: string) => void; + onClick: () => void; + limit?: number; + type?: HTMLInputTypeAttribute; + pattern?: string; + addButtonText?: string; + addAnotherButtonText?: string; + optionalText?: string; +}; function MultiInput({ label, @@ -25,9 +42,10 @@ function MultiInput({ pattern = undefined, addButtonText = "Add", addAnotherButtonText = "Add another", -}) { + optionalText, +}: MultiInputProps) { const uniqueId = useId(); - const addButtonRef = useRef(null); + const addButtonRef = useRef- You need to be a member of Peels to get the newsletter via email. - Signing up is free and only takes a few seconds. -
+{t("Newsletter.callout.guestBody")}
{status.isNewsletterSubscribed - ? userConfig.alreadySubscribed.description - : userConfig.notYetSubscribed.description} + ? t("Newsletter.callout.alreadySubscribedBody") + : t("Newsletter.callout.notSubscribedBody")}
{tempFirstName}
{user.email}
{tempNewsletterPreference === true - ? "Subscribed" - : "Not subscribed"} + ? t("Common.subscribed") + : t("Common.notSubscribed")}
Goodbye for now!
+{t("Profile.actions.signOutDescription")}
Get a copy of your Peels data
+{t("Profile.actions.exportDescription")}
- Delete your account - {listings?.length > 0 && - `, ${listings.length > 1 ? "listings" : "listing"},`}{" "} - and all your data + {t("Profile.actions.deleteDescription", { + count: listings?.length ?? 0, + })}
- {listing.type.charAt(0).toUpperCase() + listing.type.slice(1)}{" "} - listing -
+{t("Profile.listingCardType", { type: listing.type })}
- Put yourself, your community spot, or your business on the map -
-{t("Profile.listingPrompt")}
+No chats yet
+{t("noChats")}