soconnor/personal-website
1
0
Fork 0
mirror of https://github.com/soconnor0919/personal-website.git synced 2025-12-12 23:04:43 -05:00
Code Issues Packages Projects Releases Wiki Activity

feat: Replace Next.js Image component with ImageWithSkeleton and add containerClassName prop for styling.

Browse Source
This commit is contained in:
Sean O'Connor
2025-12-10 03:23:48 -05:00
parent 50536727a4
commit 1fe7aa1130
2 changed files with 10 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/app/projects/page.tsx
View File

@@ -13,7 +13,7 @@ import { Button } from "~/components/ui/button";
import Link from "next/link"; import Link from "next/link";
import { ArrowUpRight, Play, BookOpen, FolderGit2, Github } from "lucide-react"; import { ArrowUpRight, Play, BookOpen, FolderGit2, Github } from "lucide-react";
import { projects } from "~/lib/data"; import { projects } from "~/lib/data";
import Image from "next/image"; import { ImageWithSkeleton } from "~/components/ui/image-with-skeleton";
import { CardSkeleton } from "~/components/ui/skeletons"; import { CardSkeleton } from "~/components/ui/skeletons";
export default function ProjectsPage() { export default function ProjectsPage() {
@@ -63,12 +63,13 @@ export default function ProjectsPage() {
{project.image && ( {project.image && (
<div className="lg:w-1/3"> <div className="lg:w-1/3">
<div className="flex items-center justify-center p-4 lg:h-full"> <div className="flex items-center justify-center p-4 lg:h-full">
<Image <ImageWithSkeleton
src={project.image} src={project.image}
alt={project.imageAlt || project.title} alt={project.imageAlt || project.title}
width={400} width={400}
height={300} height={300}
className="h-auto w-full object-contain rounded-xl shadow-md" className="h-auto w-full object-contain"
containerClassName="w-full rounded-xl shadow-md overflow-hidden"
priority={index === 0} priority={index === 0}
/> />
</div> </div>
@@ -212,12 +213,13 @@ export default function ProjectsPage() {
<Card className="card-full-height flex flex-col"> <Card className="card-full-height flex flex-col">
{project.image && ( {project.image && (
<div className="flex h-48 items-center justify-center p-4"> <div className="flex h-48 items-center justify-center p-4">
<Image <ImageWithSkeleton
src={project.image} src={project.image}
alt={project.imageAlt || project.title} alt={project.imageAlt || project.title}
width={400} width={400}
height={250} height={250}
className="h-auto max-h-full w-full object-contain rounded-xl shadow-md" className="h-auto max-h-full w-full object-contain"
containerClassName="w-full h-full flex items-center justify-center rounded-xl shadow-md overflow-hidden"
/> />
</div> </div>
)} )}

5
src/app/travel/page.tsx
View File

@@ -9,7 +9,7 @@ import {
CardDescription, CardDescription,
} from "~/components/ui/card"; } from "~/components/ui/card";
import { CardSkeleton } from "~/components/ui/skeletons"; import { CardSkeleton } from "~/components/ui/skeletons";
import Image from "next/image"; import { ImageWithSkeleton } from "~/components/ui/image-with-skeleton";
import { Badge } from "~/components/ui/badge"; import { Badge } from "~/components/ui/badge";
import { Plane } from "lucide-react"; import { Plane } from "lucide-react";
import { travel } from "~/lib/data"; import { travel } from "~/lib/data";
@@ -60,7 +60,7 @@ export default function TripsPage() {
<div className="flex space-x-0 overflow-x-auto"> <div className="flex space-x-0 overflow-x-auto">
{trip.images.map((image, imgIndex) => ( {trip.images.map((image, imgIndex) => (
<div key={imgIndex} className="flex-shrink-0"> <div key={imgIndex} className="flex-shrink-0">
<Image <ImageWithSkeleton
src={image} src={image}
alt={ alt={
trip.alts && trip.alts[imgIndex] trip.alts && trip.alts[imgIndex]
@@ -70,6 +70,7 @@ export default function TripsPage() {
width={250} width={250}
height={200} height={200}
className="max-h-[200px] min-h-[200px] object-cover" className="max-h-[200px] min-h-[200px] object-cover"
containerClassName="max-h-[200px] min-h-[200px]"
/> />
</div> </div>
))} ))}