DaX/Filamenteka
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Center tabs and move color request to dedicated tab

Browse Source 
- Centered tab navigation for better visual balance
- Created dedicated Color Request tab with informative layout
- Removed standalone color request button from main actions
- Added statistics and info to color request section
- Shortened 'Oprema i Delovi' to just 'Oprema' for cleaner tabs
This commit is contained in:
DaX
2025-08-29 13:22:34 +02:00
parent 2fefc805ef
commit 59304a88f4
3 changed files with 86 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
app/page.tsx
View File

@@ -3,10 +3,10 @@
import { useState, useEffect } from 'react';
import { FilamentTableV2 } from '../src/components/FilamentTableV2';
import { SaleCountdown } from '../src/components/SaleCountdown';
import ColorRequestModal from '../src/components/ColorRequestModal';
import TabbedNavigation from '../src/components/TabbedNavigation';
import PrintersTable from '../src/components/PrintersTable';
import GearTable from '../src/components/GearTable';
import ColorRequestSection from '../src/components/ColorRequestSection';
import { Filament } from '../src/types/filament';
import { filamentService } from '../src/services/api';
import { trackEvent } from '../src/components/MatomoAnalytics';
@@ -18,7 +18,6 @@ export default function Home() {
const [darkMode, setDarkMode] = useState(false);
const [mounted, setMounted] = useState(false);
const [resetKey, setResetKey] = useState(0);
const [showColorRequestModal, setShowColorRequestModal] = useState(false);
const [activeTab, setActiveTab] = useState('filaments');
// Removed V1/V2 toggle - now only using V2
@@ -179,19 +178,6 @@ export default function Home() {
</svg>
Pozovi +381 67 710 2845
</a>
<button
onClick={() => {
setShowColorRequestModal(true);
trackEvent('Navigation', 'Request Color', 'Homepage');
}}
className="inline-flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-purple-500 to-purple-600 hover:from-purple-600 hover:to-purple-700 text-white font-semibold rounded-lg shadow-lg hover:shadow-xl transition-all duration-200 transform hover:scale-105"
>
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" />
</svg>
Zatraži Novu Boju
</button>
</div>
{/* Tabs Navigation */}
@@ -207,6 +193,15 @@ export default function Home() {
</svg>
)
},
{
id: 'color-request',
label: 'Zatraži Boju',
icon: (
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" />
</svg>
)
},
{
id: 'printers',
label: 'Štampači',
@@ -218,7 +213,7 @@ export default function Home() {
},
{
id: 'gear',
label: 'Oprema i Delovi',
label: 'Oprema',
icon: (
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
@@ -257,6 +252,8 @@ export default function Home() {
</>
)}
{activeTab === 'color-request' && <ColorRequestSection />}
{activeTab === 'printers' && <PrintersTable />}
{activeTab === 'gear' && <GearTable />}
@@ -281,12 +278,6 @@ export default function Home() {
</div>
</div>
</footer>
{/* Color Request Modal */}
<ColorRequestModal
isOpen={showColorRequestModal}
onClose={() => setShowColorRequestModal(false)}
/>
</div>
);
}

72
src/components/ColorRequestSection.tsx Normal file
View File

@@ -0,0 +1,72 @@
'use client';
import React, { useState } from 'react';
import ColorRequestModal from './ColorRequestModal';
import { trackEvent } from './MatomoAnalytics';
export default function ColorRequestSection() {
const [showModal, setShowModal] = useState(false);
return (
<div className="max-w-2xl mx-auto">
<div className="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-8">
<div className="text-center">
<div className="flex justify-center mb-6">
<div className="p-4 bg-purple-100 dark:bg-purple-900/30 rounded-full">
<svg className="w-16 h-16 text-purple-600 dark:text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" />
</svg>
</div>
</div>
<h2 className="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4">
Zatražite Novu Boju
</h2>
<p className="text-gray-600 dark:text-gray-400 mb-8 max-w-md mx-auto">
Ne možete pronaći boju koju tražite u našoj ponudi?
Javite nam koju boju želite i mi ćemo je nabaviti za vas!
</p>
<div className="space-y-4">
<button
onClick={() => {
setShowModal(true);
trackEvent('Navigation', 'Request Color', 'Color Request Tab');
}}
className="inline-flex items-center gap-3 px-8 py-4 bg-gradient-to-r from-purple-500 to-purple-600 hover:from-purple-600 hover:to-purple-700 text-white font-semibold rounded-lg shadow-lg hover:shadow-xl transition-all duration-200 transform hover:scale-105"
>
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
</svg>
Pošaljite Zahtev za Boju
</button>
</div>
<div className="mt-12 grid grid-cols-1 sm:grid-cols-3 gap-6">
<div className="text-center">
<div className="text-3xl font-bold text-purple-600 dark:text-purple-400">1-3</div>
<div className="text-sm text-gray-600 dark:text-gray-400 mt-1">Dana za odgovor</div>
</div>
<div className="text-center">
<div className="text-3xl font-bold text-purple-600 dark:text-purple-400">100+</div>
<div className="text-sm text-gray-600 dark:text-gray-400 mt-1">Dostupnih boja</div>
</div>
<div className="text-center">
<div className="text-3xl font-bold text-purple-600 dark:text-purple-400">7-14</div>
<div className="text-sm text-gray-600 dark:text-gray-400 mt-1">Dana za nabavku</div>
</div>
</div>
<div className="mt-8 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
<p className="text-sm text-blue-800 dark:text-blue-300">
<strong>Napomena:</strong> Minimalna količina za naručivanje novih boja je 2 rolne.
</p>
</div>
</div>
</div>
<ColorRequestModal isOpen={showModal} onClose={() => setShowModal(false)} />
</div>
);
}

2
src/components/TabbedNavigation.tsx
View File

@@ -17,7 +17,7 @@ interface TabbedNavigationProps {
export default function TabbedNavigation({ tabs, activeTab, onTabChange }: TabbedNavigationProps) {
return (
<div className="border-b border-gray-200 dark:border-gray-700">
<nav className="-mb-px flex space-x-8" aria-label="Tabs">
<nav className="-mb-px flex justify-center space-x-4 sm:space-x-8" aria-label="Tabs">
{tabs.map((tab) => (
<button
key={tab.id}