Ryan/Reactive-Resume
1
0
Fork 0
mirror of https://github.com/AmruthPillai/Reactive-Resume.git synced 2025-11-16 09:41:31 +10:00
Code Issues Packages Projects Releases Wiki Activity

styling, formatting, validation

Browse Source
This commit is contained in:
Amruth Pillai
2020-03-25 11:39:33 +05:30
parent 8521b1125b
commit 36800a944e
11 changed files with 143 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
src/shared/TabBar.js
View File

@ -1,27 +1,58 @@
import React from 'react';
import React, { useRef } from 'react';
const TabBar = ({ tabs, currentTab, setCurrentTab }) => {
const tabsRef = useRef(null);
const scrollBy = x => {
const index = tabs.indexOf(currentTab);
tabsRef.current.scrollLeft += x;
if (x < 0 && index > 0) {
setCurrentTab(tabs[index - 1]);
}
if (x > 0 && index < tabs.length - 1) {
setCurrentTab(tabs[index + 1]);
}
};
return (
<ul id="tabs" className="my-4 flex items-center overflow-x-scroll">
{tabs.map(tab =>
currentTab === tab ? (
<li key={tab} className="mx-1">
<div className="whitespace-no-wrap bg-gray-700 text-white rounded-md text-sm py-2 px-6 font-medium">
{tab}
</div>
</li>
) : (
<li key={tab} className="mx-1">
<div
className="bg-white whitespace-no-wrap rounded-md cursor-pointer text-sm py-2 px-6 font-medium hover:bg-gray-200"
onClick={() => setCurrentTab(tab)}
>
{tab}
</div>
</li>
),
)}
</ul>
<div className="my-6 mx-4 flex items-center">
<div
className="flex mr-1 cursor-pointer select-none text-gray-600 hover:text-gray-800"
onClick={() => scrollBy(-100)}
>
<i className="material-icons">chevron_left</i>
</div>
<ul id="tabs" ref={tabsRef} className="flex overflow-x-scroll">
{tabs.map(tab =>
currentTab === tab ? (
<li key={tab} className="mx-1">
<div className="whitespace-no-wrap bg-gray-700 text-white rounded-md text-sm py-2 px-6 font-medium">
{tab}
</div>
</li>
) : (
<li key={tab} className="mx-1">
<div
className="bg-white whitespace-no-wrap rounded-md cursor-pointer text-sm py-2 px-6 font-medium hover:bg-gray-200"
onClick={() => setCurrentTab(tab)}
>
{tab}
</div>
</li>
),
)}
</ul>
<div
className="flex ml-1 cursor-pointer select-none text-gray-600 hover:text-gray-800"
onClick={() => scrollBy(100)}
>
<i className="material-icons">chevron_right</i>
</div>
</div>
);
};