Widget

import { SunIcon } from "@phosphor-icons/react"
import {
  Widget,
  WidgetContent,
  WidgetDescription,
  WidgetFooter,
  WidgetHeader,
  WidgetIcon,
  WidgetTitle,
  WidgetValue,
} from "@/components/ui/widget"

export default function WidgetDemo() {
  return (
    <Widget size="small" align="start">
      <WidgetHeader>
        <WidgetIcon>
          <SunIcon className="fill-current" />
        </WidgetIcon>
        <WidgetTitle>Istanbul</WidgetTitle>
      </WidgetHeader>
      <WidgetContent>
        <WidgetValue>24°</WidgetValue>
        <WidgetDescription>Partly cloudy</WidgetDescription>
      </WidgetContent>
      <WidgetFooter>H 27° · L 18°</WidgetFooter>
    </Widget>
  )
}

import { CashRegisterIcon } from "@phosphor-icons/react"
import type * as React from "react"
import {
  Widget,
  WidgetDescription,
  WidgetHeader,
  WidgetIcon,
  WidgetTitle,
  WidgetValue,
} from "@/components/ui/widget"

const hourly = [12, 18, 14, 30, 44, 34, 22, 40, 100, 46, 30, 14]

const topItems = [
  { name: "Grilled meatballs", count: 38 },
  { name: "Lahmacun", count: 31 },
  { name: "Adana kebab", count: 24 },
  { name: "Künefe", count: 19 },
]

function Hint({ children }: { children: React.ReactNode }) {
  return <p className="mt-6 text-xs text-muted-foreground">{children}</p>
}

export default function WidgetSales() {
  return (
    <div>
      <Widget resizable defaultSize="large">
        <WidgetHeader className="gap-1.5 text-amber-600 dark:text-amber-400">
          <WidgetIcon size="sm" className="text-amber-600 dark:text-amber-400">
            <CashRegisterIcon />
          </WidgetIcon>
          <WidgetTitle>Hestia</WidgetTitle>
        </WidgetHeader>
        <div className="flex min-h-0 flex-col gap-3 group-data-[size=medium]/widget:flex-1 group-data-[size=medium]/widget:flex-row group-data-[size=medium]/widget:items-end">
          <div className="shrink-0">
            <WidgetValue>₺18,240</WidgetValue>
            <WidgetDescription className="text-xs">
              Today's revenue · 42 orders
            </WidgetDescription>
          </div>
          <div
            aria-hidden="true"
            className="flex h-14 shrink-0 items-end gap-1 group-data-[size=medium]/widget:h-full group-data-[size=medium]/widget:flex-1 group-data-[size=small]/widget:hidden"
          >
            {hourly.map((value, index) => (
              <span
                key={index}
                data-now={value === 100}
                className="flex-1 rounded-sm bg-secondary data-[now=true]:bg-orange-500"
                style={{ height: `${value}%` }}
              />
            ))}
          </div>
        </div>
        <ul className="flex flex-col group-data-[size=medium]/widget:hidden group-data-[size=small]/widget:hidden">
          {topItems.map((item) => (
            <li
              key={item.name}
              className="flex items-center justify-between border-t py-1.5 text-sm"
            >
              {item.name}
              <span className="text-muted-foreground tabular-nums">
                {item.count}
              </span>
            </li>
          ))}
        </ul>
      </Widget>
      <Hint>
        Hover the corner and drag the handle. Double-click it to reset.
      </Hint>
    </div>
  )
}

import { CookingPotIcon } from "@phosphor-icons/react"
import type * as React from "react"
import {
  Widget,
  WidgetDescription,
  WidgetHeader,
  WidgetIcon,
  WidgetTitle,
  WidgetValue,
} from "@/components/ui/widget"

const tickets = [
  { id: "#1042", place: "Table 4", minutes: 18 },
  { id: "#1043", place: "Takeaway", minutes: 15 },
  { id: "#1044", place: "Table 12", minutes: 9 },
  { id: "#1045", place: "Pickup", minutes: 7 },
  { id: "#1046", place: "Garden 3", minutes: 5 },
  { id: "#1047", place: "Table 7", minutes: 3 },
  { id: "#1048", place: "Takeaway", minutes: 1 },
]

function Hint({ children }: { children: React.ReactNode }) {
  return <p className="mt-6 text-xs text-muted-foreground">{children}</p>
}

