Skip to content

Commit f9929e6

Browse files
Charlie85270Charlie85270
authored
Merge pull request #85 from Charlie85270/feat/add-tabs
add tabs components
2 parents 2e9517f + 434d807 commit f9929e6

File tree

11 files changed

+135
-1
lines changed

11 files changed

+135
-1
lines changed

‎.DS_Store

0 Bytes
Binary file not shown.

‎components/kit/components/elements/index.tsx

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,11 +47,17 @@ const Elements: FC = () => {
4747
},
4848
{
4949
title: 'Skeleton',
50-
isNew: true,
5150
items: 3,
5251
img: 'images/sections/skeleton.png',
5352
link: '/components/skeleton',
5453
},
54+
{
55+
title: 'Tabs',
56+
isNew: true,
57+
items: 3,
58+
img: 'images/sections/tabs.png',
59+
link: '/components/tabs',
60+
},
5561
];
5662

5763
return <SectionDesc withPub id="elements" items={elementsSection} title="Elements" />;

‎components/kit/components/elements/tabs/BasicTabs.tsx

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
export default function BasicTabs() {
2+
return (
3+
<ul className="flex flex-wrap text-sm font-medium text-center text-gray-500 border-b border-gray-200 ">
4+
<li className="mr-2">
5+
<a href="#" className="inline-block p-4 text-gray-800 bg-white rounded-t-lg active ">
6+
Home
7+
</a>
8+
</li>
9+
<li className="mr-2">
10+
<a href="#" className="inline-block p-4 rounded-t-lg hover:text-gray-600 hover:bg-gray-50 ">
11+
Calendar
12+
</a>
13+
</li>
14+
<li className="mr-2">
15+
<a href="#" className="inline-block p-4 rounded-t-lg hover:text-gray-600 hover:bg-gray-50 ">
16+
Results
17+
</a>
18+
</li>
19+
<li className="mr-2">
20+
<a href="#" className="inline-block p-4 rounded-t-lg hover:text-gray-600 hover:bg-gray-50 ">
21+
Live
22+
</a>
23+
</li>
24+
</ul>
25+
);
26+
}

‎components/kit/components/elements/tabs/BasicTabsDisabled.tsx

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
export default function BasicTabsDisabled() {
2+
return (
3+
<ul className="flex flex-wrap text-sm font-medium text-center text-gray-500 border-b border-gray-200 ">
4+
<li className="mr-2">
5+
<a href="#" className="inline-block p-4 text-gray-800 bg-white rounded-t-lg active ">
6+
Home
7+
</a>
8+
</li>
9+
<li className="mr-2">
10+
<a href="#" className="inline-block p-4 rounded-t-lg hover:text-gray-600 hover:bg-gray-50 ">
11+
Calendar
12+
</a>
13+
</li>
14+
<li className="mr-2">
15+
<a href="#" className="inline-block p-4 rounded-t-lg hover:text-gray-600 hover:bg-gray-50 ">
16+
Results
17+
</a>
18+
</li>
19+
<li className="mr-2">
20+
<a href="#" className="inline-block p-4 rounded-t-lg hover:text-gray-600 hover:bg-gray-50 ">
21+
Live
22+
</a>
23+
</li>
24+
<li>
25+
<a className="inline-block p-4 text-gray-400 rounded-t-lg cursor-not-allowed dark:text-gray-500">
26+
Disabled
27+
</a>
28+
</li>
29+
</ul>
30+
);
31+
}

‎components/kit/components/elements/tabs/BasicTabsUnderline.tsx

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
export default function BasicTabsUnderline() {
2+
return (
3+
<div className="text-sm font-medium text-center text-gray-500 border-b border-gray-200 ">
4+
<ul className="flex flex-wrap -mb-px">
5+
<li className="mr-2">
6+
<a
7+
href="#"
8+
className="inline-block p-4 border-b-2 border-transparent rounded-t-lg hover:text-gray-600 hover:border-gray-300 "
9+
>
10+
Home
11+
</a>
12+
</li>
13+
<li className="mr-2">
14+
<a
15+
href="#"
16+
className="inline-block p-4 text-purple-600 border-b-2 border-purple-600 rounded-t-lg active "
17+
aria-current="page"
18+
>
19+
Calendar
20+
</a>
21+
</li>
22+
<li className="mr-2">
23+
<a
24+
href="#"
25+
className="inline-block p-4 border-b-2 border-transparent rounded-t-lg hover:text-gray-600 hover:border-gray-300 "
26+
>
27+
Results
28+
</a>
29+
</li>
30+
<li className="mr-2">
31+
<a
32+
href="#"
33+
className="inline-block p-4 border-b-2 border-transparent rounded-t-lg hover:text-gray-600 hover:border-gray-300 "
34+
>
35+
Live
36+
</a>
37+
</li>
38+
</ul>
39+
</div>
40+
);
41+
}

‎pages/components/tabs/index.tsx

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import React, { FC } from 'react';
2+
import AppLayout from '../../../components/layout/AppLayout';
3+
import ComponentLayout from '../../../components/layout/ComponentLayout';
4+
import SectionHeader from '../../../components/site/header/SectionHeader';
5+
import BasicTabs from '../../../components/kit/components/elements/tabs/BasicTabs';
6+
import BasicTabsDisabled from '../../../components/kit/components/elements/tabs/BasicTabsDisabled';
7+
import BasicTabsUnderline from '../../../components/kit/components/elements/tabs/BasicTabsUnderline';
8+
const ComponentsPage: FC = () => {
9+
return (
10+
<AppLayout
11+
title="Tabs free Tailwind components"
12+
desc="Tabs, banner, placeolder and more components for tailwind css"
13+
>
14+
<SectionHeader title="Tabs" />
15+
<ComponentLayout title="Simple Tabs" element={<BasicTabs />} component={BasicTabs} />
16+
<ComponentLayout
17+
title="Simple Tabs disabled"
18+
element={<BasicTabsDisabled />}
19+
component={BasicTabsDisabled}
20+
/>
21+
<ComponentLayout
22+
title="Simple Tabs underline"
23+
element={<BasicTabsUnderline />}
24+
component={BasicTabsUnderline}
25+
/>
26+
</AppLayout>
27+
);
28+
};
29+
30+
export default ComponentsPage;

‎public/.DS_Store

0 Bytes
Binary file not shown.

‎public/images/.DS_Store

0 Bytes
Binary file not shown.

‎public/images/sections/.DS_Store

0 Bytes
Binary file not shown.

‎public/images/sections/skeleton.png

36.9 KB
Loading

‎public/images/sections/tabs.png

24 KB
Loading

0 commit comments

Comments
 (0)