start

src/components/ranking/tab.js

@@ -0,0 +1,26 @@
+import ButtonGroup from '../shared/buttons/button-group';
+import NavLink from '../shared/buttons/nav-link';
+import { useParams } from 'react-router-dom';
+
+function RankingTab() {
+  const { rankType } = useParams();
+
+  return (
+    <ButtonGroup className='mx-auto mb-16 w-min'>
+      <NavLink to='/ranking/daily' color={rankType === 'daily' ? 'blue' : 'gray'}>
+        روزانه
+      </NavLink>
+      <NavLink to='/ranking/weekly' color={rankType === 'weekly' ? 'blue' : 'gray'}>
+        هفتگی
+      </NavLink>
+      <NavLink to='/ranking/monthly' color={rankType === 'monthly' ? 'blue' : 'gray'}>
+        ماهانه
+      </NavLink>
+      <NavLink to='/ranking' color={rankType ? 'gray' : 'blue'}>
+        کلی
+      </NavLink>
+    </ButtonGroup>
+  );
+}
+
+export default RankingTab;