• Index
• Search by APIs
• Search by Words
• Project Search

• Java
• Python
• JavaScript
• TypeScript
• C++
• Scala
• Blog

• github-explorer-master
  • .github
    • docs
      • images
  • .eslintignore
  • src
    • App.tsx
    • translations
      • en
        • common.json
      • pt
        • common.json
      • i18n.ts
    • services
      • api.ts
    • pages
      • RepositoryDetails
        • index.tsx
        • styles.ts
      • Dashboard
        • index.tsx
        • styles.ts
        • types.ts
    • index.tsx
    • hooks
      • useRepositories
        • index.ts
      • useIssues
        • index.ts
      • usePullRequests
        • index.ts
    • components
      • Layout
        • index.tsx
        • styles.ts
        • types.ts
      • Input
        • index.tsx
        • styles.ts
        • types.ts
      • RepositoryDetailsLists
        • IssuesList
          • index.tsx
        • PullRequestsList
          • index.tsx
      • Button
        • index.tsx
        • styles.ts
        • types.ts
      • Loading
        • index.tsx
        • types.ts
      • Header
        • index.tsx
        • styles.ts
      • Repository
        • index.tsx
        • types.ts
      • LinkBox
        • index.tsx
        • types.ts
      • Tabs
        • index.tsx
        • styles.ts
        • types.ts
    • config
      • yup.ts
    • setupTests.ts
    • constants
      • storage.ts
      • tabs.ts
    • contexts
      • SelectedRepositoryContext
        • index.ts
        • types.ts
        • Container.tsx
    • @types
      • styled.d.ts
      • index.d.ts
    • styles
      • theme
        • index.ts
        • colors.ts
      • global.ts
      • components.ts
    • schemas
      • addRepositorySchema.ts
    • shared
      • githubAPI.ts
      • utilties.ts
    • react-app-env.d.ts
    • routes
      • index.tsx
    • assets
  • public
    • robots.txt
    • index.html
  • LICENSE
  • CONTRIBUTING.md
  • .editorconfig
  • README.md
  • package.json
  • .eslintrc.js
  • tsconfig.json
  • .gitignore

import styled, { css } from "styled-components";
import {
  Tab,
  Tabs,
  TabList,
  TabPanel,
} from "react-tabs";
import { lighten } from "polished";

export const StyledTabs = styled(Tabs)`
  height: 100%;
  padding: 20px 0;
  display: flex;
  flex-direction: column;
`;

export const StyledTabList = styled(TabList)`
  display: flex;
  border-radius: 10px;
`;

export const StyledTab = styled(Tab)`
  ${({ theme }) => css`
    cursor: pointer;
    color: ${theme.colors["gray-dark"]};
    position: relative;
    font-size: 18px;

    &.selected-tab {
      &:after {
        content: '';
        display: block;
        width: 100%;
        height: 4px;
        margin-top: 10px;
        border-radius: 2px;
        background: ${theme.colors.dark};
      }
    }

    &:hover {
      color: ${lighten(0.20, theme.colors.dark)};
    }

    &:not(:last-of-type) {
      margin-right: 15px;
    }
  `};
`;

export const StyledTabPanel = styled(TabPanel)`
  &.react-tabs__tab-panel--selected {
    flex: 1;
    padding-top: 20px;
  }
`;