<commit_before>import React from "react";
import styled from "styled-components";
// Typography
import { LBody } from "typography/";

const TabNavigationBar: React.FC<{
  onIndexChanged: (index: number) => void;
  titles: string[];
}> = ({ onIndexChanged, titles }) => {
  const [currentIndex, setCurrentIndex] = React.useState(0);

  const handleTabNavigationButtonClick = (index: number) => {
    setCurrentIndex(index);
    onIndexChanged(index);
  };

  return (
    <TagNavigationBarWrapper>
      <TagNavButtonList>
        {titles.map((title: string, index: number) => (
          <li key={title}>
            <TagNavButton
              onClick={() => handleTabNavigationButtonClick(index)}
              selected={index === currentIndex}
            >
              <LBody bold={index === currentIndex}>{title}</LBody>
            </TagNavButton>
          </li>
        ))}
      </TagNavButtonList>
    </TagNavigationBarWrapper>
  );
};

const TagNavigationBarWrapper = styled.div`
  width: 100%;
  min-width: 106.2rem;
  display: flex;
  justify-content: center;
  align-items: center;
`;

const TagNavButtonList = styled.ul`
  width: 84.5rem;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 0 1.6rem;
`;

const TagNavButton = styled.button<{ selected?: boolean }>`
  padding: 0 1.2rem;
  height: 3.6rem;
  background-color: ${({ selected, theme: { color } }) =>
    selected ? color.greyScale.white : "transparent"};
  border: 0;
  border-radius: 99.9rem;
  &:hover {
    cursor: pointer;
  }
`;

export default TabNavigationBar;<commit_msg>:lipstick: 태그들이 중앙정렬되어 나타나는 문제 수정, 태그 선택시 애니메이션이 보여지도록 변경<commit_after>import React from "react";
import styled from "styled-components";
// Typography
import { LBody } from "typography/";

const TabNavigationBar: React.FC<{
  onIndexChanged: (index: number) => void;
  titles: string[];
}> = ({ onIndexChanged, titles }) => {
  const [currentIndex, setCurrentIndex] = React.useState(0);

  const handleTabNavigationButtonClick = (index: number) => {
    setCurrentIndex(index);
    onIndexChanged(index);
  };

  return (
    <TagNavigationBarWrapper>
      <TagNavButtonList>
        {titles.map((title: string, index: number) => (
          <li key={title}>
            <TagNavButton
              onClick={() => handleTabNavigationButtonClick(index)}
              selected={index === currentIndex}
            >
              <LBody bold={index === currentIndex}>{title}</LBody>
            </TagNavButton>
          </li>
        ))}
      </TagNavButtonList>
    </TagNavigationBarWrapper>
  );
};

const TagNavigationBarWrapper = styled.div`
  width: 100%;
  min-width: 106.2rem;
  display: flex;
  justify-content: flex-start;
  align-items: center;
`;

const TagNavButtonList = styled.ul`
  width: 84.5rem;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 0 1.6rem;
`;

const TagNavButton = styled.button<{ selected?: boolean }>`
  padding: 0 1.2rem;
  height: 3.6rem;
  background-color: ${({ selected, theme: { color } }) =>
    selected ? color.greyScale.white : "transparent"};
  border: 0;
  border-radius: 99.9rem;
  transition-property: font-weight, background-color;
  transition-duration: 0.3s;
  &:hover {
    cursor: pointer;
  }
`;

export default TabNavigationBar;
{'fraction_non_alphanumeric': 0.1429869736443502, 'fraction_numerical': 0.014541048167222055, 'mean_word_length': 3.148241206030151, 'pattern_counts': {'":': 0, '<': 27, '<?xml version=': 0, '>': 39, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1785926', 'n_tokens_mistral': 1109, 'n_tokens_neox': 1103, 'n_words': 232}