const iPhone12ProSvg2 = ``
const iPhone12ProMaxSvg2 = ``
const iphone14ProSvg2 = ``
const iphone14ProMaxSvg2 = ``
// old svg frames
// const iPhone12ProSvg = ""
// const iPhone12ProMaxSvg = ""
// const iphone14ProSvg = ""
// const iphone14ProMaxSvg = ""
const screenResolutions = {
iPhone12Pro: {
margin: '18px 0 0 21px',
screen: {
width: 391,
height: 845,
},
shell: {
width: 438,
height: 883,
},
},
iPhone12ProMax: {
margin: '18px 0 0 21px',
screen: {
width: 429,
height: 927,
},
shell: {
width: 476,
height: 965,
},
},
iPhone14Pro: {
margin: '21px 0 0 23px',
screen: {
width: 394,
height: 853,
},
shell: {
width: 436,
height: 891,
},
},
iPhone14ProMax: {
margin: '21px 0 0 23px',
screen: {
width: 431,
height: 933,
},
shell: {
width: 473,
height: 971,
},
},
};
/**
* @param modelName - device.safeDescription from DeviceKit
* @returns - returns a phone shell svg and styles for inner screen dimensions
* plus margins from shell
* _______
* currently mapped: 12, 12pro, map, 13, 13pro, max, 14, 14 pro, 14 max/plus
*
* everything else is considered as 12 pro
* */
export function mapIphoneModel(modelName: string) {
const iPhone12Pro = [
"iPhone 12",
"iPhone 12 Pro",
"iPhone 13",
"iPhone 13 Pro",
"iPhone 14"
];
const iPhone12ProMax = [
"iPhone 12 Pro Max",
"iPhone 13 Pro Max",
"iPhone 14 Plus"
];
const iPhone14Pro = [
"iPhone 14 Pro"
];
const iPhone14ProMax = [
"iPhone 14 Pro Max"
];
if (iPhone12Pro.includes(modelName)) {
return { svg: iPhone12ProSvg2, styles: screenResolutions.iPhone12Pro } as const;
} else if (iPhone12ProMax.includes(modelName)) {
return { svg: iPhone12ProMaxSvg2, styles: screenResolutions.iPhone12ProMax } as const;
} else if (iPhone14Pro.includes(modelName)) {
return { svg: iphone14ProSvg2, styles: screenResolutions.iPhone14Pro } as const;
} else if (iPhone14ProMax.includes(modelName)) {
return { svg: iphone14ProMaxSvg2, styles: screenResolutions.iPhone14ProMax } as const;
} else {
return { svg: iPhone12ProSvg2, styles: screenResolutions.iPhone12Pro} as const; // Default fallback
}
}