Portfolio


import { CSSProperties } from 'react';
import styled from '@emotion/styled';

interface InputProps {
  style?: CSSProperties;
  type: 'text' | 'number' | 'password';
}

const Input = ({ type, ...props }: InputProps) => {
  return <InputStyled type={type} style={{ ...props.style }} {...props} />;
};
export default Input;

const InputStyled = styled.input`
  background: none;
  border: solid 1px #c4c4c4;
  border-radius: 8px;
  font-size: 16px;
  transition: border 0.2s;
  &:hover {
    border: solid 1px black;
  }
`;


import { ChevronRight } from 'react-feather';
import styled from '@emotion/styled';
import React, { CSSProperties } from 'react';

interface LinkBoxProps {
  children: React.ReactNode;
  src?: string;
  style?: CSSProperties;
}

const checkHasImage = (str: string | undefined) => {
  return str;
};

const LinkBox = ({ children, src, ...props }: LinkBoxProps) => {
  return (
    <LinkContainer style={{ ...props.style }} {...props}>
      {checkHasImage(src) && <LinkImg src={src} />}
      <div>
        <LinkText>{children}</LinkText>
        <ChevronRight size={40} />
      </div>
    </LinkContainer>
  );
};
export default LinkBox;

const LinkContainer = styled.div`
  display: flex;
  align-items: center;
  border: solid 1px #c4c4c4;
  border-radius: 16px;
  padding: 10px 20px;
  color: black;
  margin-bottom: 10px;
  transition: border 0.2s;
  & > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }
  &:hover {
    border: solid 1px black;
  }
`;

const LinkText = styled.span`
  font-size: 20px;
`;

const LinkImg = styled.img`
  min-width: 80px;
  min-height: 80px;
  max-width: 80px;
  max-height: 80px;
  border-radius: 16px;
  background-color: black;
  margin-right: 20px;
`;


function FancyBorder(props) {
  return (
    <div className={'FancyBorder FancyBorder-' + props.color}>
      {props.children}
    </div>
  );
}


children:
    | JSX.Element
    | JSX.Element[]
    | string
    | string[];


import styled from '@emotion/styled';

const Input = styled.input`
  background: none;
  border: solid 1px #c4c4c4;
  border-radius: 8px;
  font-size: 16px;
  transition: border 0.2s;
  &::-webkit-outer-spin-button,
  ::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }
  &:hover {
    border: solid 1px black;
  }
`;

export default Input;


import styled from '@emotion/styled';
import React from 'react';

interface Props extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  children: React.ReactNode;
  type: 'button' | 'submit' | 'reset';
}

const Button = ({ children, type, ...props }: Props) => {
  return (
    <StyledButton type={type} style={{ ...props.style }} {...props}>
      {children}
    </StyledButton>
  );
};

const StyledButton = styled.button`
  background: linear-gradient(270deg, #b88bd6 0%, #b88bd6 0.01%, #a8bac8 100%);
  border: none;
  cursor: pointer;
`;

export default Button;