doing with antd and now goiong to just do it myself
This commit is contained in:
+63
-5
@@ -16,7 +16,8 @@ import { BsThreeDots } from "react-icons/bs";
|
|||||||
import { UserStatus, User } from '../../models/user'
|
import { UserStatus, User } from '../../models/user'
|
||||||
import { KeyCode } from '../../globals/keycode'
|
import { KeyCode } from '../../globals/keycode'
|
||||||
|
|
||||||
import { Tabs } from "antd";
|
import { Tabs } from 'antd';
|
||||||
|
const { TabPane } = Tabs;
|
||||||
|
|
||||||
let testFriends = [
|
let testFriends = [
|
||||||
{
|
{
|
||||||
@@ -261,14 +262,71 @@ export default class Demo extends React.Component<MyProps, MyState> {
|
|||||||
|
|
||||||
{/* rooms */}
|
{/* rooms */}
|
||||||
<section className='p-5 flex flex-col bg-gray-100 bg-opacity-25 rounded-lg shadow-md'>
|
<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>
|
<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'>
|
<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
|
Create
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<BsThreeDots className='text-xl text-white' />
|
<BsThreeDots className='text-xl text-white' />
|
||||||
</span>
|
</span>
|
||||||
|
|||||||
@@ -89,3 +89,19 @@ p {
|
|||||||
@tailwind base;
|
@tailwind base;
|
||||||
@tailwind components;
|
@tailwind components;
|
||||||
@tailwind utilities;
|
@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;
|
||||||
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user