<commit_before>import React from "react";
import styled from "styled-components";
import { Link } from "gatsby";
// Assets
import icons from "assets/img/icons";
// Typography
import { Typography } from "typography/";
// Libs
import { useResponsive } from "lib/hooks";

interface ILinkButton {
  description?: string;
  title: string;
  to: string;
  caption?: string;
  short?: boolean;
  icon?: string;
  external?: boolean;
}

const LinkButton: React.FC<ILinkButton> = ({ description, title, to, icon, caption, external }) => {
  const { isMobile, isTablet, isDesktop } = useResponsive();

  return (
    <LinkButtonWrapper
      {...{ to, icon, caption }}
      as={caption || external ? "a" : Link}
      href={caption || external ? to : undefined}
      target={caption || external ? "_blank" : undefined}
      rel={caption || external ? "noopener noreferrer nofollow" : undefined}
    >
      <div>
        {description ? (
          <Description>
            <Typography type={isMobile ? "XSBold" : "MBold"}>{description}</Typography>
          </Description>
        ) : null}
        <Title>
          <Typography type={isMobile ? "MBold" : "SHLBold"}>{title}</Typography>
          <img aria-label="arrow-right" src={icons.chevronRight} width="24px" height="24px" />
        </Title>
        {caption ? (
          <Caption>
            <Typography type="XSBold">{caption}</Typography>
          </Caption>
        ) : null}
      </div>
      {(isTablet || isDesktop) && icon ? (
        <img alt="link-icon" src={icon} width="54px" height="54px" />
      ) : null}
    </LinkButtonWrapper>
  );
};

const LinkButtonWrapper = styled(Link)<{ icon?: string; caption?: string }>`
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 0.8rem;
  border: 0.2rem solid ${({ theme: { color } }) => color.greyScale.grey3};
  background-color: ${({ theme: { color } }) => color.surface.offWhite1};
  text-decoration: unset;
  &:hover {
    cursor: pointer;
    border: 0.2rem solid ${({ theme: { color } }) => color.black};
    background-color: ${({ theme: { color } }) => color.primary.green4};
  }
  @media ${({ theme }) => theme.device.mobile} {
    flex: 1;
    padding: 1.6rem;
  }
  @media ${({ theme }) => theme.device.tablet} {
    width: ${({ icon }) => (icon ? "43.5rem" : "98.2rem")};
    padding: ${({ caption }) => (caption ? "3.9rem 4rem" : "3rem 4rem")};
  }
  @media ${({ theme }) => theme.device.desktop} {
    width: ${({ icon }) => (icon ? "43.5rem" : "98.2rem")};
    padding: ${({ caption }) => (caption ? "3.9rem 4rem" : "3rem 4rem")};
  }
`;

const Description = styled.div`
  color: ${({ theme: { color } }) => color.greyScale.grey2};
  @media ${({ theme }) => theme.device.mobile} {
    margin-bottom: 0.8rem;
  }
`;
const Title = styled.div`
  display: flex;<commit_msg>:lipstick: 태블릿 해상도인경우 링크버튼이 고정되지 않도록 수정<commit_after>import React from "react";
import styled from "styled-components";
import { Link } from "gatsby";
// Assets
import icons from "assets/img/icons";
// Typography
import { Typography } from "typography/";
// Libs
import { useResponsive } from "lib/hooks";

interface ILinkButton {
  description?: string;
  title: string;
  to: string;
  caption?: string;
  short?: boolean;
  icon?: string;
  external?: boolean;
}

const LinkButton: React.FC<ILinkButton> = ({ description, title, to, icon, caption, external }) => {
  const { isMobile, isTablet, isDesktop } = useResponsive();

  return (
    <LinkButtonWrapper
      {...{ to, icon, caption }}
      as={caption || external ? "a" : Link}
      href={caption || external ? to : undefined}
      target={caption || external ? "_blank" : undefined}
      rel={caption || external ? "noopener noreferrer nofollow" : undefined}
    >
      <div>
        {description ? (
          <Description>
            <Typography type={isMobile ? "XSBold" : "MBold"}>{description}</Typography>
          </Description>
        ) : null}
        <Title>
          <Typography type={isMobile ? "MBold" : "SHLBold"}>{title}</Typography>
          <img aria-label="arrow-right" src={icons.chevronRight} width="24px" height="24px" />
        </Title>
        {caption ? (
          <Caption>
            <Typography type="XSBold">{caption}</Typography>
          </Caption>
        ) : null}
      </div>
      {(isTablet || isDesktop) && icon ? (
        <img alt="link-icon" src={icon} width="54px" height="54px" />
      ) : null}
    </LinkButtonWrapper>
  );
};

const LinkButtonWrapper = styled(Link)<{ icon?: string; caption?: string }>`
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 0.8rem;
  border: 0.2rem solid ${({ theme: { color } }) => color.greyScale.grey3};
  background-color: ${({ theme: { color } }) => color.surface.offWhite1};
  text-decoration: unset;
  &:hover {
    cursor: pointer;
    border: 0.2rem solid ${({ theme: { color } }) => color.black};
    background-color: ${({ theme: { color } }) => color.primary.green4};
  }
  @media ${({ theme }) => theme.device.mobile} {
    flex: 1;
    padding: 1.6rem;
  }
  @media ${({ theme }) => theme.device.tablet} {
    width: 100%;
    padding: ${({ caption }) => (caption ? "3.9rem 4rem" : "3rem 4rem")};
  }
  @media ${({ theme }) => theme.device.desktop} {
    width: ${({ icon }) => (icon ? "43.5rem" : "98.2rem")};
    padding: ${({ caption }) => (caption ? "3.9rem 4rem" : "3rem 4rem")};
  }
`;

const Description = styled.div`
  color: ${({ theme: { color } }) => color.greyScale.grey2};
  @media ${({ theme }) => theme.device.mobile} {
    margin-bottom: 0.8rem;
  }
`;
const Title = styled.div`
  display: flex;
{'fraction_non_alphanumeric': 0.18603006189213087, 'fraction_numerical': 0.015384615384615385, 'mean_word_length': 2.9580125962211334, 'pattern_counts': {'":': 0, '<': 43, '<?xml version=': 0, '>': 70, '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': '355781', 'n_tokens_mistral': 1952, 'n_tokens_neox': 1889, 'n_words': 424}