iMac

import { IMac } from "@/components/ui/apple/imac"

export function IMacDemo() {
  return (
    <div className="flex items-center justify-center p-8">
      <IMac size="xl" color="blue">
        <iframe 
          src={"https://design-agency.designali.com/"} 
          className="block size-full border-0"
          loading="lazy"
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
          referrerPolicy="strict-origin-when-cross-origin"
        /> 
      </IMac>
    </div>
  );
}

"use client"

import { useState } from "react"
import { IMac } from "@/components/ui/apple/imac"

type IMacSize = "sm" | "md" | "lg" | "xl"

export function IMacDashboardDemo() {
  const [size, setSize] = useState<IMacSize>("md")

  const options: { value: IMacSize; label: string }[] = [
    { value: "sm", label: "Small" },
    { value: "md", label: "Medium" },
    { value: "lg", label: "Large" },
    { value: "xl", label: "Extra Large" },
  ]

  return (
    <div className="flex flex-col items-center justify-center gap-12 p-8">
      {/* Tabs / Radio Toggle */}
      <div className="flex items-center gap-1 rounded-lg bg-gray-100 p-1 dark:bg-zinc-800">
        {options.map((option) => (
          <button
            key={option.value}
            onClick={() => setSize(option.value)}
            className={`rounded-md px-4 py-2 text-sm font-medium transition-all duration-200 ${
              size === option.value
                ? "bg-white text-black shadow-sm dark:bg-zinc-950 dark:text-white"
                : "text-gray-500 hover:text-gray-900 dark:text-zinc-400 dark:hover:text-zinc-100"
            }`}
          >
            {option.label}
          </button>
        ))}
      </div>

      {/* Active IMac Display */}
      <div className="flex flex-col items-center">
        <IMac size={size}>
          <div className="flex h-full items-center justify-center">
            <span className="text-2xl font-semibold">
              {options.find((opt) => opt.value === size)?.label}
            </span>
          </div>
        </IMac>
      </div>
    </div>
  )
}

import { IMac } from "@/components/ui/apple/imac"

export function IMacWebsiteDemo() {
  return (
    <div className="flex h-[600px] w-full items-center justify-center">
      <IMac size="lg" color="blue">
      <video
          src="/vid/colorful-spheres.mp4"
          autoPlay
          loop
          muted
          playsInline
          className="h-full w-full object-cover"
        /> 
      </IMac>
    </div>
  );
}

"use client"

import { useState } from "react"
import { IMac } from "@/components/ui/apple/imac" 

const colors = [
  "blue",
  "green",
  "pink",
  "silver",
  "yellow",
  "orange",
  "purple",
] as const;

type IMacColor = typeof colors[number];

export function IMacColorsDemo() {
  const [activeColor, setActiveColor] = useState<IMacColor>("blue")

  return (
    <div className="flex flex-col items-center justify-center gap-12 p-8">
      {/* Tabs / Radio Toggle */}
      <div className="flex flex-wrap items-center justify-center gap-1 rounded-lg bg-gray-100 p-1 dark:bg-zinc-800">
        {colors.map((color) => (
          <button
            key={color}
            onClick={() => setActiveColor(color)}
            className={`capitalize rounded-md px-4 py-2 text-sm font-medium transition-all duration-200 ${
              activeColor === color
                ? "bg-white text-black shadow-sm dark:bg-zinc-950 dark:text-white"
                : "text-gray-500 hover:text-gray-900 dark:text-zinc-400 dark:hover:text-zinc-100"
            }`}
          >
            {color}
          </button>
        ))}
      </div>

      {/* Active IMac Display */}
      <div className="flex flex-col items-center">
        <IMac size="lg" color={activeColor}>
          <div className="flex h-full items-center justify-center bg-background">
            <p className="text-2xl font-medium capitalize">{activeColor} iMac</p>
          </div>
        </IMac>
      </div>
    </div>
  );
}

import { IMac } from "@/components/ui/apple/imac"

export function IMacSizesDemo() {
  return (
    <div className="flex flex-col items-center gap-12 p-8">
      <IMac size="lg" color="blue">
        <img
          src="/img/login-1.jpg"
          alt="App screen"
          className="h-full w-full object-cover"
        />
      </IMac>
    </div>
  );
}

import { IMac } from "@/components/ui/apple/imac"

export function IMacCustomFrameDemo() {
  return (
    <div className="flex items-center justify-center p-8">
      <IMac size="lg" color="blue">
        <img
          src="/img/hero-1.jpg"
          alt="App screen"
          className="h-full w-full object-cover"
        />
      </IMac>
    </div>
  );
}