Artwork

import { Artwork } from "macbetter/artwork"

const albums = [
  { title: "Golden Hour Tapes", artist: "The Saltmarsh", variant: "bloom", palette: "sunset" },
  { title: "Low Tide", artist: "Harbor Lights", variant: "strata", palette: "ocean" },
  { title: "Night Garden", artist: "Juniper & Ash", variant: "aurora", palette: "berry" },
] as const

export default function Example() {
  return (
    <div style={{ display: "grid", gridTemplateColumns: "repeat(3, minmax(0, 180px))", gap: 20 }}>
      {albums.map((album) => (
        <div key={album.title}>
          <Artwork seed={album.title} variant={album.variant} palette={album.palette} />
          <div className="mb-text-subheadline" style={{ marginTop: 8, fontWeight: 500 }}>{album.title}</div>
          <div className="mb-text-subheadline mb-label-secondary">{album.artist}</div>
        </div>
      ))}
    </div>
  )
}

import { Artwork, artworkVariants } from "macbetter/artwork"

const palettes = ["sunset", "ocean", "berry", "forest", "dusk", "citrus", "glacier", "ember", "candy", "sunset", "ocean", "berry"] as const

export default function Example() {
  return (
    <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(150px, 1fr))", gap: 20, width: "100%" }}>
      {artworkVariants.map((variant, index) => (
        <figure key={variant} style={{ margin: 0 }}>
          <Artwork seed="macbetter" variant={variant} palette={palettes[index]} />
          <figcaption className="mb-text-subheadline" style={{ marginTop: 8 }}>
            {variant}
          </figcaption>
        </figure>
      ))}
    </div>
  )
}

import { Artwork } from "macbetter/artwork"

const playlists = ["Morning Coffee", "Deep Focus", "Late Night Jazz", "Road Trip", "Rainy Day", "Sunday Soul"]

export default function Example() {
  return (
    <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(120px, 1fr))", gap: 16, width: "100%" }}>
      {playlists.map((name) => (
        <figure key={name} style={{ margin: 0 }}>
          <Artwork seed={name} variant="ribbon" palette="dusk" />
          <figcaption className="mb-text-subheadline" style={{ marginTop: 6 }}>
            {name}
          </figcaption>
        </figure>
      ))}
    </div>
  )
}

import { Artwork, artworkPalettes } from "macbetter/artwork"

export default function Example() {
  return (
    <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(110px, 1fr))", gap: 16, width: "100%" }}>
      {artworkPalettes.map((palette) => (
        <figure key={palette} style={{ margin: 0 }}>
          <Artwork seed="Palettes" variant="aurora" palette={palette} />
          <figcaption className="mb-text-subheadline" style={{ marginTop: 6 }}>
            {palette}
          </figcaption>
        </figure>
      ))}
    </div>
  )
}

import { Artwork } from "macbetter/artwork"

export default function Example() {
  return (
    <div style={{ display: "flex", flexWrap: "wrap", gap: 20 }}>
      <Artwork seed="Brand launch" variant="prism" colors={["#ff6b3d", "#ffc53d", "#ff3d8b", "#7a3dff", "#1a0b2e"]} size={160} />
      <Artwork seed="Brand launch" variant="bloom" colors={["var(--mb-accent)", "var(--mb-accent-secondary)"]} size={160} />
    </div>
  )
}

import { Artwork } from "macbetter/artwork"

const shapes = ["square", "rounded", "circle", "app"] as const

export default function Example() {
  return (
    <div style={{ display: "flex", flexWrap: "wrap", gap: 20 }}>
      {shapes.map((shape) => (
        <figure key={shape} style={{ margin: 0, textAlign: "center" }}>
          <Artwork seed="Shapes" variant="orbit" palette="ocean" shape={shape} size={112} />
          <figcaption className="mb-text-subheadline" style={{ marginTop: 8 }}>
            {shape}
          </figcaption>
        </figure>
      ))}
    </div>
  )
}

import { Artwork } from "macbetter/artwork"

const finishes = ["flat", "gloss", "grain"] as const

export default function Example() {
  return (
    <div style={{ display: "flex", flexWrap: "wrap", gap: 20 }}>
      {finishes.map((finish) => (
        <figure key={finish} style={{ margin: 0 }}>
          <Artwork seed="Finish" variant="glyph" palette="sunset" finish={finish} size={160} />
          <figcaption className="mb-text-subheadline" style={{ marginTop: 8 }}>
            {finish}
          </figcaption>
        </figure>
      ))}
    </div>
  )
}

import { Artwork } from "macbetter/artwork"
import { Button } from "macbetter/button"
import { Card, CardDescription, CardFooter, CardHeader, CardTitle } from "macbetter/card"

export default function Example() {
  return (
    <Card variant="elevated" style={{ width: 320, overflow: "hidden", padding: 0 }}>
      <Artwork seed="Fitness Plus Yoga" variant="strata" palette="sunset" aspect={16 / 9} shape="square">
        <span className="mb-text-footnote" style={{ fontWeight: 600, textTransform: "uppercase", opacity: 0.85 }}>
          New series
        </span>
        <span className="mb-text-title-3">Yoga for Runners</span>
      </Artwork>
      <CardHeader style={{ padding: "14px 16px 0" }}>
        <CardTitle>Week one: hips and hamstrings</CardTitle>
        <CardDescription>Six 10-minute sessions to do after a run.</CardDescription>
      </CardHeader>
      <CardFooter style={{ padding: 16 }}>
        <Button size="sm" variant="filled">
          Start Session
        </Button>
      </CardFooter>
    </Card>
  )
}

import { Artwork } from "macbetter/artwork"
import { List, ListRow, ListRowAccessory, ListRowSubtitle, ListRowTitle, ListSection } from "macbetter/list"

const shows = [
  { title: "Field Notes", host: "Inès Moreau", variant: "topo", palette: "forest" },
  { title: "Night Shift", host: "Kofi Mensah", variant: "rays", palette: "dusk" },
  { title: "Small Batch", host: "Wren Takahashi", variant: "halftone", palette: "citrus" },
  { title: "Open Water", host: "Amara Okafor", variant: "mosaic", palette: "glacier" },
] as const

export default function Example() {
  return (
    <List aria-label="Podcasts" style={{ width: 360 }}>
      <ListSection>
        {shows.map((show) => (
          <ListRow key={show.title} href={`#${show.title}`}>
            <Artwork
              seed={show.title}
              variant={show.variant}
              palette={show.palette}
              shape="app"
              size={40}
              style={{ gridColumn: 1, gridRow: "1 / -1", marginInlineEnd: 12 }}
            />
            <ListRowTitle>{show.title}</ListRowTitle>
            <ListRowSubtitle>{show.host}</ListRowSubtitle>
            <ListRowAccessory type="disclosure" />
          </ListRow>
        ))}
      </ListSection>
    </List>
  )
}

import { Artwork } from "macbetter/artwork"

export default function Example() {
  return <Artwork seed="Now Playing" variant="aurora" palette="dusk" animated size={240} title="Now Playing: Velvet Hours" />
}