Studio Display

import { StudioDisplay } from "@/components/ui/apple/studio-display" 

export function IPhone01() {
  return (
    <div className="flex h-full w-full items-center justify-center">
       <StudioDisplay size="md">
       <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"
        /> 
       </StudioDisplay>
    </div>
  )
}

"use client"

import { useState } from "react"
import { StudioDisplay } from "@/components/ui/apple/studio-display"

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">
        <StudioDisplay 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>
        </StudioDisplay>
      </div>
    </div>
  )
}

"use client"

import { useState } from "react"

import { StudioDisplay } from "@/components/ui/apple/studio-display"

const variants = [
  {
    value: "studio-display",
    label: "Studio Display",
    colors: ["dark", "light"],
  },
  {
    value: "studio-display-xdr",
    label: "Studio Display XDR",
    colors: ["dark", "light"],
  },
] as const

type StudioDisplayVariant = (typeof variants)[number]["value"]
type StudioDisplayColor = (typeof variants)[number]["colors"][number]

export function StudioDisplayVariantDemo() {
  const [activeVariant, setActiveVariant] =
    useState<StudioDisplayVariant>("studio-display")

  const [activeColor, setActiveColor] =
    useState<StudioDisplayColor>("dark")

  const currentVariant = variants.find(
    (variant) => variant.value === activeVariant
  )!

  const handleVariantChange = (variant: StudioDisplayVariant) => {
    setActiveVariant(variant)
    setActiveColor("dark")
  }

  return (
    <div className="flex flex-col items-center justify-center gap-8 p-8">
      {/* Variant Tabs */}
      <div className="flex flex-wrap items-center justify-center gap-1 rounded-lg bg-gray-100 p-1 dark:bg-zinc-800">
        {variants.map((variant) => (
          <button
            key={variant.value}
            onClick={() => handleVariantChange(variant.value)}
            className={`rounded-md px-4 py-2 text-sm font-medium transition-all duration-200 ${
              activeVariant === variant.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"
            }`}
          >
            {variant.label}
          </button>
        ))}
      </div>

      {/* Color Tabs */}
      <div className="flex items-center justify-center gap-1 rounded-lg bg-gray-100 p-1 dark:bg-zinc-800">
        {currentVariant.colors.map((color) => (
          <button
            key={color}
            onClick={() => setActiveColor(color)}
            className={`rounded-md px-4 py-2 text-sm font-medium capitalize 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 Studio Display */}
      <div className="flex flex-col items-center">
        <StudioDisplay
          size="lg"
          variant={activeVariant}
          color={activeColor}
        >
          <div className="flex h-full items-center justify-center bg-background">
            <p className="text-2xl font-medium">
              {currentVariant.label}
            </p>
          </div>
        </StudioDisplay>
      </div>
    </div>
  )
}

import { StudioDisplay } from "@/components/ui/apple/studio-display" 

export function IPhone01() {
  return (
    <div className="flex h-full w-full items-center justify-center">
       <StudioDisplay size="md">
       <img
          src="/img/login-1.jpg"
          alt="App screen"
          className="h-full w-full object-cover"
        />
       </StudioDisplay>
    </div>
  )
}

import { StudioDisplay } from "@/components/ui/apple/studio-display" 

export function IPhone01() {
  return (
    <div className="flex h-full w-full items-center justify-center">
       <StudioDisplay size="md">
       <img
          src="/img/hero-1.jpg"
          alt="App screen"
          className="h-full w-full object-cover"
        />
       </StudioDisplay>
    </div>
  )
}