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,
}: {
  children: React.ReactNode
  className?: string
}) {
  return (
    <div
      className={cn(
        "flex w-full flex-col overflow-hidden rounded-md border border-border",
        className
      )}
      aria-hidden
    >
      {children}
    </div>
  )
}

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

export function ThemeLightPreview({ className }: { className?: string }) {
  return (
    <ThemeModePreviewFrame className={cn("h-12", className)}>
      <MailChromePreview
        headerBg="bg-white"
        sidebarBg="bg-[#f1f3f4]"
        listBg="bg-white"
        contentBg="bg-[#e8f0fe]"
        lineBg="bg-[#dadce0]"
      />
    </ThemeModePreviewFrame>
  )
}

export function ThemeDarkPreview({ className }: { className?: string }) {
  return (
    <ThemeModePreviewFrame className={cn("h-12", className)}>
      <MailChromePreview
        headerBg="bg-[#202124]"
        sidebarBg="bg-[#3c4043]"
        listBg="bg-[#202124]"
        contentBg="bg-[#394457]"
        lineBg="bg-[#5f6368]"
      />
    </ThemeModePreviewFrame>
  )
}

export function ThemeSystemPreview({ className }: { className?: string }) {
  return (
    <ThemeModePreviewFrame className={cn("h-12", className)}>
      <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 bg-white" />
          <div className="flex min-h-0 flex-1">
            <div className="w-[24%] shrink-0 bg-[#f1f3f4]" />
            <div className="flex min-w-0 flex-1 flex-col bg-white p-0.5">
              <div className="h-px w-full bg-[#dadce0]" />
              <div className="mt-0.5 h-px w-3/4 bg-[#dadce0]" />
            </div>
          </div>
        </div>
        <div className="flex w-1/2 min-w-0 flex-col">
          <div className="h-2 shrink-0 bg-[#202124]" />
          <div className="flex min-h-0 flex-1">
            <div className="w-[24%] shrink-0 bg-[#3c4043]" />
            <div className="flex min-w-0 flex-1 flex-col bg-[#202124] p-0.5">
              <div className="h-px w-full bg-[#5f6368]" />
              <div className="mt-0.5 h-px w-3/4 bg-[#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} />
}