ultisuite-client/components/gmail/quick-settings/settings-preview-icons.tsx

import { cn } from "@/lib/utils"

const previewFrameClass =
  "flex h-9 w-14 shrink-0 items-center justify-center rounded border border-[#dadce0] bg-white p-1 dark:border-[#5f6368] dark:bg-[#303134]"

const previewLineClass = "bg-[#dadce0] dark:bg-[#5f6368]"

const previewListPaneClass = "bg-[#f1f3f4] dark:bg-[#3c4043]"

const previewReadingPaneClass = "bg-[#e8f0fe] dark:bg-[#394457]"

function PreviewFrame({
  children,
  className,
}: {
  children: React.ReactNode
  className?: string
}) {
  return (
    <div className={cn(previewFrameClass, className)} aria-hidden>
      {children}
    </div>
  )
}

export function DensityDefaultIcon() {
  return (
    <PreviewFrame>
      <div className="flex w-full flex-col gap-0.5">
        <div className="flex items-center gap-0.5">
          <div className={cn("h-0.5 flex-1 rounded-full", previewLineClass)} />
          <div className="h-1.5 w-4 shrink-0 rounded-full bg-[#1a73e8]/70 dark:bg-[#8ab4f8]/70" />
        </div>
        <div className={cn("h-0.5 w-full rounded-full", previewLineClass)} />
        <div className={cn("h-0.5 w-3/4 rounded-full", previewLineClass)} />
      </div>
    </PreviewFrame>
  )
}

export function DensityNormalIcon() {
  return (
    <PreviewFrame>
      <div className="flex w-full flex-col gap-0.5">
        <div className="flex items-center gap-0.5">
          <div className={cn("h-0.5 flex-1 rounded-full", previewLineClass)} />
          <svg
            viewBox="0 0 8 8"
            className="h-2 w-2 shrink-0 text-[#5f6368] dark:text-[#9aa0a6]"
          >
            <path d="M2 1h4v1H5v4H4V2H2V1z" fill="currentColor" />
          </svg>
        </div>
        <div className={cn("h-0.5 w-full rounded-full", previewLineClass)} />
        <div className={cn("h-0.5 w-3/4 rounded-full", previewLineClass)} />
      </div>
    </PreviewFrame>
  )
}

export function DensityCompactIcon() {
  return (
    <PreviewFrame>
      <div className="flex w-full flex-col gap-px">
        <div className={cn("h-px w-full rounded-full", previewLineClass)} />
        <div className={cn("h-px w-full rounded-full", previewLineClass)} />
        <div className={cn("h-px w-full rounded-full", previewLineClass)} />
      </div>
    </PreviewFrame>
  )
}

export function InboxDefaultIcon() {
  return (
    <PreviewFrame>
      <div className="flex w-full flex-col gap-0.5">
        <div className={cn("h-0.5 w-full rounded-full", previewLineClass)} />
        <div className={cn("h-0.5 w-full rounded-full", previewLineClass)} />
        <div className={cn("h-0.5 w-4/5 rounded-full", previewLineClass)} />
      </div>
    </PreviewFrame>
  )
}

export function InboxImportantIcon() {
  return (
    <PreviewFrame>
      <div className="flex w-full flex-col gap-0.5">
        <div className="flex items-center gap-0.5">
          <div className={cn("h-0.5 flex-1 rounded-full", previewLineClass)} />
          <div className="h-1 w-1 shrink-0 rotate-45 bg-[#f4cc70]" />
        </div>
        <div className={cn("h-0.5 w-full rounded-full", previewLineClass)} />
        <div className={cn("h-0.5 w-3/4 rounded-full", previewLineClass)} />
      </div>
    </PreviewFrame>
  )
}

