{"version":3,"file":"static/js/67.a7170863.chunk.js","mappings":"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","sources":["components/ProjectCard.tsx","components/ProjectsListScroller.tsx","contents/Projects.tsx"],"sourcesContent":["import { EyeIcon } from '@assets/icons'\nimport { ProjectCardProps } from '@customTypes/Components'\nimport { MatchParams } from '@customTypes/Projects'\nimport { NavLink, useRouteMatch } from 'react-router-dom'\nimport styled from 'styled-components'\nimport { phone, pxToRem, tablet } from '../libs'\n\n\nconst ProjectCardStyled = styled.div<{ span: number }>`\n  background-color: ${({ theme }) => theme.colors.projectCardBackground};\n  border: 14px solid ${({ theme }) => theme.colors.projectCardBackground};\n  color: ${({ theme }) => theme.colors.text};\n  grid-row-end: span ${({ span }) => span};\n  border-radius: ${pxToRem(16)};\n  box-shadow: 0 4px 4px 0 #00000025;\n  display: flex;  \n  flex-direction: column;\n  justify-content: space-between;\n  cursor: pointer;\n\n\t/* aspect-ratio: 1/1; */\n\theight: 40vw;\n\tmax-height:720px;\n\n\t${tablet(`    \n    height: 60vw;\n  `)}\n  ${phone(`\n    height: 80vw;\n  `)}\n`\n\nconst ProjectImage = styled.img`\n  width: auto;\n  height: calc(100% - 60px);\n  flex-grow: 0;\n  align-items: flex-start;\n\n`\nconst ProjectTitle = styled.div`\n  margin: ${pxToRem(20)} 0 0;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  ${phone(`\n    font-size: ${pxToRem(20)};    \n  `)}\n`\n\nexport const ProjectCard: React.FC<ProjectCardProps> = ({ project, span = 1 }) => {\n  const match = useRouteMatch<MatchParams>()\n  const currentFilter = match.params.filter\n  return (\n    <NavLink to={`/projects/${currentFilter}/${project.databaseId}`} >\n      <ProjectCardStyled span={span}>\n        <ProjectImage draggable=\"false\" srcSet={project.featuredImage.node.srcSet} />\n        <ProjectTitle>\n          {project.title}\n          <EyeIcon size={40} />\n        </ProjectTitle>\n\n      </ProjectCardStyled>\n    </NavLink>\n  )\n}","import { ProjectType } from '@customTypes/Projects'\nimport { clampValues, pxToRem, tablet } from '@libs/index'\nimport { useRef } from 'react'\nimport styled from 'styled-components'\nimport useDragScroll from 'use-drag-scroll'\nimport { ProjectCard } from './ProjectCard'\n\nconst ProjectsCol = styled.div`\n  margin-bottom: 80px;\n  padding-bottom: 80px;\n  gap: ${pxToRem(20)};\n  overflow-x: scroll;\n  white-space: nowrap;\n  display: flex;\n  position: relative;\n  cursor: grab;\n  max-height: ${clampValues(500, 1000)};\n  height: auto;\n\n  > a {\n\t/* aspect-ratio: 1/1; */\n\t/* height: 40vw;\n\tmax-height: 800px;\n\n\t${tablet(`    \n    height: 60vw;\n  `)} */\n  }\n`\ninterface ProjectListScrollerProps {\n\tprojects: ProjectType[]\n}\n\n\nexport const ProjectListScroller = ({ projects }: ProjectListScrollerProps) => {\n\tconst ref = useRef(null)\n\tuseDragScroll({\n\t\tsliderRef: ref,\n\t\traliants: [projects],\n\t})\n\treturn (\n\t\t<ProjectsCol ref={ref} >\n\t\t\t{projects.map((project: ProjectType, index: number) => {\n\t\t\t\treturn <ProjectCard project={project} key={index} />\n\t\t\t})}\n\t\t</ProjectsCol>\n\t)\n}","import { StyledNavLink } from '@components/Header'\nimport { Loading } from '@components/Loading'\nimport { ProjectListScroller } from '@components/ProjectsListScroller'\nimport { MatchParams, ProjectType } from '@customTypes/Projects'\nimport { useProjects } from '@hooks/useData'\nimport { phone, pxToRem, tablet, uniqueArray } from '@libs/index'\nimport { Title } from '@theme/common'\nimport { useEffect, useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useRouteMatch } from 'react-router-dom'\nimport styled from 'styled-components'\nimport { FlexContainer } from '../components/BaseContainer'\n\nconst Layout = styled.div`\n  display: grid;\n  grid-template-columns: ${pxToRem(window.innerWidth / 5)} 1fr;\n  grid-gap: ${pxToRem(30)};\n  height: 100%;\n  margin-top: ${pxToRem(96)};\n  ${tablet(`    \n    display: flex;\n    flex-direction: column;\n  `)}\n   ${phone(`\n    margin-top: ${pxToRem(24)};\n  `)}\n`\nconst FilterContainer = styled.div`\n  ${tablet(`    \n    display: flex;\n    flex-direction: row;\n    flex-wrap: wrap;\n    justify-content: flex-start;\n    column-gap: ${pxToRem(16)};\n  `)}\n`\n\nconst FitlerTitle = styled(Title)`\n  margin-bottom: ${pxToRem(32)};\n  ${tablet(`    \n    flex-basis: 100%;\n  `)}\n  ${phone(`\n    font-size: ${pxToRem(25)};\n    margin-bottom: ${pxToRem(16)};\n  `)}\n`\n\nconst StyledTagLink = styled(StyledNavLink)`\n  height: auto;\n  padding: ${pxToRem(18)} 0;\n  ${tablet(`    \n    display: flex;\n    gap: ${pxToRem(16)};\n  `)}\n    ${phone(`\n    font-size: ${pxToRem(14)};\n  `)}\n`\n\nconst ProjectsContent = () => {\n  const { t } = useTranslation()\n  const {\n    loading,\n    error,\n    data: projects,\n  } = useProjects()\n  const [tagList, setTagList] = useState<string[]>([])\n  const match = useRouteMatch<MatchParams>()\n  const currentFilter = match.params.filter\n  const [projectsToShow, setProjectsToShow] = useState<ProjectType[]>([])\n\n\n  useEffect(() => {\n    if (!projects) return\n    const tags = uniqueArray(projects.projects.nodes.map(project => project.projectfields.tags)) as any\n    setTagList(['all', ...tags])\n  }, [projects])\n\n  useEffect(() => {\n    if (!projects || !currentFilter) return\n    const filteredProjectsList = projects.projects.nodes.filter((project) => project.projectfields.tags.includes(currentFilter))\n    filteredProjectsList.length > 0 ? setProjectsToShow(filteredProjectsList) : setProjectsToShow(projects.projects.nodes)\n  }, [currentFilter, projects])\n\n\n  if (loading) return <Loading />\n\n  if (error) return <p>Error :(</p>\n\n\n\n  const renderTagList = () => {\n    return (\n      tagList.length > 1 && tagList.map((tag, idx: number) => {\n        return (\n          <StyledTagLink\n            to={`/projects/${tag.toLowerCase()}`}\n            key={idx}\n            isActive={() => tag === match.params.filter}>\n            {t(`projects.${tag}`)}\n          </StyledTagLink>\n        )\n      })\n    )\n  }\n\n  return (\n    <FlexContainer align=\"flex-start\">\n      <Layout>\n        <FilterContainer>\n          <FitlerTitle>{t('projects.filtersTitle')}</FitlerTitle>\n          {tagList.length > 0 && renderTagList()}\n        </FilterContainer>\n        <ProjectListScroller projects={projectsToShow} />\n        {/* <ProjectsCol ref={ref} >\n          {projectsToShow.map((project: ProjectType, index: number) => {\n            return <ProjectCard project={project} key={index} />\n          })}\n        </ProjectsCol> */}\n      </Layout>\n    </FlexContainer >\n  )\n}\n\nexport default ProjectsContent"],"names":["ProjectCardStyled","styled","theme","colors","projectCardBackground","text","span","pxToRem","tablet","phone","ProjectImage","ProjectTitle","ProjectCard","project","currentFilter","useRouteMatch","params","filter","to","databaseId","draggable","srcSet","featuredImage","node","title","size","ProjectsCol","clampValues","ProjectListScroller","projects","ref","useRef","useDragScroll","sliderRef","raliants","map","index","Layout","window","innerWidth","FilterContainer","FitlerTitle","Title","StyledTagLink","StyledNavLink","t","useTranslation","loading","error","data","useProjects","tagList","setTagList","useState","match","projectsToShow","setProjectsToShow","useEffect","tags","uniqueArray","nodes","projectfields","filteredProjectsList","includes","length","Loading","align","tag","idx","toLowerCase","isActive"],"sourceRoot":""}