import React from 'react'; import styled, { css } from 'styled-components/macro'; import { useGetTeamQuery, useDeleteTeamMutation, GetProjectsDocument, GetProjectsQuery, } from 'shared/generated/graphql'; import { Link } from 'react-router-dom'; import Input from 'shared/components/Input'; const FilterSearch = styled(Input)` margin: 0; `; const ProjectsContainer = styled.div` margin-top: 45px; display: flex; width: 100%; `; const FilterTab = styled.div` max-width: 240px; flex: 0 0 240px; margin: 0; padding-right: 32px; `; const FilterTabItems = styled.ul``; const FilterTabItem = styled.li` cursor: pointer; border-radius: 3px; display: block; font-weight: 700; text-decoration: none; padding: 6px 8px; color: rgba(${props => props.theme.colors.text.primary}); &:hover { border-radius: 6px; background: rgba(${props => props.theme.colors.primary}); color: rgba(${props => props.theme.colors.text.secondary}); } `; const FilterTabTitle = styled.h2` color: #5e6c84; font-size: 12px; font-weight: 500; letter-spacing: 0.04em; line-height: 16px; margin-top: 16px; text-transform: uppercase; padding: 8px; margin: 0; `; const ProjectAddTile = styled.div` background-color: rgba(${props => props.theme.colors.bg.primary}, 0.4); background-size: cover; background-position: 50%; color: #fff; line-height: 20px; padding: 8px; position: relative; text-decoration: none; border-radius: 3px; display: block; `; const ProjectTile = styled(Link)<{ color: string }>` background-color: ${props => props.color}; background-size: cover; background-position: 50%; color: #fff; line-height: 20px; padding: 8px; position: relative; text-decoration: none; border-radius: 3px; display: block; `; const ProjectTileFade = styled.div` background-color: rgba(0, 0, 0, 0.15); bottom: 0; left: 0; position: absolute; right: 0; top: 0; `; const ProjectListItem = styled.li` width: 23.5%; padding: 0; margin: 0 2% 2% 0; box-sizing: border-box; position: relative; cursor: pointer; &:hover ${ProjectTileFade} { background-color: rgba(0, 0, 0, 0.25); } `; const ProjectList = styled.ul` display: flex; flex-wrap: wrap; padding-top: 16px; & ${ProjectListItem}:nth-of-type(4n) { margin-right: 0; } `; const ProjectTileDetails = styled.div` display: flex; height: 80px; position: relative; flex-direction: column; justify-content: space-between; `; const ProjectAddTileDetails = styled.div` display: flex; height: 80px; position: relative; flex-direction: column; align-items: center; justify-content: center; `; const ProjectTileName = styled.div<{ centered?: boolean }>` flex: 0 0 auto; font-size: 16px; font-weight: 700; display: inline-block; overflow: hidden; max-height: 40px; width: 100%; word-wrap: break-word; ${props => props.centered && 'text-align: center;'} `; const ProjectListWrapper = styled.div` flex: 1 1; `; const colors = ['#e362e3', '#7a6ff0', '#37c5ab', '#aa62e3', '#e8384f']; type TeamProjectsProps = { teamID: string; }; const TeamProjects: React.FC = ({ teamID }) => { const { loading, data } = useGetTeamQuery({ variables: { teamID } }); if (loading) { return loading; } if (data) { return ( SORT Most Recently Active Number of Members Number of Stars Alphabetical {data.projects.map((project, idx) => ( {project.name} ))} ); } return error; }; export default TeamProjects;