Hoya26/frontend/src/lib/components/CustomTabBar.svelte

<script lang="ts">
	import { goto } from "$app/navigation";
	import Icon from "@iconify/svelte";

	interface Props {
		currentRoute: string;
	}

	let { currentRoute }: Props = $props();

	const tabs = [
		{
			name: "Goals",
			route: "/community",
			icon: "ri:flag-fill",
			activeColor: "#34d399",
		},
		{
			name: "History",
			route: "/",
			icon: "ri:time-fill",
			activeColor: "#34d399",
		},
		{
			name: "Scan",
			route: "/",
			icon: "ri:camera-lens-fill",
			isCenter: true,
		},
		{
			name: "Report",
			route: "/report",
			icon: "ri:alarm-warning-fill",
			activeColor: "#ef4444",
		},
		{
			name: "Chat",
			route: "/chat",
			icon: "ri:chat-3-fill",
			activeColor: "#60a5fa",
		},
	];

	function navigateToTab(route: string) {
		goto(route);
	}

	function handleScan() {
		const event = new CustomEvent("scan");
		window.dispatchEvent(event);
	}
</script>

<div class="tab-bar-wrapper">
	<div class="tab-bar">
		{#each tabs as tab, index}
			{#if !tab.isCenter}
				<button
					class="tab-item"
					class:active={currentRoute === tab.route}
					onclick={() => navigateToTab(tab.route)}
					aria-label={tab.name}
				>
					<Icon
						icon={tab.icon}
						width="24"
						style="color: {currentRoute === tab.route
							? tab.activeColor
							: '#6b7280'};"
					/>
					<span
						class="tab-name"
						style="color: {currentRoute === tab.route
							? tab.activeColor
							: '#6b7280'};"
					>
						{tab.name}
					</span>
				</button>
			{/if}
			{#if index === 1}
				<button
					class="scan-button"
					onclick={handleScan}
					aria-label="Scan product"
				>
					<Icon
						icon="ri:camera-lens-fill"
						width="28"
						style="color: white;"
					/>
				</button>
			{/if}
		{/each}
	</div>
</div>

<style>
	.tab-bar-wrapper {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 0;
		z-index: 100;
	}

	.tab-bar {
		display: flex;
		align-items: center;
		justify-content: space-around;
		height: 80px;
		background: #0d2e25;
		border-top: 1px solid #1f473b;
		padding: 0 16px 16px;
	}

	.tab-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 4px;
		background: none;
		border: none;
		cursor: pointer;
		padding-top: 12px;
	}

	.tab-name {
		font-size: 10px;
		font-weight: 600;
		transition: color 0.15s;
	}

	.scan-button {
		width: 56px;
		height: 56px;
		background: #10b981;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		margin-bottom: 24px;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
		transition: transform 0.15s;
		border: 4px solid #051f18;
	}

	.scan-button:active {
		transform: scale(0.95);
	}
</style>