feat: Project dialog, updated screenshots, migration to bun
This commit is contained in:
75
components/projectDialog.jsx
Normal file
75
components/projectDialog.jsx
Normal file
@@ -0,0 +1,75 @@
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "@/components/ui/dialog"
|
||||
import Image from "next/image"
|
||||
import Link from "next/link"
|
||||
import { ExternalLink } from "lucide-react"
|
||||
import { skillsList } from "@/lib/skillsList"
|
||||
|
||||
export default function ProjectDialog({ children, project }) {
|
||||
return (
|
||||
<Dialog>
|
||||
<DialogTrigger asChild>
|
||||
{children}
|
||||
</DialogTrigger>
|
||||
<DialogContent className="flex flex-col md:flex-row gap-2 md:gap-4 max-w-[95vw] md:max-w-4xl px-4 bg-gray-100">
|
||||
<DialogTitle className="sr-only">{project.name}</DialogTitle>
|
||||
<div className="flex md:flex-col gap-1 overflow-x-auto md:overflow-x-visible md:overflow-y-auto scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200 pb-2 md:pb-0 md:pr-2 shrink-0 md:max-h-[400px]">
|
||||
{project.screenshots.map((screenshot, idx) => (
|
||||
<div key={idx} className="w-full p-2 rounded-lg shrink-0">
|
||||
<Image
|
||||
className="rounded-md w-full h-auto"
|
||||
src={screenshot}
|
||||
width={200}
|
||||
height={50}
|
||||
alt={`${project.title} screenshot ${idx + 1}`}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex flex-col gap-4 min-w-0 flex-1 pr-2">
|
||||
<div className="flex flex-col gap-0.5 mx-1">
|
||||
<div className="flex gap-2 items-center flex-wrap">
|
||||
<Image
|
||||
src={project.logo}
|
||||
width={24}
|
||||
height={24}
|
||||
className="p-0.5 bg-white rounded-sm shrink-0"
|
||||
alt={project.logoAlt}
|
||||
/>
|
||||
<h3 className="wrap-break-word">{project.title}</h3>
|
||||
</div>
|
||||
{project.url && project.hostname && (
|
||||
<Link
|
||||
href={project.url}
|
||||
target="_blank"
|
||||
className="flex gap-2 items-center text-blue-500 hover:text-blue-600 duration-200 break-all"
|
||||
>
|
||||
<h4>{project.hostname}</h4>
|
||||
<ExternalLink size={18} className="shrink-0" />
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2 items-center">
|
||||
{project.skills.map((skillName, idx) => {
|
||||
const skill = skillsList.find(s => s.name === skillName);
|
||||
return skill ? (
|
||||
<div
|
||||
key={idx}
|
||||
className="flex items-center gap-2 rounded-full bg-white px-2 xl:px-3 py-1 shrink-0"
|
||||
>
|
||||
{skill.icon}
|
||||
<h6 className="whitespace-nowrap">{skill.name}</h6>
|
||||
</div>
|
||||
) : null;
|
||||
})}
|
||||
</div>
|
||||
<h4 className="text-sm sm:text-base warp-break-word">{project.text}</h4>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
137
components/ui/dialog.jsx
Normal file
137
components/ui/dialog.jsx
Normal file
@@ -0,0 +1,137 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import * as DialogPrimitive from "@radix-ui/react-dialog"
|
||||
import { XIcon } from "lucide-react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Dialog({
|
||||
...props
|
||||
}) {
|
||||
return <DialogPrimitive.Root data-slot="dialog" {...props} />;
|
||||
}
|
||||
|
||||
function DialogTrigger({
|
||||
...props
|
||||
}) {
|
||||
return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
|
||||
}
|
||||
|
||||
function DialogPortal({
|
||||
...props
|
||||
}) {
|
||||
return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
|
||||
}
|
||||
|
||||
function DialogClose({
|
||||
...props
|
||||
}) {
|
||||
return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
|
||||
}
|
||||
|
||||
function DialogOverlay({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<DialogPrimitive.Overlay
|
||||
data-slot="dialog-overlay"
|
||||
className={cn(
|
||||
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
|
||||
className
|
||||
)}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
function DialogContent({
|
||||
className,
|
||||
children,
|
||||
showCloseButton = true,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<DialogPortal data-slot="dialog-portal">
|
||||
<DialogOverlay />
|
||||
<DialogPrimitive.Content
|
||||
data-slot="dialog-content"
|
||||
className={cn(
|
||||
"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border py-4 shadow-lg duration-200",
|
||||
className
|
||||
)}
|
||||
{...props}>
|
||||
{children}
|
||||
{showCloseButton && (
|
||||
<DialogPrimitive.Close
|
||||
data-slot="dialog-close"
|
||||
className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4">
|
||||
<XIcon />
|
||||
<span className="sr-only">Close</span>
|
||||
</DialogPrimitive.Close>
|
||||
)}
|
||||
</DialogPrimitive.Content>
|
||||
</DialogPortal>
|
||||
);
|
||||
}
|
||||
|
||||
function DialogHeader({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
data-slot="dialog-header"
|
||||
className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
function DialogFooter({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
data-slot="dialog-footer"
|
||||
className={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
function DialogTitle({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<DialogPrimitive.Title
|
||||
data-slot="dialog-title"
|
||||
className={cn("text-lg leading-none font-semibold", className)}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
function DialogDescription({
|
||||
className,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<DialogPrimitive.Description
|
||||
data-slot="dialog-description"
|
||||
className={cn("text-muted-foreground text-sm", className)}
|
||||
{...props} />
|
||||
);
|
||||
}
|
||||
|
||||
export {
|
||||
Dialog,
|
||||
DialogClose,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogOverlay,
|
||||
DialogPortal,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
}
|
||||
Reference in New Issue
Block a user