extract sidebar component

src/app/components/emoji-board/EmojiBoard.css.tsx

@@ -13,32 +13,12 @@ export const Base = style({
   overflow: 'hidden',
 });
 
-export const Sidebar = style({
-  width: toRem(54),
-  backgroundColor: color.Surface.Container,
-  color: color.Surface.OnContainer,
-  position: 'relative',
-});
-
-export const SidebarContent = style({
-  padding: `${config.space.S200} 0`,
-});
-
-export const SidebarStack = style({
-  width: '100%',
-  backgroundColor: color.Surface.Container,
-});
-
 export const NativeEmojiSidebarStack = style({
   position: 'sticky',
   bottom: '-67%',
   zIndex: 1,
 });
 
-export const SidebarDivider = style({
-  width: toRem(18),
-});
-
 export const Header = style({
   padding: config.space.S300,
   paddingBottom: 0,

src/app/components/emoji-board/components/Sidebar.tsx

@@ -0,0 +1,72 @@
+import React, { ReactNode } from 'react';
+import { Box, Scroll, Line, as, TooltipProvider, Tooltip, Text, IconButton } from 'folds';
+import classNames from 'classnames';
+import * as css from './styles.css';
+
+export function Sidebar({ children }: { children: ReactNode }) {
+  return (
+    <Box className={css.Sidebar} shrink="No">
+      <Scroll size="0">
+        <Box className={css.SidebarContent} direction="Column" alignItems="Center" gap="100">
+          {children}
+        </Box>
+      </Scroll>
+    </Box>
+  );
+}
+
+export const SidebarStack = as<'div'>(({ className, children, ...props }, ref) => (
+  <Box
+    className={classNames(css.SidebarStack, className)}
+    direction="Column"
+    alignItems="Center"
+    gap="100"
+    {...props}
+    ref={ref}
+  >
+    {children}
+  </Box>
+));
+export function SidebarDivider() {
+  return <Line className={css.SidebarDivider} size="300" variant="Surface" />;
+}
+
+export function SidebarBtn<T extends string>({
+  active,
+  label,
+  id,
+  onItemClick,
+  children,
+}: {
+  active?: boolean;
+  label: string;
+  id: T;
+  onItemClick: (id: T) => void;
+  children: ReactNode;
+}) {
+  return (
+    <TooltipProvider
+      delay={500}
+      position="Left"
+      tooltip={
+        <Tooltip id={`SidebarStackItem-${id}-label`}>
+          <Text size="T300">{label}</Text>
+        </Tooltip>
+      }
+    >
+      {(ref) => (
+        <IconButton
+          aria-pressed={active}
+          aria-labelledby={`SidebarStackItem-${id}-label`}
+          ref={ref}
+          onClick={() => onItemClick(id)}
+          size="400"
+          radii="300"
+          variant="Surface"
+        >
+          {children}
+        </IconButton>
+      )}
+    </TooltipProvider>
+  );
+}

src/app/components/emoji-board/components/styles.css.ts

@@ -0,0 +1,22 @@
+import { style } from '@vanilla-extract/css';
+import { toRem, color, config } from 'folds';
+
+export const Sidebar = style({
+  width: toRem(54),
+  backgroundColor: color.Surface.Container,
+  color: color.Surface.OnContainer,
+  position: 'relative',
+});
+
+export const SidebarContent = style({
+  padding: `${config.space.S200} 0`,
+});
+
+export const SidebarStack = style({
+  width: '100%',
+  backgroundColor: color.Surface.Container,
+});
+
+export const SidebarDivider = style({
+  width: toRem(18),
+});