feat: initial

components/display/display.tsx

@@ -0,0 +1,74 @@
+import React, { ReactNode, useEffect, useRef, useState } from 'react'
+import withDefaults from '../utils/with-defaults'
+import useTheme from '../styles/use-theme'
+
+interface Props {
+  caption?: ReactNode | string
+  shadow?: boolean
+  className?: string
+}
+
+const defaultProps = {
+  caption: '',
+  shadow: false,
+  className: '',
+}
+
+export type DisplayProps = Props & typeof defaultProps & React.HTMLAttributes<any>
+
+const Display: React.FC<React.PropsWithChildren<DisplayProps>> = React.memo(({
+  children, caption, shadow, className, ...props
+}) => {
+  const theme = useTheme()
+  const containerRef = useRef<HTMLDivElement>(null)
+  const [minWidth, setMinWidth] = useState<string>('150px')
+  
+  useEffect(() => {
+    if (!containerRef.current) return
+    if (!containerRef.current.parentElement) return
+    setMinWidth(`${containerRef.current.parentElement.clientWidth * .85}px`)
+  }, [containerRef])
+
+  return (
+    <div ref={containerRef} className={`display ${className}`} {...props}>
+      <div className="content">{children}</div>
+      <div className="caption">{caption}</div>
+  
+      <style jsx>{`
+        .display {
+          display: block;
+          margin: 2.5rem auto;
+          max-width: 100%;
+        }
+        
+        .content {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          margin: 0 auto;
+          border-radius: 4px;
+          overflow: hidden;
+          width: fit-content;
+          box-shadow: ${shadow ? theme.expressiveness.shadowLarge : 'none'};
+        }
+        
+        .content :global(pre) {
+          margin: 0;
+          min-width: ${minWidth};
+          transition: min-width ease .2s;
+        }
+        
+        .caption {
+          font-size: .875rem;
+          line-height: 1.571em;
+          color: ${theme.palette.accents_5};
+          margin: ${shadow ? '2.5rem' : '1.3rem'} auto 0;
+          text-align: center;
+          max-width: 85%;
+        }
+      `}</style>
+    </div>
+  )
+})
+
+export default withDefaults(Display, defaultProps)

components/display/index.ts

@@ -0,0 +1,5 @@
+import Display from './display'
+import { DisplayProps } from './display'
+
+export type Props = DisplayProps
+export default Display