-
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add project full card and github skill
- Loading branch information
1 parent
bf52eb3
commit 334bb50
Showing
14 changed files
with
251 additions
and
25 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| import fs from "node:fs"; | ||
| import path from "node:path"; | ||
| import { NextResponse } from "next/server"; | ||
|
|
||
| export async function GET( | ||
| request: Request, | ||
| { params }: { params: { project: string } } | ||
| ) { | ||
| const { project } = await params; | ||
|
|
||
| if (!project) { | ||
| return NextResponse.json( | ||
| { error: "Project name is required" }, | ||
| { status: 400 } | ||
| ); | ||
| } | ||
|
|
||
| const imagesPath = path.join(process.cwd(), "public", "images", project); | ||
|
|
||
| try { | ||
| const files = fs.readdirSync(imagesPath); | ||
| const images = files | ||
| .filter((file) => /\.(png|jpg|jpeg|gif|svg)$/i.test(file)) | ||
| .map((file, index) => ({ | ||
| id: index, | ||
| src: `/images/${project}/${file}`, | ||
| alt: `${project} ${file}`, | ||
| })); | ||
|
|
||
| return NextResponse.json(images); | ||
| } catch (error) { | ||
| return NextResponse.json( | ||
| { error: "Unable to fetch images" }, | ||
| { status: 500 } | ||
| ); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,71 @@ | ||
| export function ProjectsFullCard() { | ||
| return <section id="projects" className="h-screen"></section>; | ||
| "use client"; | ||
|
|
||
| import { | ||
| Dialog, | ||
| DialogContent, | ||
| DialogDescription, | ||
| DialogHeader, | ||
| } from "../ui/dialog"; | ||
| import { DialogTitle } from "@radix-ui/react-dialog"; | ||
| import type { Dispatch, SetStateAction } from "react"; | ||
| import { ProjectCarousel } from "./project-carousel"; | ||
| import { Project } from "@/@types"; | ||
| import { Icon } from "../icon"; | ||
| import { LucideUpload } from "lucide-react"; | ||
| import { Button, Separator } from "../ui"; | ||
| import { useTranslations } from "next-intl"; | ||
| import Link from "next/link"; | ||
|
|
||
| interface ProjectsFullCardProps { | ||
| openState: [boolean, Dispatch<SetStateAction<boolean>>]; | ||
| info: Project; | ||
| } | ||
|
|
||
| export function ProjectsFullCard({ | ||
| openState, | ||
| info, | ||
| }: Readonly<ProjectsFullCardProps>) { | ||
| const [isOpen, setIsOpen] = openState; | ||
| const t = useTranslations("Projects"); | ||
|
|
||
| return ( | ||
| <Dialog open={isOpen} onOpenChange={() => setIsOpen((prev) => !prev)}> | ||
| <DialogContent> | ||
| <DialogHeader className="flex items-center justify-center"> | ||
| <ProjectCarousel name={info.name} /> | ||
| <DialogTitle className="flex items-center justify-center text-2xl"> | ||
| {info.name} | ||
| </DialogTitle> | ||
| </DialogHeader> | ||
| <Separator /> | ||
|
|
||
| <DialogDescription>{t(info.description)}</DialogDescription> | ||
| <Separator /> | ||
| <div> | ||
| <Button variant="link" size="sm" className="flex"> | ||
| <Icon name="GitHub" className="size-8" /> | ||
| <Link href={info.github} /> | ||
| {t("ViewSource")} | ||
| </Button> | ||
| <Button variant="link" size="sm" className="flex"> | ||
| <LucideUpload className="size-8" /> | ||
| <Link href={info.deploy} /> | ||
| {t("ViewDeploy")} | ||
| </Button> | ||
| </div> | ||
| <Separator /> | ||
|
|
||
| <div className="flex flex-wrap items-center justify-center gap-2"> | ||
| {info.techs.map((tech) => ( | ||
| <Icon | ||
| key={tech} | ||
| name={tech} | ||
| extension={tech === "Necord" ? "png" : "svg"} | ||
| className="size-10" | ||
| /> | ||
| ))} | ||
| </div> | ||
| </DialogContent> | ||
| </Dialog> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,9 +1,11 @@ | ||
| import { ProjectsFullCard } from "./full-card"; | ||
| import { ProjectCarousel } from "./project-carousel"; | ||
| import { ProjectsSection } from "./projects"; | ||
| import { ProjectsSmallCard } from "./small-card"; | ||
|
|
||
| export const Projects = { | ||
| Section: ProjectsSection, | ||
| SmallCard: ProjectsSmallCard, | ||
| FullCard: ProjectsFullCard, | ||
| Carousel: ProjectCarousel, | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,80 @@ | ||
| "use client"; | ||
|
|
||
| import { Card, CardContent } from "@/components/ui/card"; | ||
| import { | ||
| Carousel, | ||
| CarouselContent, | ||
| CarouselItem, | ||
| CarouselNext, | ||
| CarouselPrevious, | ||
| } from "@/components/ui/carousel"; | ||
| import { useEffect, useState } from "react"; | ||
|
|
||
| interface ProjectCarouselProps { | ||
| name: string; | ||
| } | ||
|
|
||
| export function ProjectCarousel({ name }: ProjectCarouselProps) { | ||
| const [pictures, setPictures] = useState<{ id: number, src: string; alt: string }[]>([]); | ||
| const [loading, setLoading] = useState(true); | ||
|
|
||
| useEffect(() => { | ||
| const fetchPictures = async () => { | ||
| try { | ||
| const response = await fetch(`/api/images/${name}`); | ||
| if (response.ok) { | ||
| const data = await response.json(); | ||
| setPictures(data); | ||
| } else { | ||
| console.error("Failed to fetch images"); | ||
| } | ||
| } catch (error) { | ||
| console.error("Error fetching images:", error); | ||
| } finally { | ||
| setLoading(false); | ||
| } | ||
| }; | ||
|
|
||
| fetchPictures(); | ||
| }, [name]); | ||
|
|
||
| if(loading) { | ||
| return ( | ||
| <Carousel> | ||
| <CarouselContent className="w-full max-w-64"> | ||
| <CarouselItem> | ||
| <div className="p-1"> | ||
| <Card className="w-[230px]"> | ||
| <CardContent className="flex aspect-square items-center justify-center p-6"> | ||
| <div className="animate-pulse bg-gray-300 w-full h-full rounded-sm"></div> | ||
| </CardContent> | ||
| </Card> | ||
| </div> | ||
| </CarouselItem> | ||
| </CarouselContent> | ||
| <CarouselPrevious /> | ||
| <CarouselNext /> | ||
| </Carousel> | ||
| ); | ||
| } | ||
|
|
||
| return ( | ||
| <Carousel> | ||
| <CarouselContent className="w-full max-w-64"> | ||
| {pictures.map((picture) => ( | ||
| <CarouselItem key={picture.id}> | ||
| <div className="p-1"> | ||
| <Card className="w-[230px]"> | ||
| <CardContent className="flex aspect-square items-center justify-center p-6"> | ||
| <img src={picture.src} alt={picture.alt} /> | ||
| </CardContent> | ||
| </Card> | ||
| </div> | ||
| </CarouselItem> | ||
| ))} | ||
| </CarouselContent> | ||
| <CarouselPrevious /> | ||
| <CarouselNext /> | ||
| </Carousel> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters