Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

New projects to projects.json file #443

Merged
merged 6 commits into from
Nov 10, 2023
Merged

New projects to projects.json file #443

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
8203983
chore(website): add new projects to json file
cedoor Nov 9, 2023
44a16cf
fix(website): add functions to project list buttons
cedoor Nov 9, 2023
47bd6f3
fix(website): set correct project property name
cedoor Nov 9, 2023
f2fdb8e
fix(website): set correct project property name
cedoor Nov 9, 2023
0a6164c
fix(website): keep project list numbers in the same position
cedoor Nov 9, 2023
24139d7
chore(website): add missing taglines to projects
cedoor Nov 10, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion apps/website/src/app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,11 @@ export default function Home() {
<VStack spacing="3">
{projects.slice(0, 3).map((project) => (
<Link w="full" key={project.name} href={project.links.github} isExternal>
<ProjectCard title={project.name} description={project.tagline} tags={project.tags} />
<ProjectCard
title={project.name}
description={project.tagline}
categories={project.categories}
/>
</Link>
))}
</VStack>
Expand Down
2 changes: 1 addition & 1 deletion apps/website/src/components/Carousel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,7 @@ export default function Carousel({ title, sizes, type, ...props }: CarouselProps
<ProjectCard
title={project.name}
description={project.tagline}
tags={project.tags}
categories={project.categories}
/>
</Box>
</Link>
Expand Down
8 changes: 4 additions & 4 deletions apps/website/src/components/ProjectCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
import { Heading, Text, HStack, Tag, Card, CardBody } from "@chakra-ui/react"

export type ProjectCardProps = {
tags: string[]
categories: string[]
title: string
description: string
}

export default function ProjectCard({ tags, title, description }: ProjectCardProps) {
export default function ProjectCard({ categories, title, description }: ProjectCardProps) {
return (
<Card
bg={"darkBlue"}
Expand All @@ -20,9 +20,9 @@ export default function ProjectCard({ tags, title, description }: ProjectCardPro
_hover={{ borderColor: "ceruleanBlue" }}
>
<HStack gap={"8px"} mb={"2rem"}>
{tags.map((tag, i) => (
{categories.map((category, i) => (
<Tag variant="outline" key={i}>
{tag}
{category}
</Tag>
))}
</HStack>
Expand Down
50 changes: 32 additions & 18 deletions apps/website/src/components/ProjectsList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,19 +9,19 @@ import IconChevronRight from "../icons/IconChevronRight"
import IconCommunity from "../icons/IconCommunity"
import IconPSE from "../icons/IconPSE"
import { chunkArray } from "../utils/chunkArray"
import { getProjectTags } from "../utils/getProjectTags"
import { getProjectCategories } from "../utils/getProjectCategories"

export default function ProjectsList(props: any) {
const [projects, setProjects] = useState<(typeof allProjects)[]>(chunkArray(allProjects))
const [index, setIndex] = useState<number>(0)
const [selectedTag, setSelectedTag] = useState<string | null>(null)
const [selectedCategory, setSelectedCategory] = useState<string | null>(null)
const [onlyPSE, setOnlyPSE] = useState<boolean | null>(null)

const filterProjects = useCallback(() => {
let filteredProjects = allProjects

if (selectedTag) {
filteredProjects = filteredProjects.filter((project) => project.tags.includes(selectedTag))
if (selectedCategory) {
filteredProjects = filteredProjects.filter((project) => project.categories.includes(selectedCategory))
}

if (onlyPSE === true) {
Expand All @@ -31,11 +31,11 @@ export default function ProjectsList(props: any) {
}

setProjects(chunkArray(filteredProjects))
}, [selectedTag, onlyPSE])
}, [selectedCategory, onlyPSE])

useEffect(() => {
filterProjects()
}, [selectedTag, onlyPSE])
}, [selectedCategory, onlyPSE])

return (
<VStack {...props}>
Expand Down Expand Up @@ -68,15 +68,15 @@ export default function ProjectsList(props: any) {
<Text fontSize="20">Category</Text>

<HStack spacing="3" flexWrap="wrap">
{getProjectTags(allProjects).map((tag) => (
{getProjectCategories(allProjects).map((category) => (
<Button
key={tag}
key={category}
size="sm"
variant={tag === selectedTag ? "solid" : "outline"}
colorScheme={tag === selectedTag ? "primary" : "inherit"}
onClick={() => setSelectedTag(tag === selectedTag ? null : tag)}
variant={category === selectedCategory ? "solid" : "outline"}
colorScheme={category === selectedCategory ? "primary" : "inherit"}
onClick={() => setSelectedCategory(category === selectedCategory ? null : category)}
>
{tag}
{category}
</Button>
))}
</HStack>
Expand All @@ -85,8 +85,12 @@ export default function ProjectsList(props: any) {
<Grid templateColumns={{ base: "1fr", lg: "repeat(2, 1fr)", "2xl": "repeat(3, 1fr)" }} gap={6}>
{projects[index].map((project, i) => (
<GridItem key={project.name + i}>
<Link href={project.links.github} target="_blank">
<ProjectCard title={project.name} description={project.tagline} tags={project.tags} />
<Link href={project.links.website || project.links.github} target="_blank">
<ProjectCard
title={project.name}
description={project.tagline}
categories={project.categories}
/>
</Link>
</GridItem>
))}
Expand All @@ -95,7 +99,13 @@ export default function ProjectsList(props: any) {
{projects.length > 1 && (
<HStack w="100%">
<HStack flex="1" justify="center">
{index > 0 && <IconButton variant="link" aria-label="Arrow left" icon={<IconChevronLeft />} />}
<IconButton
visibility={index > 0 ? "visible" : "hidden"}
onClick={() => setIndex((i) => i - 1)}
variant="link"
aria-label="Arrow left"
icon={<IconChevronLeft />}
/>

<HStack spacing="5">
{projects.map((_, i) => (
Expand All @@ -110,9 +120,13 @@ export default function ProjectsList(props: any) {
))}
</HStack>

{index < projects.length - 1 && (
<IconButton variant="link" aria-label="Arrow right" icon={<IconChevronRight />} />
)}
<IconButton
visibility={index < projects.length - 1 ? "visible" : "hidden"}
onClick={() => setIndex((i) => i + 1)}
variant="link"
aria-label="Arrow right"
icon={<IconChevronRight />}
/>
</HStack>
</HStack>
)}
Expand Down
Loading