export default function WidgetKitchen() {
  return (
    <div>
      <Widget
        resizable
        handle="inside"
        defaultSize="large"
        className="flex-row gap-4"
      >
        <div className="flex w-32 shrink-0 flex-col gap-1 group-data-[size=small]/widget:w-full">
          <WidgetHeader className="gap-1.5 text-amber-600 dark:text-amber-400">
            <WidgetIcon
              size="sm"
              className="text-amber-600 dark:text-amber-400"
            >
              <CookingPotIcon />
            </WidgetIcon>
            <WidgetTitle>Kitchen</WidgetTitle>
          </WidgetHeader>
          <WidgetValue className="mt-2 text-5xl">7</WidgetValue>
          <WidgetDescription className="text-xs">
            pending orders
          </WidgetDescription>
          <p className="text-xs font-medium text-destructive">2 running late</p>
        </div>
        <ul className="flex min-w-0 flex-1 flex-col group-data-[size=small]/widget:hidden">
          {tickets.map((ticket) => (
            <li
              key={ticket.id}
              className="flex items-center gap-2 border-b py-1.5 text-sm group-data-[size=medium]/widget:nth-[n+4]:hidden"
            >
              <span
                aria-hidden="true"
                data-late={ticket.minutes >= 15}
                className="size-1.5 shrink-0 rounded-full bg-orange-500 data-[late=true]:bg-red-500"
              />
              <span className="min-w-0 flex-1 truncate">
                {ticket.id} · {ticket.place}
              </span>
              <span
                data-late={ticket.minutes >= 15}
                className="text-xs text-muted-foreground tabular-nums data-[late=true]:font-medium data-[late=true]:text-destructive"
              >
                {ticket.minutes} min
              </span>
            </li>
          ))}
        </ul>
      </Widget>
      <Hint>Handle inside the corner. Hover the corner to reveal it.</Hint>
    </div>
  )
}

import { CalendarBlankIcon } from "@phosphor-icons/react"
import type * as React from "react"
import {
  Widget,
  WidgetAction,
  WidgetHeader,
  WidgetIcon,
  WidgetTitle,
  WidgetValue,
} from "@/components/ui/widget"

function Hint({ children }: { children: React.ReactNode }) {
  return <p className="mt-6 text-xs text-muted-foreground">{children}</p>
}

export default function WidgetReservations() {
  return (
    <div>
      <Widget resizable defaultSize="medium" sizes={["small", "medium"]}>
        <WidgetHeader className="gap-1.5 text-primary">
          <WidgetIcon size="sm" className="text-primary">
            <CalendarBlankIcon />
          </WidgetIcon>
          <WidgetTitle>Reservations</WidgetTitle>
          <WidgetAction className="text-xs text-muted-foreground">
            Up next
          </WidgetAction>
        </WidgetHeader>
        <div>
          <WidgetValue>20:00</WidgetValue>
          <p className="text-sm">Ayşe Y. · 6 guests</p>
        </div>
        <div className="mt-auto flex flex-col gap-1 group-data-[size=small]/widget:hidden">
          <div className="flex justify-between text-xs text-muted-foreground tabular-nums">
            <span>18:00</span>
            <span>20:00</span>
            <span>22:00</span>
            <span>24:00</span>
          </div>
          <div className="relative h-2 rounded-full bg-secondary">
            <span className="absolute inset-y-0 start-[30%] w-[45%] rounded-full bg-blue-500" />
          </div>
        </div>
      </Widget>
      <Hint>Snaps between small and medium only.</Hint>
    </div>
  )
}

import { ChartBarIcon, TriangleIcon } from "@phosphor-icons/react"
import type * as React from "react"
import {
  Widget,
  WidgetHeader,
  WidgetIcon,
  WidgetTitle,
  WidgetValue,
} from "@/components/ui/widget"

const week = [
  { day: "Mon", value: 52 },
  { day: "Tue", value: 44 },
  { day: "Wed", value: 60 },
  { day: "Thu", value: 56 },
  { day: "Fri", value: 82 },
  { day: "Sat", value: 100 },
  { day: "Sun", value: 70 },
]

const channels = [
  { name: "Dine-in", amount: "₺64,200", tint: "bg-blue-500" },
  { name: "Takeaway", amount: "₺38,900", tint: "bg-orange-500" },
  { name: "Pickup", amount: "₺18,800", tint: "bg-green-500" },
]

