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>
  )
}