Skip to content

Commit

Permalink
chore: refactor import paths and shuffle array
Browse files Browse the repository at this point in the history
  • Loading branch information
@kyziq
kyziq committed Jan 7, 2024
1 parent beafc9c commit 470ecf5
Show file tree
Hide file tree
Showing 2 changed files with 59 additions and 157 deletions.
160 changes: 3 additions & 157 deletions src/App.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,66 +1,12 @@
import { Tooltip } from '@nextui-org/react';
import { useState, useEffect } from 'react';
import { categories } from './data/categories';
import { landscapesList } from './data/landscapes-list';
import { paintingsList } from './data/paintings-list';
import { portraitsList } from './data/portraits-list';
import { abstractsList } from './data/abstracts-list';

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;
};
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Navbar from './components/Navbar';
import Home from './pages/Home';
import Test from './pages/Test';
import Footer from './pages/Footer';

function App() {
// Combine data from landscapesList, paintingsList, and portraitsList
const combinedList = [
...landscapesList,
...paintingsList,
...portraitsList,
...abstractsList,
];

// Shuffle the combined list
const shuffledList = shuffleArray(combinedList);

// 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);

// Limit the number of items to show in the More Arts section
const limitedMoreArtsList = shuffledList.slice(0, 6); // Change the number as needed

// Separate limitedMoreArtsList into two parts
const moreArtsContainer1List = limitedMoreArtsList.slice(0, 3);
const moreArtsContainer2List = limitedMoreArtsList.slice(3, 6);

return (
<div className="flex flex-col justify-start items-start min-h-screen bg-gray-100 p-10 overflow-hidden">
<header className="text-2xl font-bold">ArtistryHub.</header>
<p className="text-gray-700">Explore our world of creative designs.</p>
<div className="flex flex-col justify-start items-start min-h-screen">
<div className="flex flex-col justify-start items-start min-h-screen bg-gray-100 overflow-hidden">
<Router>
<Navbar />

Expand All @@ -69,109 +15,9 @@ function App() {
<Route exact path="/test" element={<Test />} />
{/* <Route component={GenericNotFound} /> */}
</Routes>

<div className="flex flex-wrap justify-start items-center gap-4 mt-4">
{categories.map((category) => (
<Tooltip
key={category.name}
content={category.tooltip}
placement="top"
showArrow
>
<div className="flex flex-col items-center">
<div className="w-24 h-24 rounded-full overflow-hidden bg-white shadow-md">
<img
src={category.imageUrl}
alt={category.name}
className="object-cover w-full h-full"
/>
</div>
</div>
</Tooltip>
))}
</div>

<br />

<div className="mt-5">
<h2 className="text-xl 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>

<br />

<div className="mt-5">
<h2 className="text-xl font-bold">More Arts</h2>
<br />
<div className="flex">
<div className="more-arts-container-1 w-60 mr-2">
{moreArtsContainer1List.map((item) => (
<Tooltip
key={item.name}
content={'View ' + item.name}
placement="bottom"
showArrow
>
<div className="flex flex-row flex-col items-center mb-1">
<div className="w-50 rounded-lg bg-white shadow-md border border-gray-300">
<img
src={item.img}
alt={item.name}
className="object-cover w-full"
style={{ height: '100%' }}
/>
</div>
</div>
</Tooltip>
))}
</div>

<div className="more-arts-container-2 w-60 mr-2">
{moreArtsContainer2List.map((item) => (
<Tooltip
key={item.name}
content={'View ' + item.name}
placement="bottom"
showArrow
>
<div className="flex flex-row flex-col items-center mb-1">
<div className="w-50 rounded-lg bg-white shadow-md border border-gray-300">
<img
src={item.img}
alt={item.name}
className="object-cover w-full"
style={{ height: '100%' }}
/>
</div>
</div>
</Tooltip>
))}
</div>
</div>
</div>
</div>
<Footer />
</Router>

<Footer />
</div>
);
}
Expand Down
56 changes: 56 additions & 0 deletions src/pages/Home.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,10 @@
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';

const CategoryItem = ({ category }) => (
<Tooltip content={category.tooltip} placement="top" showArrow>
Expand All @@ -15,7 +20,33 @@ 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 @@ -30,6 +61,31 @@ 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>
);
};
Expand Down

0 comments on commit 470ecf5

Please sign in to comment.