refactor shopify storefront
This commit is contained in:
Rami Bitar
30
components/landing/banner.editor.tsx
Normal file
30
components/landing/banner.editor.tsx
Normal file
@@ -0,0 +1,30 @@
|
||||
import { ComponentConfig } from "@reacteditor/core";
|
||||
import { Megaphone } from "lucide-react";
|
||||
import { Banner, type BannerProps } from "@/components/landing/banner";
|
||||
|
||||
export const bannerEditor: ComponentConfig<BannerProps> = {
|
||||
label: "Announcement bar",
|
||||
icon: <Megaphone size={16} />,
|
||||
category: "hero",
|
||||
defaultProps: {
|
||||
text: "Free shipping on orders over $150",
|
||||
ctaLabel: "Shop new",
|
||||
ctaHref: "/collections/new",
|
||||
tone: "default",
|
||||
},
|
||||
fields: {
|
||||
text: { label: "Text", type: "text", contentEditable: true },
|
||||
ctaLabel: { label: "CTA label", type: "text", contentEditable: true },
|
||||
ctaHref: { label: "CTA link", type: "text" },
|
||||
tone: {
|
||||
label: "Tone",
|
||||
type: "select",
|
||||
options: [
|
||||
{ label: "Default (dark)", value: "default" },
|
||||
{ label: "Inverse (light)", value: "inverse" },
|
||||
{ label: "Muted", value: "muted" },
|
||||
],
|
||||
},
|
||||
},
|
||||
render: (props) => <Banner {...props} />,
|
||||
};
|
||||
32
components/landing/banner.tsx
Normal file
32
components/landing/banner.tsx
Normal file
@@ -0,0 +1,32 @@
|
||||
import { Link } from "react-router";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
export type BannerProps = {
|
||||
text: string;
|
||||
ctaLabel: string;
|
||||
ctaHref: string;
|
||||
tone: "default" | "inverse" | "muted";
|
||||
};
|
||||
|
||||
export function Banner({ text, ctaLabel, ctaHref, tone }: BannerProps) {
|
||||
const toneClass: Record<BannerProps["tone"], string> = {
|
||||
default: "bg-foreground text-background",
|
||||
inverse: "bg-background text-foreground border-y border-border",
|
||||
muted: "bg-muted text-foreground border-y border-border",
|
||||
};
|
||||
return (
|
||||
<div className={cn("w-full py-2 text-center text-xs tracking-[0.18em] uppercase", toneClass[tone])}>
|
||||
<div className="container mx-auto flex flex-col items-center justify-center gap-2 px-6 sm:flex-row">
|
||||
<span>{text}</span>
|
||||
{ctaLabel ? (
|
||||
<Link
|
||||
to={ctaHref || "#"}
|
||||
className="underline-offset-4 hover:underline"
|
||||
>
|
||||
{ctaLabel} →
|
||||
</Link>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
50
components/landing/image-gallery.editor.tsx
Normal file
50
components/landing/image-gallery.editor.tsx
Normal file
@@ -0,0 +1,50 @@
|
||||
import { ComponentConfig } from "@reacteditor/core";
|
||||
import { imageField } from "@reacteditor/plugin-media/field";
|
||||
import { Images } from "lucide-react";
|
||||
import { ImageGallery, type ImageGalleryProps } from "@/components/landing/image-gallery";
|
||||
import { frontendAiMediaAdapter } from "@/services/media-adapter";
|
||||
|
||||
export const imageGalleryEditor: ComponentConfig<ImageGalleryProps> = {
|
||||
label: "Image gallery",
|
||||
icon: <Images size={16} />,
|
||||
category: "content",
|
||||
defaultProps: {
|
||||
tagline: "Lookbook",
|
||||
heading: "Spring in the studio",
|
||||
subheading: "",
|
||||
layout: "editorial",
|
||||
items: [
|
||||
{ src: "https://images.unsplash.com/photo-1490481651871-ab68de25d43d?auto=format&fit=crop&w=1600&q=80", alt: "" },
|
||||
{ src: "https://images.unsplash.com/photo-1483985988355-763728e1935b?auto=format&fit=crop&w=1200&q=80", alt: "" },
|
||||
{ src: "https://images.unsplash.com/photo-1469334031218-e382a71b716b?auto=format&fit=crop&w=1200&q=80", alt: "" },
|
||||
{ src: "https://images.unsplash.com/photo-1542838132-92c53300491e?auto=format&fit=crop&w=1200&q=80", alt: "" },
|
||||
{ src: "https://images.unsplash.com/photo-1521572163474-6864f9cf17ab?auto=format&fit=crop&w=1200&q=80", alt: "" },
|
||||
],
|
||||
},
|
||||
fields: {
|
||||
tagline: { label: "Tagline", type: "text", contentEditable: true },
|
||||
heading: { label: "Heading", type: "text", contentEditable: true },
|
||||
subheading: { label: "Subheading", type: "textarea", contentEditable: true },
|
||||
layout: {
|
||||
label: "Layout",
|
||||
type: "select",
|
||||
options: [
|
||||
{ label: "Grid", value: "grid" },
|
||||
{ label: "Masonry", value: "masonry" },
|
||||
{ label: "Editorial (mosaic)", value: "editorial" },
|
||||
],
|
||||
},
|
||||
items: {
|
||||
label: "Images",
|
||||
type: "array",
|
||||
defaultItemProps: { src: "", alt: "" },
|
||||
getItemSummary: (it) => it?.caption || "Image",
|
||||
arrayFields: {
|
||||
src: { label: "Image", ...imageField({ adapter: frontendAiMediaAdapter }) },
|
||||
alt: { label: "Alt text", type: "text", contentEditable: true },
|
||||
caption: { label: "Caption", type: "text", contentEditable: true },
|
||||
},
|
||||
},
|
||||
},
|
||||
render: (props) => <ImageGallery {...props} />,
|
||||
};
|
||||
92
components/landing/image-gallery.tsx
Normal file
92
components/landing/image-gallery.tsx
Normal file
@@ -0,0 +1,92 @@
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Typography } from "@/components/Typography";
|
||||
|
||||
export type ImageGalleryProps = {
|
||||
tagline: string;
|
||||
heading: string;
|
||||
subheading: string;
|
||||
layout: "grid" | "masonry" | "editorial";
|
||||
items: Array<{ src: string; alt: string; caption?: string }>;
|
||||
};
|
||||
|
||||
export function ImageGallery({ tagline, heading, subheading, layout, items }: ImageGalleryProps) {
|
||||
return (
|
||||
<section className="bg-background py-20 md:py-28">
|
||||
<div className="container mx-auto max-w-7xl px-6">
|
||||
{(tagline || heading || subheading) && (
|
||||
<div className="mx-auto mb-12 max-w-2xl text-center">
|
||||
{tagline ? (
|
||||
<p className="mb-3 text-xs uppercase tracking-[0.2em] text-muted-foreground">
|
||||
{tagline}
|
||||
</p>
|
||||
) : null}
|
||||
{heading ? <Typography variant="h2">{heading}</Typography> : null}
|
||||
{subheading ? (
|
||||
<Typography variant="subtitle1" className="mt-3">
|
||||
{subheading}
|
||||
</Typography>
|
||||
) : null}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{layout === "masonry" ? (
|
||||
<div className="columns-1 gap-4 sm:columns-2 lg:columns-3">
|
||||
{items.map((it, i) => (
|
||||
<figure key={i} className="mb-4 break-inside-avoid">
|
||||
<img
|
||||
src={it.src}
|
||||
alt={it.alt}
|
||||
className="w-full rounded-md object-cover"
|
||||
/>
|
||||
{it.caption ? (
|
||||
<figcaption className="mt-2 text-xs text-muted-foreground">
|
||||
{it.caption}
|
||||
</figcaption>
|
||||
) : null}
|
||||
</figure>
|
||||
))}
|
||||
</div>
|
||||
) : layout === "editorial" ? (
|
||||
<div className="grid grid-cols-1 gap-6 md:grid-cols-12">
|
||||
{items.slice(0, 5).map((it, i) => (
|
||||
<figure
|
||||
key={i}
|
||||
className={cn(
|
||||
"overflow-hidden rounded-md bg-muted",
|
||||
i === 0 && "md:col-span-7 md:row-span-2",
|
||||
i === 1 && "md:col-span-5",
|
||||
i === 2 && "md:col-span-5",
|
||||
i === 3 && "md:col-span-6",
|
||||
i === 4 && "md:col-span-6",
|
||||
)}
|
||||
>
|
||||
<img
|
||||
src={it.src}
|
||||
alt={it.alt}
|
||||
className="h-full w-full object-cover"
|
||||
/>
|
||||
</figure>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{items.map((it, i) => (
|
||||
<figure key={i}>
|
||||
<img
|
||||
src={it.src}
|
||||
alt={it.alt}
|
||||
className="aspect-[4/5] w-full rounded-md object-cover"
|
||||
/>
|
||||
{it.caption ? (
|
||||
<figcaption className="mt-2 text-xs text-muted-foreground">
|
||||
{it.caption}
|
||||
</figcaption>
|
||||
) : null}
|
||||
</figure>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
39
components/landing/newsletter-cta.editor.tsx
Normal file
39
components/landing/newsletter-cta.editor.tsx
Normal file
@@ -0,0 +1,39 @@
|
||||
import { ComponentConfig } from "@reacteditor/core";
|
||||
import { imageField } from "@reacteditor/plugin-media/field";
|
||||
import { Mail } from "lucide-react";
|
||||
import { NewsletterCta, type NewsletterCtaProps } from "@/components/landing/newsletter-cta";
|
||||
import { frontendAiMediaAdapter } from "@/services/media-adapter";
|
||||
|
||||
export const newsletterCtaEditor: ComponentConfig<NewsletterCtaProps> = {
|
||||
label: "Newsletter",
|
||||
icon: <Mail size={16} />,
|
||||
category: "content",
|
||||
defaultProps: {
|
||||
tagline: "Stay in the loop",
|
||||
heading: "Letters from the studio",
|
||||
subheading:
|
||||
"New collections, mill stories, and the occasional invitation to in-person events. Twice a month.",
|
||||
buttonLabel: "Subscribe",
|
||||
endpoint: "",
|
||||
imageUrl:
|
||||
"https://images.unsplash.com/photo-1469334031218-e382a71b716b?auto=format&fit=crop&w=1800&q=80",
|
||||
layout: "split",
|
||||
},
|
||||
fields: {
|
||||
tagline: { label: "Tagline", type: "text", contentEditable: true },
|
||||
heading: { label: "Heading", type: "text", contentEditable: true },
|
||||
subheading: { label: "Subheading", type: "textarea", contentEditable: true },
|
||||
buttonLabel: { label: "Button label", type: "text", contentEditable: true },
|
||||
endpoint: { label: "Submit endpoint", type: "text" },
|
||||
imageUrl: { label: "Image", ...imageField({ adapter: frontendAiMediaAdapter }) },
|
||||
layout: {
|
||||
label: "Layout",
|
||||
type: "radio",
|
||||
options: [
|
||||
{ label: "Split (image + form)", value: "split" },
|
||||
{ label: "Stacked (centered)", value: "stacked" },
|
||||
],
|
||||
},
|
||||
},
|
||||
render: (props) => <NewsletterCta {...props} />,
|
||||
};
|
||||
139
components/landing/newsletter-cta.tsx
Normal file
139
components/landing/newsletter-cta.tsx
Normal file
@@ -0,0 +1,139 @@
|
||||
import { useState } from "react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Typography } from "@/components/Typography";
|
||||
|
||||
export type NewsletterCtaProps = {
|
||||
tagline: string;
|
||||
heading: string;
|
||||
subheading: string;
|
||||
buttonLabel: string;
|
||||
endpoint: string;
|
||||
imageUrl: string;
|
||||
layout: "split" | "stacked";
|
||||
};
|
||||
|
||||
export function NewsletterCta({
|
||||
tagline,
|
||||
heading,
|
||||
subheading,
|
||||
buttonLabel,
|
||||
endpoint,
|
||||
imageUrl,
|
||||
layout,
|
||||
}: NewsletterCtaProps) {
|
||||
const [email, setEmail] = useState("");
|
||||
const [submitted, setSubmitted] = useState(false);
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
|
||||
const submit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!email) return;
|
||||
setSubmitting(true);
|
||||
try {
|
||||
if (endpoint) {
|
||||
await fetch(endpoint, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ email }),
|
||||
});
|
||||
}
|
||||
setSubmitted(true);
|
||||
} catch {
|
||||
setSubmitted(true);
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const Form = (
|
||||
<form
|
||||
onSubmit={submit}
|
||||
className="flex w-full max-w-md items-center border-b border-foreground/30 focus-within:border-foreground"
|
||||
>
|
||||
<input
|
||||
type="email"
|
||||
required
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
placeholder="you@example.com"
|
||||
className="flex-1 bg-transparent py-3 text-sm placeholder:text-muted-foreground focus:outline-none"
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={submitting}
|
||||
className="ml-3 text-sm font-medium tracking-wide hover:opacity-70 disabled:opacity-40"
|
||||
>
|
||||
{submitting ? "…" : buttonLabel} →
|
||||
</button>
|
||||
</form>
|
||||
);
|
||||
|
||||
if (layout === "split") {
|
||||
return (
|
||||
<section className="bg-background">
|
||||
<div className="container mx-auto max-w-7xl px-6 py-16 md:py-24">
|
||||
<div className="grid grid-cols-1 items-center gap-12 md:grid-cols-2">
|
||||
<div>
|
||||
{imageUrl ? (
|
||||
<img
|
||||
src={imageUrl}
|
||||
alt=""
|
||||
className="aspect-[5/4] w-full rounded-md object-cover"
|
||||
/>
|
||||
) : null}
|
||||
</div>
|
||||
<div className="flex flex-col items-start">
|
||||
{tagline ? (
|
||||
<p className="mb-3 text-xs uppercase tracking-[0.2em] text-muted-foreground">
|
||||
{tagline}
|
||||
</p>
|
||||
) : null}
|
||||
<Typography variant="h2">{heading}</Typography>
|
||||
{subheading ? (
|
||||
<Typography variant="subtitle1" className="mt-3 max-w-md">
|
||||
{subheading}
|
||||
</Typography>
|
||||
) : null}
|
||||
<div className="mt-8 w-full">
|
||||
{submitted ? (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Thanks — we'll be in touch.
|
||||
</p>
|
||||
) : (
|
||||
Form
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<section className="bg-muted/40 py-20 md:py-28">
|
||||
<div className="container mx-auto max-w-2xl px-6 text-center">
|
||||
{tagline ? (
|
||||
<p className="mb-3 text-xs uppercase tracking-[0.2em] text-muted-foreground">
|
||||
{tagline}
|
||||
</p>
|
||||
) : null}
|
||||
<Typography variant="h2">{heading}</Typography>
|
||||
{subheading ? (
|
||||
<Typography variant="subtitle1" className="mt-3">
|
||||
{subheading}
|
||||
</Typography>
|
||||
) : null}
|
||||
<div className={cn("mx-auto mt-10 flex w-full max-w-md justify-center")}>
|
||||
{submitted ? (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Thanks — we'll be in touch.
|
||||
</p>
|
||||
) : (
|
||||
Form
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user