Skip to content

Commit

Permalink
feat: add artist info and organize code
Browse files Browse the repository at this point in the history
  • Loading branch information
@kyziq
kyziq committed Jan 11, 2024
1 parent 9120dec commit 2d75056
Show file tree
Hide file tree
Showing 2 changed files with 98 additions and 94 deletions.
Binary file modified src/assets/images/landscapes/ThomasGainsborough/TheBlueBoy.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
192 changes: 98 additions & 94 deletions src/pages/ArtDescription.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,19 +9,110 @@ import {
Tab,
} from '@nextui-org/react';

const getArtItemById = (id) => {
for (const listKey in allLists) {
if (Object.prototype.hasOwnProperty.call(allLists, listKey)) {
const item = allLists[listKey].find((item) => item.id.toString() === id);
if (item) return item;
}
}
return null;
};

const FlagImage = ({ countryCode }) => {
const flagSrc = countryCode
? `http://purecatamphetamine.github.io/country-flag-icons/3x2/${countryCode}.svg`
: '';
return flagSrc ? (
<Image
alt={countryCode}
src={flagSrc}
width={24}
height={16}
objectFit="cover"
className="ml-2"
/>
) : null;
};

const ArtInfo = ({ artItem }) => (
<Card className="shadow-xl rounded-lg">
<CardHeader className="mb-1">
<div>
<h2 className="text-3xl font-bold text-gray-800">{artItem.name}</h2>
<p className="text-sm text-gray-600 mt-1">
by {artItem.artistInfo.name}
</p>
</div>
</CardHeader>
<CardBody className="space-y-4">
<p className="text-gray-700">{artItem.description}</p>
<p>
<span className="font-semibold">Year: </span>
{artItem.date}
</p>
<p>
<span className="font-semibold">Style: </span>
{artItem.style}
</p>
<p>
<span className="font-semibold">Dimensions: </span>
{artItem.dimensions}
</p>
<div className="flex items-center">
<span className="font-semibold">Location: </span>
<span className="ml-2">{artItem.location}</span>
<FlagImage countryCode={artItem.countryCode} />
</div>
</CardBody>
</Card>
);
const ArtistDetails = ({ artistInfo }) => (
<Card className="shadow-xl rounded-lg">
<CardHeader className="mb-1 flex items-center space-x-4">
<Image
src={artistInfo.imageUrl}
alt={artistInfo.name}
width={100}
height={100}
objectFit="cover"
className="rounded-full"
/>
<div>
<h2 className="text-3xl font-bold text-gray-800">{artistInfo.name}</h2>
<div className="flex items-center">
{artistInfo.nationality}
<FlagImage countryCode={artistInfo.countryCode} />
</div>
</div>
</CardHeader>
<CardBody className="space-y-4">
<p className="text-gray-700">{artistInfo.bio}</p>
<p>
<span className="font-semibold">Birth Year: </span>
{artistInfo.birthYear}
</p>
<p>
<span className="font-semibold">Death Year: </span>
{artistInfo.deathYear || 'N/A'}
</p>
<p>
<span className="font-semibold">Notable Works: </span>
{artistInfo.notableWorks.join(', ')}
</p>
</CardBody>
</Card>
);

const ArtDescription = () => {
const { id } = useParams();
const artItem = findArtItemById(id);
const artItem = getArtItemById(id);

if (!artItem) {
return <div className="text-xl font-bold p-4">Artwork not found</div>;
}

const flagSrc = getFlagSrc(artItem.countryCode);

return (
<div className="flex flex-col md:flex-row p-4 gap-6">
{/* Image Section */}
<div className="flex-1">
<Image
src={artItem.img}
Expand All @@ -32,105 +123,18 @@ const ArtDescription = () => {
className="shadow-lg rounded-lg"
/>
</div>

{/* Info Section */}
<div className="flex-1">
<Tabs aria-label="Options">
<Tab key="Art" title="Art Info">
<Card className="shadow-xl rounded-lg">
{/* Card Header */}
<CardHeader className="mb-1">
<div>
<h2 className="text-3xl font-bold text-gray-800">
{artItem.name}
</h2>
<p className="text-sm text-gray-600 mt-1">
by {artItem.artistInfo.name}
</p>
</div>
</CardHeader>

{/* Card Body */}
<CardBody className="space-y-4">
<div className="text-gray-700">{artItem.description}</div>

<div>
<span className="font-semibold">Year: </span>
{artItem.date}
</div>
<div>
<span className="font-semibold">Style: </span>
{artItem.style}
</div>
<div>
<span className="font-semibold">Dimensions: </span>
{artItem.dimensions}
</div>

{/* Location Detail */}
<div>
<span className="font-semibold">Location: </span>
{artItem.location}
{flagSrc && (
<img
alt={artItem.countryCode}
src={flagSrc}
className="inline-block w-6 ml-2"
/>
)}
</div>
</CardBody>
</Card>
<ArtInfo artItem={artItem} />
</Tab>

<Tab key="Artist" title="Artist Info">
<Card className="shadow-xl rounded-lg">
{/* Card Header */}
<CardHeader className="mb-1">
<h2 className="text-3xl font-bold text-gray-800">
{artItem.artistInfo.name}
</h2>
</CardHeader>

{/* Card Body */}
<CardBody className="space-y-4">
<div className="text-gray-700">{artItem.artistInfo.bio}</div>
<div>
<span className="font-semibold">Birth Year: </span>
{artItem.artistInfo.birthYear}
</div>
<div>
<span className="font-semibold">Death Year: </span>
{artItem.artistInfo.deathYear || 'N/A'}
</div>
<div>
<span className="font-semibold">Nationality: </span>
{artItem.artistInfo.nationality}
</div>
{/* Add other artist information fields here */}
</CardBody>
</Card>
<ArtistDetails artistInfo={artItem.artistInfo} />
</Tab>
</Tabs>
</div>
</div>
);
};

const findArtItemById = (id) => {
for (const listKey in allLists) {
if (Object.prototype.hasOwnProperty.call(allLists, listKey)) {
const item = allLists[listKey].find((item) => item.id.toString() === id);
if (item) return item;
}
}
return null;
};

const getFlagSrc = (countryCode) => {
return countryCode
? `http://purecatamphetamine.github.io/country-flag-icons/3x2/${countryCode}.svg`
: '';
};

export default ArtDescription;

0 comments on commit 2d75056

Please sign in to comment.