soconnor/personal-website
1
0
Fork 0
mirror of https://github.com/soconnor0919/personal-website.git synced 2025-12-11 06:14:44 -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 { ArrowUpRight, Play, BookOpen, FolderGit2, Github } from "lucide-react";
import { projects } from "~/lib/data";
import Image from "next/image";
import { ImageWithSkeleton } from "~/components/ui/image-with-skeleton";
import { CardSkeleton } from "~/components/ui/skeletons";
export default function ProjectsPage() {
@@ -63,12 +63,13 @@ export default function ProjectsPage() {
{project.image && (
<div className="lg:w-1/3">
<div className="flex items-center justify-center p-4 lg:h-full">
<Image
<ImageWithSkeleton
src={project.image}
alt={project.imageAlt || project.title}
width={400}
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}
/>
</div>
@@ -212,12 +213,13 @@ export default function ProjectsPage() {
<Card className="card-full-height flex flex-col">
{project.image && (
<div className="flex h-48 items-center justify-center p-4">
<Image
<ImageWithSkeleton
src={project.image}
alt={project.imageAlt || project.title}
width={400}
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>
)}

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

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