const bestSellers = [
  { name: "Grilled meatballs", count: 238 },
  { name: "Lahmacun", count: 201 },
  { name: "Adana kebab", count: 164 },
  { name: "Künefe", count: 131 },
  { name: "Ayran", count: 120 },
  { name: "Lentil soup", count: 96 },
] as const

function Hint({ children }: { children: React.ReactNode }) {
  return <p className="mt-6 text-xs text-muted-foreground">{children}</p>
}

export default function WidgetWeeklyReport() {
  return (
    <div>
      <Widget resizable defaultSize="extra-large" className="flex-row gap-6">
        <div className="flex min-w-0 flex-1 flex-col gap-3">
          <WidgetHeader className="gap-1.5 text-green-600 dark:text-green-400">
            <WidgetIcon
              size="sm"
              className="text-green-600 dark:text-green-400"
            >
              <ChartBarIcon />
            </WidgetIcon>
            <WidgetTitle>This week</WidgetTitle>
          </WidgetHeader>
          <div className="flex min-h-0 flex-col gap-3 group-data-[size=medium]/widget:flex-1 group-data-[size=medium]/widget:flex-row group-data-[size=medium]/widget:items-end">
            <div className="shrink-0">
              <WidgetValue>₺121,900</WidgetValue>
              <p className="flex items-center gap-1 text-xs font-medium text-green-600 dark:text-green-400">
                <TriangleIcon className="size-2.5 fill-current" />
                12% more than last week
              </p>
            </div>
            <div className="flex h-24 min-w-0 shrink-0 items-end gap-2 group-data-[size=medium]/widget:h-full group-data-[size=medium]/widget:gap-1.5 group-data-[size=medium]/widget:flex-1 group-data-[size=small]/widget:hidden">
              {week.map((day) => (
                <div
                  key={day.day}
                  className="flex h-full min-w-0 flex-1 flex-col items-center justify-end gap-1"
                >
                  <div className="flex min-h-0 w-full flex-1 items-end">
                    <span
                      aria-hidden="true"
                      data-top={day.value === 100}
                      className="w-full rounded-md bg-secondary data-[top=true]:bg-green-500"
                      style={{ height: `${day.value}%` }}
                    />
                  </div>
                  <span className="text-xs text-muted-foreground group-data-[size=medium]/widget:hidden">
                    {day.day}
                  </span>
                </div>
              ))}
            </div>
          </div>
          <ul className="flex flex-col group-data-[size=medium]/widget:hidden group-data-[size=small]/widget:hidden">
            {channels.map((channel) => (
              <li
                key={channel.name}
                className="flex items-center gap-2 border-t py-1.5 text-sm"
              >
                <span
                  aria-hidden="true"
                  className={`size-2 rounded-full ${channel.tint}`}
                />
                <span className="flex-1">{channel.name}</span>
                <span className="text-muted-foreground tabular-nums">
                  {channel.amount}
                </span>
              </li>
            ))}
          </ul>
        </div>
        <div className="hidden w-72 shrink-0 flex-col gap-2 group-data-[size=extra-large]/widget:flex">
          <p className="text-xs font-semibold text-muted-foreground">
            Best sellers
          </p>
          {bestSellers.map((item) => (
            <div key={item.name} className="flex flex-col gap-1">
              <div className="flex justify-between text-sm">
                {item.name}
                <span className="text-muted-foreground tabular-nums">
                  {item.count}
                </span>
              </div>
              <div className="h-1 rounded-full bg-secondary">
                <div
                  className="h-full rounded-full bg-green-500"
                  style={{
                    width: `${(item.count / bestSellers[0].count) * 100}%`,
                  }}
                />
              </div>
            </div>
          ))}
        </div>
      </Widget>
      <Hint>Extra large shows best sellers, large hides them.</Hint>
    </div>
  )
}

import {
  BowlFoodIcon,
  CoffeeIcon,
  HamburgerIcon,
  IceCreamIcon,
  OrangeSliceIcon,
  PizzaIcon,
} from "@phosphor-icons/react"
import * as React from "react"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Widget, WidgetTitle } from "@/components/ui/widget"

