src/components/ProfileDetails.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

import { ButtonItem, Field, Focusable, PanelSectionRow } from "@decky/ui";
import { useEffect, useRef, useState } from "react";
import { RiArrowDownSFill, RiArrowUpSFill } from "react-icons/ri";

interface ProfileDetailsProps {
  description: string;
}

export function ProfileDetails({ description }: ProfileDetailsProps) {
  const [expanded, setExpanded] = useState(false);
  const detailsRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!expanded) return;
    const frame = requestAnimationFrame(() => detailsRef.current?.scrollIntoView({ block: "nearest" }));
    return () => cancelAnimationFrame(frame);
  }, [expanded]);

  return (
    <Focusable ref={detailsRef} noFocusRing>
      <PanelSectionRow>
        <ButtonItem
          layout="below"
          bottomSeparator={expanded ? "none" : "standard"}
          onClick={() => setExpanded((value) => !value)}
        >
          {expanded ? <RiArrowUpSFill /> : <RiArrowDownSFill />} Details
        </ButtonItem>
      </PanelSectionRow>
      {expanded && (
        <PanelSectionRow>
          <Field label="Details" description={description} />
        </PanelSectionRow>
        )}
    </Focusable>
  );
}