TheGame/packages/web/components/Player/Section/PlayerAchievements.tsx

import { HStack, Text } from '@metafam/ds';
import React from 'react';
import { FaMedal } from 'react-icons/fa';

import { ProfileSection } from '#components/Section/ProfileSection';
import { Player } from '#graphql/autogen/hasura-sdk';
import { BoxTypes } from '#utils/boxTypes';

// TODO Fake data
type Props = {
  player: Player;
  isOwnProfile?: boolean;
  editing?: boolean;
};
export const PlayerAchievements: React.FC<Props> = ({
  isOwnProfile,
  editing,
}) => {
  const [show, setShow] = React.useState(false);
  const fakeData = [
    'Fake Achievement No. 1',
    'Founding Father of MetaGame',
    'Summoner of Meta Fam',
  ];

  return (
    <ProfileSection
      title="Achievements"
      {...{ isOwnProfile, editing }}
      type={BoxTypes.PLAYER_ACHIEVEMENTS}
    >
      {(fakeData || []).slice(0, show ? 999 : 3).map((title) => (
        <HStack alignItems="baseline" mb={3} key={title}>
          <FaMedal color="#FBB112" />
          <Text fontSize="md">{title}</Text>
        </HStack>
      ))}
      {(fakeData || []).length > 3 && (
        <Text
          as="span"
          fontSize="xs"
          color="cyanText"
          cursor="pointer"
          onClick={() => setShow(!show)}
        >
          View {show ? 'less' : 'all'}
        </Text>
      )}
    </ProfileSection>
  );
};