junhoyeo · junhoyeo · Dec 26, 2022 · Dec 26, 2022 · Dec 26, 2022 · Dec 26, 2022
diff --git a/iphone/src/phone/Device.tsx b/iphone/src/phone/Device.tsx
@@ -7,7 +7,7 @@ import { DynamicIslandMusicPlayer } from '../../dynamic-island/src/MusicPlayer';
 import { DynamicIslandPhoneCall } from '../../dynamic-island/src/PhoneCall';
 import { shadow } from '../utils/shadow';
 import { Pagination } from './Pagination';
-import { Symbols } from './Symbols';
+import { AppBarBrightness, Symbols } from './Symbols';
 import { DEVICE_HEIGHT, DEVICE_WIDTH } from './constants';
 import classes from './device.module.scss';
 import { APP_ICON_SIZE } from './icons/AppIcon';
@@ -19,23 +19,27 @@ const SCREEN_CONTENT_WIDTH = Math.floor(APP_CELL_SIZE * 4);
 
 export type DeviceFrameColor = 'purple' | 'silver' | 'black' | 'gold';
 export type BasicDeviceProps = {
+  appBarBrightness: AppBarBrightness;
   frameColor: DeviceFrameColor;
   apps: GridItemProps[];
   dock: GridItemProps[];
   backgroundImage?: string;
   dynamicIslandProps: Omit<DynamicIslandProps, 'children'>;
+  children?: React.ReactNode;
 };
 type DeviceProps = BasicDeviceProps & {
   style?: React.CSSProperties;
 };
 
 export const Device: React.FC<DeviceProps> = ({
+  appBarBrightness = 'light',
   style,
   frameColor,
   apps,
   dock,
   backgroundImage,
   dynamicIslandProps,
+  children,
 }) => {
   const deviceFrameColorClass =
     frameColor === 'purple' ? undefined : `device-${frameColor}`;
@@ -67,7 +71,12 @@ export const Device: React.FC<DeviceProps> = ({
               className={classes.topContainer}
               style={{ width: SCREEN_CONTENT_WIDTH - APP_CELL_GAP }}
             >
-              <span className={`${classes.clock} font-sans`}>
+              <span
+                className={`${classes.clock} font-sans`}
+                style={{
+                  color: appBarBrightness === 'light' ? 'black' : 'undefined',
+                }}
+              >
                 {currentTime}
               </span>
 
@@ -84,45 +93,55 @@ export const Device: React.FC<DeviceProps> = ({
                 </DynamicIsland>
               </div>
 
-              <Symbols style={{ marginRight: -APP_CELL_GAP / 4 }} />
-            </div>
-            <div
-              className={classes.gridWrapper}
-              style={{ marginTop: DEVICE_HEIGHT * 0.0875 }}
-            >
-              <div
-                className={classes.gridContainer}
-                style={{
-                  width: SCREEN_CONTENT_WIDTH,
-                  gridTemplateColumns: `repeat(auto-fill, ${APP_CELL_SIZE}px)`,
-                  gridTemplateRows: `repeat(auto-fill, ${
-                    DEVICE_WIDTH * (0.016 + 0.15) +
-                    DEVICE_WIDTH * (0.12 * 0.695)
-                  }px)`,
-                }}
-              >
-                {apps.map((appItem, appIndex) => (
-                  <GridItem key={appIndex} {...appItem} />
-                ))}
-              </div>
-            </div>
-            <div className={classes.bottomWrapper}>
-              <Pagination />
-              <div
-                className={classes.bottomContainer}
-                style={{
-                  height: DEVICE_HEIGHT * 0.11,
-                  padding: `${0.045 * DEVICE_WIDTH}px ${
-                    0.047 * DEVICE_WIDTH
-                  }px`,
-                  backgroundImage: `url(${backgroundImage})`,
-                }}
-              >
-                {dock.slice(0, 4).map((appItem, appIndex) => (
-                  <GridItem dock key={appIndex} {...appItem} />
-                ))}
-              </div>
+              <Symbols
+                appBarBrightness={appBarBrightness}
+                style={{ marginRight: -APP_CELL_GAP / 4 }}
+              />
             </div>
+
+            {!children ? (
+              <>
+                <div
+                  className={classes.gridWrapper}
+                  style={{ marginTop: DEVICE_HEIGHT * 0.0875 }}
+                >
+                  <div
+                    className={classes.gridContainer}
+                    style={{
+                      width: SCREEN_CONTENT_WIDTH,
+                      gridTemplateColumns: `repeat(auto-fill, ${APP_CELL_SIZE}px)`,
+                      gridTemplateRows: `repeat(auto-fill, ${
+                        DEVICE_WIDTH * (0.016 + 0.15) +
+                        DEVICE_WIDTH * (0.12 * 0.695)
+                      }px)`,
+                    }}
+                  >
+                    {apps.map((appItem, appIndex) => (
+                      <GridItem key={appIndex} {...appItem} />
+                    ))}
+                  </div>
+                </div>
+                <div className={classes.bottomWrapper}>
+                  <Pagination />
+                  <div
+                    className={classes.bottomContainer}
+                    style={{
+                      height: DEVICE_HEIGHT * 0.11,
+                      padding: `${0.045 * DEVICE_WIDTH}px ${
+                        0.047 * DEVICE_WIDTH
+                      }px`,
+                      backgroundImage: `url(${backgroundImage})`,
+                    }}
+                  >
+                    {dock.slice(0, 4).map((appItem, appIndex) => (
+                      <GridItem dock key={appIndex} {...appItem} />
+                    ))}
+                  </div>
+                </div>
+              </>
+            ) : (
+              children
+            )}
           </div>
         </div>
         <div className="device-stripe"></div>

diff --git a/iphone/src/phone/Phone.tsx b/iphone/src/phone/Phone.tsx
@@ -0,0 +1,33 @@
+import { DivComponent } from '../types/html';
+import { BasicDeviceProps, Device } from './Device';
+
+export type PhoneProps = BasicDeviceProps & {
+  transformScale: number;
+};
+
+export const Phone: React.FC<PhoneProps> = ({
+  transformScale,
+  ...deviceProps
+}) => {
+  return (
+    <Wrapper>
+      <Device
+        style={{
+          transform: `scale(${transformScale})`,
+          transformOrigin: 'top center',
+        }}
+        {...deviceProps}
+      />
+    </Wrapper>
+  );
+};
+
+const Wrapper: DivComponent = ({ style, ...props }) => (
+  <div
+    {...props}
+    style={{
+      display: 'flex',
+      justifyContent: 'center',
+    }}
+  />
+);
diff --git a/iphone/src/phone/Symbols.tsx b/iphone/src/phone/Symbols.tsx
@@ -3,9 +3,22 @@ import React from 'react';
 import { DivComponent } from '../types/html';
 import classes from './symbols.module.scss';
 
-export const Symbols: DivComponent = (props) => {
+export type AppBarBrightness = 'light' | 'dark';
+
+export type SymbolsProps = {
+  appBarBrightness: AppBarBrightness;
+};
+export const Symbols: DivComponent<SymbolsProps> = ({
+  appBarBrightness,
+  ...props
+}) => {
   return (
-    <div className={classes.wrapper} {...props}>
+    <div
+      className={`${classes.wrapper} ${
+        appBarBrightness === 'light' ? classes.light : classes.dark
+      }`}
+      {...props}
+    >
       <div className={classes.container}>
         <div className={classes.cellularList}>
           <div className={`${classes.cellularItem} ${classes.cellularOne}`} />

diff --git a/iphone/src/phone/index.tsx b/iphone/src/phone/index.tsx
@@ -1,33 +1 @@
-import { DivComponent } from '../types/html';
-import { BasicDeviceProps, Device } from './Device';
-
-export type PhoneProps = BasicDeviceProps & {
-  transformScale: number;
-};
-
-export const Phone: React.FC<PhoneProps> = ({
-  transformScale,
-  ...deviceProps
-}) => {
-  return (
-    <Wrapper>
-      <Device
-        style={{
-          transform: `scale(${transformScale})`,
-          transformOrigin: 'top center',
-        }}
-        {...deviceProps}
-      />
-    </Wrapper>
-  );
-};
-
-const Wrapper: DivComponent = ({ style, ...props }) => (
-  <div
-    {...props}
-    style={{
-      display: 'flex',
-      justifyContent: 'center',
-    }}
-  />
-);
+export { Phone, type PhoneProps } from './Phone';
diff --git a/iphone/src/phone/symbols.module.scss b/iphone/src/phone/symbols.module.scss
@@ -2,6 +2,14 @@
   width: fit-content;
   display: flex;
 }
+.dark {
+  --system-color: white;
+  --system-opacity: rgba(255, 255, 255, 0.66);
+}
+.light {
+  --system-color: black;
+  --system-opacity: rgba(0, 0, 0, 0.66);
+}
 
 .container {
   display: flex;
@@ -17,7 +25,7 @@
 }
 
 .cellularItem {
-  background-color: white;
+  background-color: var(--system-color);
   width: 4px;
   margin-right: 2.5px;
   border-top-left-radius: 1px;
@@ -48,7 +56,7 @@
   padding: 3px;
   border: 3px solid transparent;
   border-radius: 30px;
-  border-top-color: white;
+  border-top-color: var(--system-color);
 }
 
 .batteryWrapper {
@@ -58,21 +66,21 @@
 }
 
 .batteryContainer {
-  border: 1px solid rgba(255, 255, 255, 0.66);
+  border: 1px solid var(--system-opacity);
   width: 34px;
   padding: 2px;
   border-radius: 6px;
 }
 
 .battery {
-  background-color: white;
+  background-color: var(--system-color);
   width: 40%;
   height: 12px;
   border-radius: 4px;
 }
 
 .batteryElectrode {
-  background-color: rgba(255, 255, 255, 0.66);
+  background-color: var(--system-opacity);
   height: 7px;
   width: 2px;
   margin-left: 2px;

diff --git a/iphone/src/styles/devices.css b/iphone/src/styles/devices.css
@@ -48,6 +48,7 @@
   position: absolute;
   width: 100%;
   z-index: 9;
+  pointer-events: none;
 }
 
 .device-iphone-14-pro .device-stripe::after {

diff --git a/iphone/src/types/html.ts b/iphone/src/types/html.ts
@@ -1,7 +1,9 @@
 export type UListComponent = React.FC<React.HTMLAttributes<HTMLUListElement>>;
 export type LIComponent = React.FC<React.HTMLAttributes<HTMLLIElement>>;
 
-export type DivComponent = React.FC<React.HTMLAttributes<HTMLDivElement>>;
+export type DivComponent<T = {}> = React.FC<
+  React.HTMLAttributes<HTMLDivElement> & T
+>;
 export type HeadingComponent = React.FC<
   React.HTMLAttributes<HTMLHeadingElement>
 >;

diff --git a/playground/next.config.js b/playground/next.config.js
@@ -10,6 +10,9 @@ module.exports = withPlugins(
     compiler: {
       styledComponents: true,
     },
+    experimental: {
+      transpilePackages: ['antd-mobile'],
+    },
     images: {
       dangerouslyAllowSVG: true,
       domains: ['github.com', 'cho.sh', 'cataas.com', 'mzstatic.com'],

diff --git a/playground/package.json b/playground/package.json
@@ -11,6 +11,8 @@
   },
   "dependencies": {
     "@blazity/next-image-proxy": "^1.0.2",
+    "antd-mobile": "^5.27.0",
+    "antd-mobile-icons": "^0.3.0",
     "next": "^13.0.6",
     "react": "18.2.0",
     "react-dom": "18.2.0",

diff --git a/playground/src/components/GlobalStyle.tsx b/playground/src/components/GlobalStyle.tsx
@@ -13,6 +13,12 @@ export const GlobalStyle = createGlobalStyle`
     background-color: black;
   }
 
+  body {
+    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC,
+    Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial,
+    sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+  }
+
   a {
     text-decoration: none;
     cursor: pointer;