Commit 42de67f8 authored by Truong Le's avatar Truong Le
Browse files

feat(wavy-line): add component and story

parent a2bef5ab
Pipeline #2448 passed with stages
in 42 seconds
......@@ -117,4 +117,21 @@
.lightbox .slick-slide>div {
@apply h-full;
}
#wave {
stroke-dasharray: 0 16 880 16;
animation: moveTheWave 16000ms linear infinite;
}
@keyframes moveTheWave {
0% {
stroke-dashoffset: 0;
transform: translate3d(0, 0, 0);
}
100% {
stroke-dashoffset: -922;
transform: translate3d(-612px, 0, 0);
}
}
}
\ No newline at end of file
import React, { useEffect, useRef } from "react";
interface Props {
color: string;
speed: number;
}
const WavyLine: React.FC<Props> = ({ color, speed }) => {
const containerRef = useRef<HTMLDivElement>(null);
const pathRef = useRef<SVGPathElement>(null);
// eslint-disable-next-line @typescript-eslint/no-loss-of-precision
const m = 0.512286623256592433;
const buildWave = (w: number, h: number, blocks: number) => {
const a = h / 4;
const y = h / 2;
const down = ["s", -(1 - a) * m, a, a, a];
const up = ["s", -(1 - a) * m, -a, a, -a];
const extendedPath = [...Array(blocks + 50).keys()]
.map((i) => {
return (i + 1) % 2 === 0 ? up : down;
})
.flat();
const pathData = [
"M",
w * 0,
y + a / 2,
"c",
a * m,
0,
-(1 - a) * m,
-a,
a,
-a,
...extendedPath,
].join(" ");
if (pathRef.current) {
pathRef.current.setAttribute("d", pathData);
}
};
useEffect(() => {
if (containerRef.current) {
const containerWidth = containerRef.current.offsetWidth;
const waveBlockAmount = Math.ceil(containerWidth / 15);
buildWave(90, 60, waveBlockAmount);
}
}, []);
return (
<div ref={containerRef} className="w-full">
<svg
xmlns="http://www.w3.org/2000/svg"
className="w-full h-16 overflow-hidden my-0 mx-auto"
>
<path
ref={pathRef}
id="wave"
fill="none"
stroke="#262626"
strokeWidth="4"
strokeLinecap="round"
></path>
</svg>
</div>
);
};
export default WavyLine;
import * as React from "react";
import WavyLine from "@components/WavyLine";
export const WavyLineStory = () => (
<div className="container">
<div className="w-1/2">
<WavyLine color="red" speed={1} />
</div>
</div>
);
export default {
title: "Molecules",
};
WavyLineStory.storyName = "Wavy Line";
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment