made simple full-width image container

src/components/node/NodeImageTinySlider/index.tsx

@@ -1,8 +1,45 @@
-import React, { FC } from 'react';
+import React, { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import styles from './styles.module.scss';
 
 interface IProps {}
 
-const NodeImageTinySlider: FC<IProps> = () => <div className={styles.wrap}>Slider :3</div>;
+const NodeImageTinySlider: FC<IProps> = () => {
+  const sample = useRef<HTMLDivElement>(null);
+  const [clientWidth, setClientWidth] = useState(document.documentElement.clientWidth);
+
+  const style = useMemo(() => {
+    if (!sample.current) return { display: 'none' };
+
+    const { width } = sample.current.getBoundingClientRect();
+    const { clientWidth } = document.documentElement;
+
+    return {
+      // width: clientWidth,
+      // transform: `translate(-${(clientWidth - width) / 2}px, 0)`,
+    };
+  }, [sample.current, clientWidth]);
+
+  const onResize = useCallback(() => setClientWidth(document.documentElement.clientWidth), []);
+
+  useEffect(() => {
+    window.addEventListener('resize', onResize);
+    document.body.addEventListener('overflow', onResize);
+    document.body.addEventListener('overflowchanged', console.log);
+
+    document.body.addEventListener('resize', console.log);
+
+    return () => {
+      window.removeEventListener('resize', onResize);
+      window.removeEventListener('overflow', onResize);
+    };
+  }, []);
+
+  return (
+    <div className={styles.wrap}>
+      <div className={styles.slider} style={style} />
+      <div className={styles.sample} ref={sample} />
+    </div>
+  );
+};
 
 export { NodeImageTinySlider };

src/components/node/NodeImageTinySlider/styles.module.scss

@@ -1,11 +1,22 @@
 .wrap {
-  //padding-bottom: $radius;
-  background-color: $red;
+  background: $red;
+}
 
+.sample {
+  width: 100%;
+  display: block;
+  height: 24px;
+  background: green;
+}
+
+.slider {
+  background: blue;
+  height: 20px;
   width: 100vw;
   position: relative;
   left: 50%;
   right: 50%;
   margin-left: -50vw;
   margin-right: -50vw;
+  box-sizing: border-box;
 }

src/styles/global.scss

@@ -2,6 +2,8 @@
 
 html {
   min-height: 100vh;
+  box-sizing: border-box;
+  overflow: auto;
 }
 
 body {