navTabs.tsx 889 B

1234567891011121314151617181920212223242526272829
  1. 'use client';
  2. import './style.scss';
  3. import React from 'react';
  4. import Link from 'next/link';
  5. import { usePathname } from 'next/navigation';
  6. export default function NavTabs() {
  7. const pathname = usePathname();
  8. return (
  9. <div id="tabs">
  10. {[
  11. { href: "/profile", label: "내 정보" },
  12. { href: "/change-password", label: "비밀번호 변경" },
  13. { href: "/my-posts", label: "작성 게시글" },
  14. { href: "/my-comments", label: "작성 댓글" },
  15. { href: "/exp-logs", label: "경험치 내역" },
  16. { href: "/login-log", label: "로그인 기록" },
  17. { href: "/withdraw", label: "회원탈퇴" }
  18. ].map(({ href, label }, index, array) => (
  19. <React.Fragment key={href}>
  20. <Link href={href} className={pathname === href ? 'active' : ''}>{label}</Link>
  21. {index !== array.length - 1 && <span>&nbsp;</span>}
  22. </React.Fragment>
  23. ))}
  24. </div>
  25. );
  26. }