[Glitch] Add language picker to server rules section

Port d78535eab9 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>

app/javascript/flavours/glitch/features/about/components/section.tsx

@@ -0,0 +1,45 @@
+import type { FC, MouseEventHandler } from 'react';
+import { useCallback, useState } from 'react';
+
+import classNames from 'classnames';
+
+import { Icon } from '@/flavours/glitch/components/icon';
+import ChevronRightIcon from '@/material-icons/400-24px/chevron_right.svg?react';
+import ExpandMoreIcon from '@/material-icons/400-24px/expand_more.svg?react';
+
+interface SectionProps {
+  title: string;
+  children?: React.ReactNode;
+  open?: boolean;
+  onOpen?: () => void;
+}
+
+export const Section: FC<SectionProps> = ({
+  title,
+  children,
+  open = false,
+  onOpen,
+}) => {
+  const [collapsed, setCollapsed] = useState(!open);
+  const handleClick: MouseEventHandler = useCallback(() => {
+    setCollapsed((prev) => !prev);
+    onOpen?.();
+  }, [onOpen]);
+  return (
+    <div className={classNames('about__section', { active: !collapsed })}>
+      <button
+        className='about__section__title'
+        tabIndex={0}
+        onClick={handleClick}
+      >
+        <Icon
+          id={collapsed ? 'chevron-right' : 'chevron-down'}
+          icon={collapsed ? ChevronRightIcon : ExpandMoreIcon}
+        />{' '}
+        {title}
+      </button>
+
+      {!collapsed && <div className='about__section__body'>{children}</div>}
+    </div>
+  );
+};