Issue 8 individual art pages

[hanminh1203]

Change Summary

Improved responsive design and refactored artwork pages to follow Next.js best practices. Centralized mock data generation into a reusable hook and added proper error handling for empty database states.

Changes Made

• Refactored ButtonGallery component to use Next.js Link component properly
• Added placeholder SVG icon for artworks without images
• Centralized mock data generation in useArtworkData.ts hook
• Added error handling in getServerSideProps to return mock data when API fails or DB is empty
• Improved responsive layouts with proper spacing and mobile-first approach
• Fixed TypeScript type issues with Next.js route parameters and PageResult types

Change Form

• The pull request title has an issue number (Individual art pages #8)
• The change works by "Smoke testing" or quick testing
• The change has tests - NA: Mock data hook doesn't require unit tests at this stage
• The change has documentation - NA: Changes are self-explanatory code refactoring

Other Information

• Add module django_filters.rest_framework - need confirmation

Testing Notes:

• Tested with empty database - placeholder icons display correctly
• Tested navigation between gallery and individual artwork pages
• Verified responsive layout on mobile and desktop viewports

Related issue

• Resolve Individual art pages #8

[laurenpudz]

Please make sure you import SVGs rather than defining inline

[RadinMan]

Hi @hanminh1203 and team,

I am working on Incorporate art into game showcase page. Can you please explain how your artwork api is working/specific route?
Additionally, whilst my group and I are working on our issue, we will pull from your branch (this branch) so we have some database artwork schema to work with.
Appreciate the assistance mate.

[Karl-Sue]

Hi @RadinMan
Our api is actually developed separately from our frontend. If you need, you can pull branch issue-8-merge-40, where we make regular update on integrating front + backend. Currently, we only have 1 api /arts/featured that returns as followed:

[
    {
        "art_id": 1,
        "name": "art1",
        "description": "hello art 1",
        "media": "http://localhost:8000/media/art/download.png",
        "active": true,
        "source_game_id": 1,
        "source_game_name": "game 1",
        "contributors": [
            {
                "id": 1,
                "member_id": 1,
                "member_name": "member1",
                "role": "admin"
            }
        ],
        "showcase_description": "this is good"
    }
]

[laurenpudz]

closing as addressed in PR #137