vit-design-webapp

export const DEVICE_SPECS: Record<DeviceType, DeviceSpec> = {

  // iPhone Models

  'iphone-17-pro-max': {

    id: 'iphone-17-pro-max',

    name: 'iPhone 17 Pro Max',

    category: 'iphone',

    screenSize: { width: 430, height: 932 },

    frameSize: { width: 470, height: 1010 },

    screenOffset: { x: 20, y: 39 },

    cornerRadius: 55,

    colors: ['black', 'white', 'silver', 'gold'],

  },

  'iphone-16-pro-max': {

    id: 'iphone-16-pro-max',

    name: 'iPhone 16 Pro Max',

    category: 'iphone',

    screenSize: { width: 430, height: 932 },

    frameSize: { width: 470, height: 1010 },

    screenOffset: { x: 20, y: 39 },

    cornerRadius: 55,

    colors: ['black', 'white', 'silver', 'gold'],

  },

  'iphone-16-pro': {

    id: 'iphone-16-pro',

    name: 'iPhone 16 Pro',

    category: 'iphone',

    screenSize: { width: 393, height: 852 },

    frameSize: { width: 433, height: 930 },

    screenOffset: { x: 20, y: 39 },

    cornerRadius: 50,

    colors: ['black', 'white', 'silver', 'gold'],

  },

  'iphone-16': {

    id: 'iphone-16',

    name: 'iPhone 16',

    category: 'iphone',

    screenSize: { width: 390, height: 844 },

    frameSize: { width: 430, height: 922 },

    screenOffset: { x: 20, y: 39 },

    cornerRadius: 47,

    colors: ['black', 'white', 'blue', 'pink', 'green'],

  },

  'iphone-15-pro': {

    id: 'iphone-15-pro',

    name: 'iPhone 15 Pro',

    category: 'iphone',

    screenSize: { width: 393, height: 852 },

    frameSize: { width: 433, height: 930 },

    screenOffset: { x: 20, y: 39 },

    cornerRadius: 50,

    colors: ['black', 'white', 'silver', 'blue'],

  },

  'iphone-15': {

    id: 'iphone-15',

    name: 'iPhone 15',

    category: 'iphone',

    screenSize: { width: 390, height: 844 },

    frameSize: { width: 430, height: 922 },

    screenOffset: { x: 20, y: 39 },

    cornerRadius: 47,

    colors: ['black', 'white', 'blue', 'pink', 'green'],

  },

  'iphone-se': {

    id: 'iphone-se',

    name: 'iPhone SE',

    category: 'iphone',

    screenSize: { width: 375, height: 667 },

    frameSize: { width: 415, height: 745 },

    screenOffset: { x: 20, y: 39 },

    cornerRadius: 0,

    colors: ['black', 'white', 'silver'],

  },

  // iPad Models

  'ipad-pro-13': {

    id: 'ipad-pro-13',

    name: 'iPad Pro 13"',

    category: 'ipad',

    screenSize: { width: 1024, height: 1366 },

    frameSize: { width: 1084, height: 1450 },

    screenOffset: { x: 30, y: 42 },

    cornerRadius: 18,

    colors: ['black', 'silver'],

  },

  'ipad-air-11': {

    id: 'ipad-air-11',

    name: 'iPad Air 11"',

    category: 'ipad',

    screenSize: { width: 820, height: 1180 },

    frameSize: { width: 880, height: 1264 },

    screenOffset: { x: 30, y: 42 },

    cornerRadius: 18,

    colors: ['black', 'silver', 'blue', 'purple', 'pink'],

  },

  'ipad-mini': {

    id: 'ipad-mini',

    name: 'iPad mini',

    category: 'ipad',

    screenSize: { width: 744, height: 1133 },

    frameSize: { width: 804, height: 1217 },

    screenOffset: { x: 30, y: 42 },

    cornerRadius: 18,

    colors: ['black', 'silver', 'purple', 'pink'],

  },

  // Mac Models

  'macbook-pro-16': {

    id: 'macbook-pro-16',

    name: 'MacBook Pro 16"',

    category: 'mac',

    screenSize: { width: 1728, height: 1117 },

    frameSize: { width: 1920, height: 1280 },

    screenOffset: { x: 96, y: 48 },

    cornerRadius: 12,

    colors: ['black', 'silver'],

  },

  'macbook-air-15': {

    id: 'macbook-air-15',

    name: 'MacBook Air 15"',

    category: 'mac',

    screenSize: { width: 1470, height: 956 },

    frameSize: { width: 1620, height: 1080 },

    screenOffset: { x: 75, y: 40 },

    cornerRadius: 10,

    colors: ['black', 'silver', 'gold', 'blue'],

  },

  // Android Models

  'pixel-9-pro': {

    id: 'pixel-9-pro',

    name: 'Google Pixel 9 Pro',

    category: 'android',

    screenSize: { width: 412, height: 915 },

    frameSize: { width: 452, height: 993 },

    screenOffset: { x: 20, y: 39 },

    cornerRadius: 40,

    colors: ['black', 'white', 'pink', 'green'],

  },

  'galaxy-s24-ultra': {

    id: 'galaxy-s24-ultra',

    name: 'Samsung Galaxy S24 Ultra',

    category: 'android',

    screenSize: { width: 412, height: 915 },

    frameSize: { width: 452, height: 993 },

    screenOffset: { x: 20, y: 39 },

    cornerRadius: 32,

    colors: ['black', 'silver', 'purple', 'gold'],

  },

  // Watch Models

  'apple-watch-ultra': {

    id: 'apple-watch-ultra',

    name: 'Apple Watch Ultra',

    category: 'watch',

    screenSize: { width: 205, height: 251 },

    frameSize: { width: 270, height: 350 },

    screenOffset: { x: 32, y: 50 },

    cornerRadius: 40,

    colors: ['black', 'silver'],

  },

  'apple-watch-series-10': {

    id: 'apple-watch-series-10',

    name: 'Apple Watch Series 10',

    category: 'watch',

    screenSize: { width: 198, height: 242 },

    frameSize: { width: 250, height: 330 },

    screenOffset: { x: 26, y: 44 },

    cornerRadius: 36,

    colors: ['black', 'silver', 'gold', 'pink'],

  },

};

export const getDevicesByCategory = (category: DeviceSpec['category']) => {

  return Object.values(DEVICE_SPECS).filter((device) => device.category === category);

};

export const getAllDevices = () => Object.values(DEVICE_SPECS);

export const getDevice = (id: DeviceType) => DEVICE_SPECS[id];

// Device color hex values

export const DEVICE_COLORS: Record<string, string> = {

  black: '#1d1d1f',

  white: '#f5f5f7',

  silver: '#e3e4e5',

  gold: '#f4e8ce',

  blue: '#a1b8cc',

  purple: '#c8bfe7',

  pink: '#fae0e4',

  green: '#c5e0dc',

};