feat: org sidebar first version

frontend/src/components/v2/Lottie/Lottie.tsx

@@ -0,0 +1,32 @@
+import { ReactNode, useRef } from "react";
+import { DotLottie, DotLottieReact, Mode } from "@lottiefiles/dotlottie-react";
+
+export type LottieProps = {
+  // Kudos to https://itnext.io/react-polymorphic-components-with-typescript-f7ce72ea7af2
+  children?: ReactNode;
+  icon?: string;
+  iconMode?: Mode;
+  className?: string;
+};
+
+export const Lottie = ({ children, icon, iconMode, ...props }: LottieProps): JSX.Element => {
+  const iconRef = useRef<DotLottie | null>(null);
+  return (
+    <div
+      onMouseEnter={() => iconRef.current?.play()}
+      onMouseLeave={() => iconRef.current?.stop()}
+      {...props}
+    >
+      <DotLottieReact
+        dotLottieRefCallback={(el) => {
+          iconRef.current = el;
+        }}
+        mode={iconMode}
+        src={`/lotties/${icon}.json`}
+        loop
+        className="h-full w-full"
+      />
+      {children}
+    </div>
+  );
+};

frontend/src/components/v2/Lottie/index.tsx

@@ -0,0 +1 @@
+export { Lottie } from "./Lottie";

frontend/src/components/v2/index.tsx

@@ -22,6 +22,7 @@ export * from "./GenericFieldLabel";
 export * from "./HoverCardv2";
 export * from "./IconButton";
 export * from "./Input";
+export * from "./Lottie";
 export * from "./Menu";
 export * from "./Modal";
 export * from "./NoticeBanner";