export function InboxUnreadIcon() {
  return (
    <PreviewFrame>
      <div className="flex w-full flex-col gap-0.5">
        <div className="flex items-center gap-0.5">
          <div className={cn("h-0.5 flex-1 rounded-full", previewLineClass)} />
          <div className="h-1.5 w-1.5 shrink-0 rounded-sm bg-[#1a73e8] dark:bg-[#8ab4f8]" />
        </div>
        <div className={cn("h-0.5 w-full rounded-full", previewLineClass)} />
        <div className={cn("h-0.5 w-3/4 rounded-full", previewLineClass)} />
      </div>
    </PreviewFrame>
  )
}

export function InboxStarredIcon() {
  return (
    <PreviewFrame>
      <div className="flex w-full flex-col gap-0.5">
        <div className="flex items-center gap-0.5">
          <div className={cn("h-0.5 flex-1 rounded-full", previewLineClass)} />
          <div className="h-1.5 w-1.5 shrink-0 text-[#f4cc70]">★</div>
        </div>
        <div className={cn("h-0.5 w-full rounded-full", previewLineClass)} />
        <div className={cn("h-0.5 w-3/4 rounded-full", previewLineClass)} />
      </div>
    </PreviewFrame>
  )
}

export function ReadingPaneNoneIcon() {
  return (
    <PreviewFrame>
      <div className="flex w-full flex-col gap-0.5">
        <div className={cn("h-0.5 w-full rounded-full", previewLineClass)} />
        <div className={cn("h-0.5 w-full rounded-full", previewLineClass)} />
        <div className={cn("h-0.5 w-full rounded-full", previewLineClass)} />
      </div>
    </PreviewFrame>
  )
}

export function ReadingPaneRightIcon() {
  return (
    <PreviewFrame className="p-0.5">
      <div className="flex h-full w-full gap-px">
        <div className={cn("flex flex-1 flex-col gap-px p-0.5", previewListPaneClass)}>
          <div className={cn("h-px w-full", previewLineClass)} />
          <div className={cn("h-px w-full", previewLineClass)} />
        </div>
        <div
          className={cn(
            "flex w-5 flex-col gap-px p-0.5",
            previewReadingPaneClass
          )}
        >
          <div className="h-0.5 w-full rounded-full bg-[#1a73e8]/40 dark:bg-[#8ab4f8]/50" />
          <div className={cn("h-px w-full", previewLineClass)} />
        </div>
      </div>
    </PreviewFrame>
  )
}

export function ReadingPaneBelowIcon() {
  return (
    <PreviewFrame className="p-0.5">
      <div className="flex h-full w-full flex-col gap-px">
        <div className={cn("flex flex-1 flex-col gap-px p-0.5", previewListPaneClass)}>
          <div className={cn("h-px w-full", previewLineClass)} />
          <div className={cn("h-px w-full", previewLineClass)} />
        </div>
        <div className={cn("h-3", previewReadingPaneClass)} />
      </div>
    </PreviewFrame>
  )
}

export function ThemeThumbnailIcon() {
  return (
    <PreviewFrame className="h-10 w-16 p-0.5">
      <div className="flex h-full w-full flex-col overflow-hidden rounded-sm border border-[#eceff1] dark:border-[#5f6368]">
        <div className={cn("h-1.5", previewListPaneClass)} />
        <div className="flex flex-1">
          <div className={cn("w-2", previewReadingPaneClass)} />
          <div className="flex-1 bg-white p-0.5 dark:bg-[#303134]">
            <div className={cn("h-px w-full", previewLineClass)} />
          </div>
        </div>
      </div>
    </PreviewFrame>
  )
}

function ThemeModePreviewFrame({
  children,
  className,
  ...props
}: {
  children: React.ReactNode
  className?: string
} & React.HTMLAttributes<HTMLDivElement>) {
  return (
    <div
      className={cn(
        "flex w-full flex-col overflow-hidden rounded-md border border-border",
        className
      )}
      style={{ backgroundColor: "#ffffff" }}
      aria-hidden
      {...props}
    >
      {children}
    </div>
  )
}

function MailChromePreview({
  headerBg,
  sidebarBg,
  listBg,
  contentBg,
  lineBg,
}: {
  headerBg: string
  sidebarBg: string
  listBg: string
  contentBg: string
  lineBg: string
}) {
  return (
    <>
      <div className="h-2 shrink-0" style={{ backgroundColor: headerBg }} />
      <div className="flex min-h-0 flex-1">
        <div className="w-[24%] shrink-0" style={{ backgroundColor: sidebarBg }} />
        <div
          className="flex min-w-0 flex-1 flex-col p-0.5"
          style={{ backgroundColor: listBg }}
        >
          <div className="h-px w-full" style={{ backgroundColor: lineBg }} />
          <div className="mt-0.5 h-px w-3/4" style={{ backgroundColor: lineBg }} />
          <div className="mt-0.5 h-px w-1/2" style={{ backgroundColor: lineBg }} />
        </div>
        <div className="w-[30%] shrink-0" style={{ backgroundColor: contentBg }} />
      </div>
    </>
  )
}

export function ThemeLightPreview({ className }: { className?: string }) {
  return (
    <ThemeModePreviewFrame
      className={cn("h-12", className)}
      data-mail-theme-preview="light"
    >
      <MailChromePreview
        headerBg="#ffffff"
        sidebarBg="#f1f3f4"
        listBg="#ffffff"
        contentBg="#e8f0fe"
        lineBg="#dadce0"
      />
    </ThemeModePreviewFrame>
  )
}

export function ThemeDarkPreview({ className }: { className?: string }) {
  return (
    <ThemeModePreviewFrame
      className={cn("h-12", className)}
      data-mail-theme-preview="dark"
      style={{ backgroundColor: "#202124" }}
    >
      <MailChromePreview
        headerBg="#202124"
        sidebarBg="#3c4043"
        listBg="#202124"
        contentBg="#394457"
        lineBg="#5f6368"
      />
    </ThemeModePreviewFrame>
  )
}

export function ThemeSystemPreview({ className }: { className?: string }) {
  return (
    <ThemeModePreviewFrame
      className={cn("h-12", className)}
      data-mail-theme-preview="system"
      style={{ backgroundColor: "#ffffff" }}
    >
      <div className="flex min-h-0 flex-1">
        <div className="flex w-1/2 min-w-0 flex-col">
          <div className="h-2 shrink-0" style={{ backgroundColor: "#ffffff" }} />
          <div className="flex min-h-0 flex-1">
            <div className="w-[24%] shrink-0" style={{ backgroundColor: "#f1f3f4" }} />
            <div
              className="flex min-w-0 flex-1 flex-col p-0.5"
              style={{ backgroundColor: "#ffffff" }}
            >
              <div className="h-px w-full" style={{ backgroundColor: "#dadce0" }} />
              <div className="mt-0.5 h-px w-3/4" style={{ backgroundColor: "#dadce0" }} />
            </div>
          </div>
        </div>
        <div className="flex w-1/2 min-w-0 flex-col">
          <div className="h-2 shrink-0" style={{ backgroundColor: "#202124" }} />
          <div className="flex min-h-0 flex-1">
            <div className="w-[24%] shrink-0" style={{ backgroundColor: "#3c4043" }} />
            <div
              className="flex min-w-0 flex-1 flex-col p-0.5"
              style={{ backgroundColor: "#202124" }}
            >
              <div className="h-px w-full" style={{ backgroundColor: "#5f6368" }} />
              <div className="mt-0.5 h-px w-3/4" style={{ backgroundColor: "#5f6368" }} />
            </div>
          </div>
        </div>
      </div>
    </ThemeModePreviewFrame>
  )
}

export function ThemeModePreview({
  mode,
  className,
}: {
  mode: "light" | "dark" | "system"
  className?: string
}) {
  if (mode === "light") return <ThemeLightPreview className={className} />
  if (mode === "dark") return <ThemeDarkPreview className={className} />
  return <ThemeSystemPreview className={className} />
}