47 lines
1.5 KiB
JavaScript
47 lines
1.5 KiB
JavaScript
import React, { useState } from 'react';
|
|
import CategorySelector from "../components/CategorySelector"; // Імпортуємо твій новий компонент
|
|
import "./styles/ShopTab.css";
|
|
|
|
const ShopTab = () => {
|
|
const [category, setCategory] = useState('ships');
|
|
const categories = ['Featured', 'ships', 'weapons', 'armors', 'cosmetics', 'materials'];
|
|
|
|
return (
|
|
<div className="tab-content active">
|
|
<div className="shop-container">
|
|
|
|
<div className="shop-header">
|
|
{/* Використовуємо універсальний компонент замість ручного мапінгу */}
|
|
<CategorySelector
|
|
categories={categories}
|
|
activeCategory={category}
|
|
onCategoryChange={setCategory}
|
|
/>
|
|
|
|
<div className="shop-resources">
|
|
<div className="card-resource">
|
|
<i className="fas fa-gem"></i>
|
|
<span id="gems">10</span>
|
|
</div>
|
|
<div className="card-resource">
|
|
<i className="fas fa-coins"></i>
|
|
<span id="credits">1,000</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="shop-content">
|
|
<div className="shop-items-container">
|
|
<div className="shop-items">
|
|
<p className="status-text">Browsing {category}...</p>
|
|
{/* Тут буде логіка відображення товарів */}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ShopTab;
|