From 8724d5f7d0d1407f6f1a08d2455805a4a2f7e5ce Mon Sep 17 00:00:00 2001
From: Arjun Patel <patel.arjun50@gmail.com>
Date: Tue, 11 Jan 2022 17:36:59 -0800
Subject: [PATCH] nicer custom tab pane

---
 pages/teams/demo.tsx | 64 +++++++-------------------------------------
 1 file changed, 9 insertions(+), 55 deletions(-)

diff --git a/pages/teams/demo.tsx b/pages/teams/demo.tsx
index f0b59fc..ad9bc08 100644
--- a/pages/teams/demo.tsx
+++ b/pages/teams/demo.tsx
@@ -264,67 +264,21 @@ export default class Demo extends React.Component<MyProps, MyState> {
                             <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-3 pb-5 items-center'>
                                     <span className="text-white mr-auto">ROOMS</span>
+                                    
+                                    {/* tab page */}
+                                    <span className='flex flex-row space-x-5 uppercase'>
+                                        <span className='underline underline-offset-8 decoration-white text-white hover:text-white hover:cursor-pointer'>All</span>
 
-                                    <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"
-                                            >
+                                        <span className='text-gray-300 hover:text-white hover:cursor-pointer'>Live</span>
 
-                                                tetasedtg
-                                        </TabPane>
+                                        <span className='text-gray-300 hover:text-white hover:cursor-pointer'>Scheduled</span>
+
+                                        <span className='text-gray-300 hover:text-white hover:cursor-pointer'>Recurring</span>
 
-                                        <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='p-2 text-sm text-white font-semibold bg-cyan-500 shadow-lg rounded-lg'>
                                         Create
                                     </button>