talksik/nirvana
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

doing with antd and now goiong to just do it myself

Browse Source
This commit is contained in:
Arjun Patel
2022-01-11 17:20:42 -08:00
parent 8f85b9d9e1
commit a13d3b4297
2 changed files with 79 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/teams/demo.tsx
+63 -5
View File
@@ -16,7 +16,8 @@ import { BsThreeDots } from "react-icons/bs";
import { UserStatus, User } from '../../models/user'
import { KeyCode } from '../../globals/keycode'
import { Tabs } from "antd";
import { Tabs } from 'antd';
const { TabPane } = Tabs;
let testFriends = [
{
@@ -261,14 +262,71 @@ export default class Demo extends React.Component<MyProps, MyState> {
{/* rooms */}
<section className='p-5 flex flex-col bg-gray-100 bg-opacity-25 rounded-lg shadow-md'>
<span className='flex flex-row justify-end space-x-2 pb-5 items-center'>
<span className='flex flex-row justify-end space-x-3 pb-5 items-center'>
<span className="text-white mr-auto">ROOMS</span>
<FaBroom className='text-xl text-white' />
<Tabs defaultActiveKey="1" className='text-white'>
<TabPane
tab={
<span>
All
</span>
}
key="1"
>
</TabPane>
<TabPane
tab={
<span>
Live
</span>
}
className='text-white'
key="2"
>
</TabPane>
<TabPane
tab={
<span>
Scheduled
</span>
}
className='text-white'
key="3"
>
</TabPane>
<TabPane
tab={
<span>
Recurring
</span>
}
className='text-white'
key="4"
>
tetasedtg
</TabPane>
<TabPane
tab={
<span>
Archive
</span>
}
className='text-white'
key="5"
>
</TabPane>
</Tabs>
<span className='text-sm text-gray-300 flex flex-row items-center'>
TODAY <FaAngleDown />
</span>
<button className='bg-transparent hover:bg-white text-white font-semibold hover:text-black py-1 px-4 border border-white-500 hover:border-transparent rounded'>
Create
</button>
Create
</button>
<BsThreeDots className='text-xl text-white' />
</span>
styles/globals.css
+16
View File
@@ -89,3 +89,19 @@ p {
@tailwind base;
@tailwind components;
@tailwind utilities;
.ant-tabs-nav {
@apply m-0 !important;
}
.ant-tabs-tab {
@apply text-gray-300 pb-3 pt-1 !important;
}
.ant-tabs-tab-btn {
@apply text-gray-300 !important;
}
.ant-tabs-tab-active {
@apply text-gray-300 !important;
}
.ant-tabs-ink-bar {
@apply text-white bg-white !important;
}