Merge pull request #49 from 46ki75/feature/cube

Feature/cube

src/components/fallback/FullscreenFallback.tsx

@@ -1,12 +1,11 @@
 import React from 'react'
 
-import { DotLoadingIcon } from '../icon/DotLoadingIcon'
-
 import { RectangleWave } from './RectangleWave'
 
 import isEqual from 'react-fast-compare'
 
 import styles from './FullscreenFallback.module.scss'
+import { Cube } from '../icon/Cube'
 
 // # --------------------------------------------------------------------------------
 //
@@ -45,7 +44,7 @@ const FullscreenFallbackComponent = ({
       }}
     >
       <RectangleWave color='rgba(128,128,128,0.8)' />
-      <DotLoadingIcon size={64} color='rgba(128,128,128,0.8)' />
+      <Cube size={64} isDark={isDark} />
     </div>
   )
 }

src/components/icon/Cube.module.scss

@@ -0,0 +1,31 @@
+.cube {
+  position: relative;
+  transform-style: preserve-3d;
+  transform: rotateX(-30deg) rotateY(-45deg);
+  animation: rotate 1500ms infinite linear;
+}
+
+.face {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 2px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-weight: bold;
+  color: gray;
+  backface-visibility: hidden;
+  user-select: none;
+}
+
+@keyframes rotate {
+  from {
+    transform: rotateX(-30deg) rotateY(-45deg) rotateZ(0deg);
+  }
+  to {
+    transform: rotateX(-30deg) rotateY(315deg) rotateZ(360deg);
+  }
+}

src/components/icon/Cube.stories.tsx

@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Cube } from './Cube'
+
+const meta: Meta<typeof Cube> = {
+  title: 'Components/Icon/Cube',
+  component: Cube,
+  tags: ['autodocs']
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Primary: Story = {
+  args: { style: {} }
+}

src/components/icon/Cube.tsx

@@ -0,0 +1,72 @@
+import React from 'react'
+import isEqual from 'react-fast-compare'
+
+import styles from './Cube.module.scss'
+
+// # --------------------------------------------------------------------------------
+//
+// props
+//
+// # --------------------------------------------------------------------------------
+
+export interface CubeProps {
+  style?: React.CSSProperties
+  size?: number
+
+  /**
+   * Whether or not to use the dark theme
+   */
+  isDark?: boolean
+}
+
+// # --------------------------------------------------------------------------------
+//
+// component
+//
+// # --------------------------------------------------------------------------------
+
+const CubeComponent = ({ style, size = 128, isDark = false }: CubeProps) => {
+  const commonTranslateZ = `translateZ(${size / 2}px)`
+
+  const faces = [
+    { name: 'front', rotate: '' },
+    { name: 'back', rotate: 'rotateY(180deg)' },
+    { name: 'left', rotate: 'rotateY(-90deg)' },
+    { name: 'right', rotate: 'rotateY(90deg)' },
+    { name: 'top', rotate: 'rotateX(90deg)' },
+    { name: 'bottom', rotate: 'rotateX(-90deg)' }
+  ]
+
+  return (
+    <div
+      className={styles.cube}
+      style={{
+        width: `${size}px`,
+        height: `${size}px`,
+        ...style
+      }}
+    >
+      {faces.map((face) => (
+        <div
+          key={face.name}
+          className={styles.face}
+          style={{
+            transform: `${face.rotate} ${commonTranslateZ}`,
+            backgroundColor: isDark
+              ? 'rgba(0,0,0,0.2)'
+              : 'rgba(255,255,255,0.2)',
+            borderColor: !isDark ? 'rgba(0,0,0,0.8)' : 'rgba(255,255,255,0.8)'
+          }}
+        ></div>
+      ))}
+    </div>
+  )
+}
+
+// # --------------------------------------------------------------------------------
+//
+// memoize
+//
+// # --------------------------------------------------------------------------------
+
+export const Cube = React.memo(CubeComponent, isEqual)