const menu = [
  {
    name: "Meatballs",
    price: "₺280",
    icon: (
      <HamburgerIcon />
    ),
  },
  {
    name: "Pide",
    price: "₺220",
    icon: (
      <PizzaIcon />
    ),
  },
  {
    name: "Soup",
    price: "₺90",
    icon: (
      <BowlFoodIcon />
    ),
  },
  {
    name: "Coffee",
    price: "₺75",
    icon: (
      <CoffeeIcon />
    ),
  },
  {
    name: "Künefe",
    price: "₺160",
    icon: (
      <IceCreamIcon />
    ),
  },
  {
    name: "Lemonade",
    price: "₺70",
    icon: (
      <OrangeSliceIcon />
    ),
  },
  {
    name: "Ayran",
    price: "₺40",
    icon: (
      <CoffeeIcon />
    ),
  },
  {
    name: "Baklava",
    price: "₺180",
    icon: (
      <IceCreamIcon />
    ),
  },
]

function Hint({ children }: { children: React.ReactNode }) {
  return <p className="mt-6 text-xs text-muted-foreground">{children}</p>
}

function FreeResizeExample() {
  const ref = React.useRef<HTMLDivElement>(null)
  const [box, setBox] = React.useState({ width: 0, height: 0, columns: 0 })

  React.useEffect(() => {
    const widget = ref.current
    if (!widget) return
    const measure = () => {
      const grid = widget.querySelector<HTMLElement>("[data-menu-grid]")
      const columns = grid
        ? getComputedStyle(grid).gridTemplateColumns.split(" ").length
        : 0
      setBox({
        width: Math.round(widget.offsetWidth),
        height: Math.round(widget.offsetHeight),
        columns,
      })
    }
    measure()
    const observer = new ResizeObserver(measure)
    observer.observe(widget)
    return () => observer.disconnect()
  }, [])

  return (
    <div>
      <Widget
        ref={ref}
        resizable="free"
        defaultSize="large"
        className="gap-0 p-0"
      >
        <div className="flex items-baseline justify-between px-4 pt-4 pb-3">
          <WidgetTitle className="text-xl">Hestia POS</WidgetTitle>
          <span className="text-sm text-muted-foreground tabular-nums">
            {box.columns} columns
          </span>
        </div>
        <ScrollArea className="min-h-0 flex-1">
          <div
            data-menu-grid
            className="grid grid-cols-2 gap-2 px-4 pb-4 @[30rem]/widget:grid-cols-3 @[44rem]/widget:grid-cols-4"
          >
            {menu.map((item) => (
              <div
                key={item.name}
                className="flex flex-col gap-2 rounded-2xl bg-card p-3"
              >
                <span
                  aria-hidden="true"
                  className="text-amber-600 dark:text-amber-400 [&_svg]:size-6"
                >
                  {item.icon}
                </span>
                <div>
                  <p className="text-sm font-semibold">{item.name}</p>
                  <p className="text-sm text-muted-foreground tabular-nums">
                    {item.price}
                  </p>
                </div>
              </div>
            ))}
          </div>
        </ScrollArea>
      </Widget>
      <Hint>
        Free resize · {box.width} × {box.height}
      </Hint>
    </div>
  )
}

export default function WidgetFreeResize() {
  return <FreeResizeExample />
}

import { CashRegisterIcon } from "@phosphor-icons/react"
import {
  Widget,
  WidgetDescription,
  WidgetHeader,
  WidgetIcon,
  WidgetTitle,
} from "@/components/ui/widget"

export default function WidgetAutoResize() {
  return (
    <div className="h-60 w-full max-w-180">
      <Widget resizable defaultSize="auto">
        <WidgetHeader>
          <WidgetIcon>
            <CashRegisterIcon />
          </WidgetIcon>
          <WidgetTitle>Point of sale</WidgetTitle>
        </WidgetHeader>
        <WidgetDescription>
          Fills its parent. Drag to snap to a size, double-click to fill again.
        </WidgetDescription>
      </Widget>
    </div>
  )
}

import { CashRegisterIcon } from "@phosphor-icons/react"
import {
  Widget,
  WidgetDescription,
  WidgetHeader,
  WidgetIcon,
  WidgetTitle,
} from "@/components/ui/widget"

export default function WidgetCentered() {
  return (
    <Widget size="small" align="center">
      <WidgetHeader>
        <WidgetIcon size="lg">
          <CashRegisterIcon />
        </WidgetIcon>
        <WidgetTitle>Point of sale</WidgetTitle>
      </WidgetHeader>
      <WidgetDescription>3 open orders</WidgetDescription>
    </Widget>
  )
}

