Skip to content

Commit

Permalink
Merge pull request #2 from Kyziq/matrepsukun
Browse files Browse the repository at this point in the history
  • Loading branch information
kyziq authored Jan 9, 2024
2 parents 0cbee59 + 53dfdba commit e48dc8c
Show file tree
Hide file tree
Showing 9 changed files with 110 additions and 56 deletions.
7 changes: 6 additions & 1 deletion src/App.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,9 @@ import Navbar from './components/Navbar';
import Home from './pages/Home';
import Test from './pages/Test';
import Footer from './components/Footer';
import ErrorPage from './pages/Error';
import TopPicks from './pages/TopPicks';

function App() {
return (
<div className="flex flex-col justify-start items-start min-h-screen bg-gray-100">
Expand All @@ -11,8 +14,10 @@ function App() {

<Routes>
<Route exact path="/artistry-hub/" element={<Home />} />
<Route exact path="/test" element={<Test />} />
<Route exact path="/artistry-hub/test" element={<Test />} />
<Route exact path="/artistry-hub/top-picks" element={<TopPicks />} />
{/* <Route component={GenericNotFound} /> */}
<Route path="*" element={<ErrorPage />} />
</Routes>
</Router>
<Footer />
Expand Down
Binary file added src/assets/images/4errorPage/404image.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 2 additions & 0 deletions src/data/list/abstracts-list.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ export const abstractsList = [
dimensions: '170.2 cm x 137.2 cm',
style: 'Abstract Expressionism',
artistInfo: artists['Jasper Johns'] || {},
likes: 1,
},
{
id: 1002,
Expand All @@ -28,5 +29,6 @@ export const abstractsList = [
dimensions: '200.7 cm x 175.3 cm',
style: 'Abstract Expressionism',
artistInfo: artists['Willem de Kooning'] || {},
likes: 3,
},
];
3 changes: 3 additions & 0 deletions src/data/list/landscapes-list.js
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ export const landscapesList = [
dimensions: '73.7 cm x 92.1 cm',
style: 'Post-Impressionism',
artistInfo: artists['Vincent Van Gogh'] || {},
likes: 6,
},
{
id: 2002,
Expand All @@ -28,6 +29,7 @@ export const landscapesList = [
location: 'Private Collection',
dimensions: '69.8 cm x 119.4 cm',
style: 'Rococo',
likes: 9,
},
{
id: 2003,
Expand All @@ -41,5 +43,6 @@ export const landscapesList = [
'Huntington Library, Art Museum, and Botanical Gardens, California',
dimensions: '178 cm x 122 cm',
style: 'Rococo',
likes: 5,
},
];
9 changes: 9 additions & 0 deletions src/data/list/paintings-list.js
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ export const paintingsList = [
dimensions: '73 cm x 92.5cm',
style: 'Impressionism',
artistInfo: artists['Claude Monet'] || {},
likes: 13,
},
{
id: 3002,
Expand All @@ -35,6 +36,7 @@ export const paintingsList = [
dimensions: '243.9 cm x 233.7 cm',
style: 'Cubism',
artistInfo: artists['Pablo Picasso'] || {},
likes: 19,
},
{
id: 3003,
Expand All @@ -48,6 +50,7 @@ export const paintingsList = [
dimensions: '20.1 cm x 20.1cm',
style: 'Floral',
artistInfo: artists['Mariam Omar'] || {},
likes: 8,
},
{
id: 3004,
Expand All @@ -61,6 +64,7 @@ export const paintingsList = [
dimensions: '15.1 cm x 20.1cm',
style: 'Floral',
artistInfo: artists['Mariam Omar'] || {},
likes: 11,
},
{
id: 3005,
Expand All @@ -74,6 +78,7 @@ export const paintingsList = [
dimensions: '78 cm x 78 cm',
style: 'Symbolism, Art Nouveau',
artistInfo: artists['Gustav Klimt'] || {},
likes: 18,
},
{
id: 3006,
Expand All @@ -87,6 +92,7 @@ export const paintingsList = [
dimensions: '84.1 cm x 152.4 cm',
style: 'American Realism',
artistInfo: artists['Edward Hopper'] || {},
likes: 6,
},
{
id: 3007,
Expand All @@ -100,6 +106,7 @@ export const paintingsList = [
dimensions: '71.4 cm x 91.4 cm',
style: 'American Realism',
artistInfo: artists['Edward Hopper'] || {},
likes: 2,
},
{
id: 3008,
Expand All @@ -113,6 +120,7 @@ export const paintingsList = [
dimensions: '71.4 cm x 102.2 cm',
style: 'American Realism',
artistInfo: artists['Edward Hopper'] || {},
likes: 1,
},
{
id: 3009,
Expand All @@ -126,5 +134,6 @@ export const paintingsList = [
dimensions: '365 cm x 260 cm (when opened)',
style: 'Northern Renaissance',
artistInfo: artists['Jan Van Eyck'] || {},
likes: 0,
},
];
7 changes: 7 additions & 0 deletions src/data/list/portraits-list.js
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ export const portraitsList = [
dimensions: '77 cm x 53 cm',
style: 'Renaissance',
artistInfo: artists['Leonardo Da Vinci'] || {},
likes: 36,
},
{
id: 4002,
Expand All @@ -33,6 +34,7 @@ export const portraitsList = [
dimensions: '144.3 cm x 162.5 cm',
style: 'Realism',
artistInfo: artists['James Abbott McNeill Whistler'] || {},
likes: 24,
},
{
id: 4003,
Expand All @@ -46,6 +48,7 @@ export const portraitsList = [
dimensions: '44.5 cm x 39 cm',
style: 'Baroque',
artistInfo: artists['Johannes Vermeer'] || {},
likes: 19,
},
{
id: 4004,
Expand All @@ -59,6 +62,7 @@ export const portraitsList = [
dimensions: '180 cm x 180 cm',
style: 'Symbolism, Art Nouveau',
artistInfo: artists['Gustav Klimt'] || {},
likes: 2,
},
{
id: 4005,
Expand All @@ -72,6 +76,7 @@ export const portraitsList = [
dimensions: '138 cm x 138 cm',
style: 'Symbolism, Art Nouveau',
artistInfo: artists['Gustav Klimt'] || {},
likes: 13,
},
{
id: 4006,
Expand All @@ -85,6 +90,7 @@ export const portraitsList = [
dimensions: '82.2 cm x 60 cm',
style: 'Northern Renaissance',
artistInfo: artists['Jan Van Eyck'] || {},
likes: 11,
},
{
id: 4007,
Expand All @@ -98,5 +104,6 @@ export const portraitsList = [
dimensions: '98.4 cm x 74.8 cm',
style: 'Romanticism',
artistInfo: artists['Caspar David Friedrich'] || {},
likes: 10,
},
];
28 changes: 28 additions & 0 deletions src/pages/Error.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import bobotimg from '../assets/images/4errorPage/404image.png';

const ErrorPage = () => {
return (
<div className="flex flex-col justify-start items-start min-h-screen bg-gray-100 overflow-hidden p-10 ml-20">
<div className="flex items-center justify-between w-full p-10 ml-20">
<div className="p-10 ml-20">
<h1 className="text-4xl font-bold text-black-500 mb-10 mt-12">
ArtistryHub.
</h1>
<h2 className="text-3xl font-bold text-black-500 mb-5">404 Error.</h2>
<h2 className="text-3xl font-bold text-red-500">
Oops! Something went wrong.
</h2>
<p className="font-bold text-gray-400 mt-3">
This page does not exist.
</p>
</div>
<div className="text-6xl p-10 ml-20">
{' '}
<img src={bobotimg} alt="Bot Image" />{' '}
</div>
</div>
</div>
);
};

export default ErrorPage;
55 changes: 0 additions & 55 deletions src/pages/Home.jsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,5 @@
import { useState, useEffect } from 'react';
import { Tooltip, Image } from '@nextui-org/react';
import { categories } from '../data/categories';
import { landscapesList } from '../data/list/landscapes-list';
import { paintingsList } from '../data/list/paintings-list';
import { portraitsList } from '../data/list/portraits-list';
import { abstractsList } from '../data/list/abstracts-list';
import MoreArt from './MoreArt';

const CategoryItem = ({ category }) => (
Expand All @@ -21,33 +16,7 @@ const CategoryItem = ({ category }) => (
</Tooltip>
);

const shuffleArray = (array) => {
const shuffledArray = [...array];
for (let i = shuffledArray.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[shuffledArray[i], shuffledArray[j]] = [shuffledArray[j], shuffledArray[i]];
}
return shuffledArray;
};

const Home = () => {
// State to hold the new list
const [newList, setNewList] = useState([]);

useEffect(() => {
// Combine and shuffle the lists when the component mounts
const combinedAndShuffledList = shuffleArray([
...landscapesList,
...paintingsList,
...portraitsList,
...abstractsList,
]);
setNewList(combinedAndShuffledList);
}, []);

// Limit the number of items to show in the Top Picks section
const limitedTopPicksList = newList.slice(0, 7);

return (
<div className="p-6">
<header className="text-2xl font-bold">ArtistryHub.</header>
Expand All @@ -63,30 +32,6 @@ const Home = () => {
</div>
</div>

<div className="mt-5">
<h2 className="text-2xl font-bold">Top Picks</h2>
<br />
<div className="top-picks-container flex overflow-x-auto">
{limitedTopPicksList.map((item) => (
<Tooltip
key={item.name}
content={'View ' + item.name}
placement="bottom"
showArrow
>
<div className="flex flex-col items-center mr-3">
<div className="w-48 h-48 rounded-lg overflow-hidden bg-white shadow-md border border-gray-300">
<img
src={item.img}
alt={item.name}
className="object-cover w-full h-full"
/>
</div>
</div>
</Tooltip>
))}
</div>
</div>
<div className="mt-5">
<MoreArt />
</div>
Expand Down
55 changes: 55 additions & 0 deletions src/pages/TopPicks.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
import { Tooltip } from '@nextui-org/react';
import { landscapesList } from '../data/list/landscapes-list';
import { paintingsList } from '../data/list/paintings-list';
import { portraitsList } from '../data/list/portraits-list';
import { abstractsList } from '../data/list/abstracts-list';

const Top = () => {
// Combine all lists
const combinedList = [
...landscapesList,
...paintingsList,
...portraitsList,
...abstractsList,
];

// Sort the combined list based on the "likes" attribute in descending order
const sortedList = combinedList.sort((a, b) => b.likes - a.likes);

// Limit the number of items to show in the Top Picks section
const limitedTopPicksList = sortedList.slice(0, 18);

return (
<div className="p-6">
<header className="text-2xl font-bold">ArtistryHub.</header>
<p className="text-gray-700">Explore our world of creative designs.</p>

<div className="mt-5">
<h2 className="text-2xl font-bold">Top Picks</h2>
<br />
<div className="top-picks-container flex flex-wrap overflow-x-auto">
{limitedTopPicksList.map((item) => (
<Tooltip
key={item.name}
content={'View ' + item.name}
placement="bottom"
showArrow
>
<div className="flex flex-col items-center mr-3 mb-3">
<div className="w-48 h-48 rounded-lg overflow-hidden bg-white shadow-md border border-gray-300">
<img
src={item.img}
alt={item.name}
className="object-cover w-full h-full"
/>
</div>
</div>
</Tooltip>
))}
</div>
</div>
</div>
);
};

export default Top;

0 comments on commit e48dc8c

Please sign in to comment.