import {
  Widget,
  WidgetFooter,
  WidgetHeader,
  WidgetTitle,
} from "@/components/ui/widget"

const gridSpans = {
  small: "1 × 1",
  medium: "2 × 1",
  large: "2 × 2",
  "extra-large": "4 × 2",
}

export default function WidgetSizes() {
  return (
    <div className="flex flex-wrap items-start gap-4">
      {(["small", "medium", "large", "extra-large"] as const).map((size) => (
        <Widget key={size} size={size}>
          <WidgetHeader>
            <WidgetTitle className="capitalize">
              {size.replace("-", " ")}
            </WidgetTitle>
          </WidgetHeader>
          <WidgetFooter>{gridSpans[size]}</WidgetFooter>
        </Widget>
      ))}
    </div>
  )
}

import {
  CalendarBlankIcon,
  CashRegisterIcon,
  CookingPotIcon,
  SunIcon,
} from "@phosphor-icons/react"
import {
  Widget,
  WidgetContent,
  WidgetDescription,
  WidgetFooter,
  WidgetHeader,
  WidgetIcon,
  WidgetTitle,
  WidgetValue,
} from "@/components/ui/widget"

const tickets = [
  { id: "#1042", place: "Table 4", minutes: 18 },
  { id: "#1043", place: "Takeaway", minutes: 15 },
  { id: "#1044", place: "Table 12", minutes: 9 },
  { id: "#1045", place: "Pickup", minutes: 7 },
  { id: "#1046", place: "Garden 3", minutes: 5 },
  { id: "#1047", place: "Table 7", minutes: 3 },
  { id: "#1048", place: "Takeaway", minutes: 1 },
]

export default function WidgetDashboard() {
  return (
    <div className="grid max-w-4xl auto-rows-[10.5rem] grid-cols-2 gap-4 md:grid-cols-4">
      <Widget>
        <WidgetHeader>
          <WidgetIcon>
            <SunIcon className="fill-current" />
          </WidgetIcon>
          <WidgetTitle>Istanbul</WidgetTitle>
        </WidgetHeader>
        <WidgetValue>24°</WidgetValue>
        <WidgetFooter>Partly cloudy</WidgetFooter>
      </Widget>
      <Widget align="center">
        <WidgetHeader>
          <WidgetIcon size="lg">
            <CookingPotIcon />
          </WidgetIcon>
          <WidgetTitle>Kitchen display</WidgetTitle>
        </WidgetHeader>
        <WidgetDescription>5 tickets</WidgetDescription>
      </Widget>
      <Widget className="col-span-2">
        <WidgetHeader className="gap-1.5 text-amber-600 dark:text-amber-400">
          <WidgetIcon size="sm" className="text-amber-600 dark:text-amber-400">
            <CashRegisterIcon />
          </WidgetIcon>
          <WidgetTitle>Hestia</WidgetTitle>
        </WidgetHeader>
        <WidgetValue>₺18,240</WidgetValue>
        <WidgetFooter>Today's revenue · 42 orders</WidgetFooter>
      </Widget>
      <Widget className="col-span-2 row-span-2">
        <WidgetHeader className="gap-1.5 text-primary">
          <WidgetIcon size="sm" className="text-primary">
            <CalendarBlankIcon />
          </WidgetIcon>
          <WidgetTitle>Reservations</WidgetTitle>
        </WidgetHeader>
        <WidgetContent className="gap-2">
          {tickets.slice(0, 5).map((ticket, index) => (
            <div key={ticket.id} className="flex items-baseline gap-3 text-sm">
              <span className="w-11 shrink-0 text-muted-foreground tabular-nums">
                {`${18 + index}:00`}
              </span>
              <span className="truncate">{ticket.place}</span>
            </div>
          ))}
        </WidgetContent>
      </Widget>
      <Widget className="col-span-2 row-span-2" align="center">
        <WidgetHeader>
          <WidgetIcon size="lg">
            <CashRegisterIcon />
          </WidgetIcon>
          <WidgetTitle>Point of sale</WidgetTitle>
        </WidgetHeader>
        <WidgetDescription>3 open orders</WidgetDescription>
      </Widget>
    </div>
  )
}