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

nice search and sizing

Browse Source
This commit is contained in:
talksik
2022-05-16 18:36:42 -05:00
parent de4400de25
commit 3cac6d7359
2 changed files with 7 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/desktop/src/tree/protected/terminal/panels/MainPanel.tsx
+1 -1
View File
@@ -177,7 +177,7 @@ function LineDetails() {
{/* live broadcasters */} {/* live broadcasters */}
<div className="flex flex-col items-center gap-2 mx-auto w-full max-w-lg mt-auto"> <div className="flex flex-col items-center gap-2 mx-auto w-full max-w-lg mt-auto">
<span className={'flex flex-row gap-2 items-center text-teal-500 text-sm'}> <span className={'flex flex-row gap-2 items-center text-teal-500 text-sm'}>
<FiSun className="animate-ping" /> <FiSun className="animate-pulse" />
<span>right now</span> <span>right now</span>
</span> </span>
packages/desktop/src/tree/protected/terminal/panels/SidePanel.tsx
+6 -6
View File
@@ -1,7 +1,7 @@
import { LineMemberState } from '@nirvana/core/models/line.model'; import { LineMemberState } from '@nirvana/core/models/line.model';
import MasterLineData from '@nirvana/core/models/masterLineData.model'; import MasterLineData from '@nirvana/core/models/masterLineData.model';
import { Avatar, Skeleton, Tooltip } from 'antd'; import { Avatar, Skeleton, Tooltip } from 'antd';
import React, { useCallback, useMemo, useEffect } from 'react'; import React, { useCallback, useMemo, useEffect, useState } from 'react';
import { FaPlus, FaSearch } from 'react-icons/fa'; import { FaPlus, FaSearch } from 'react-icons/fa';
import { FiActivity, FiSearch, FiSun } from 'react-icons/fi'; import { FiActivity, FiSearch, FiSun } from 'react-icons/fi';
import useRealTimeRooms from '../../../../providers/RealTimeRoomProvider'; import useRealTimeRooms from '../../../../providers/RealTimeRoomProvider';
@@ -16,6 +16,8 @@ export default function SidePanel() {
// using merely for loading state...better to add to realtimeroom context? // using merely for loading state...better to add to realtimeroom context?
const { rooms: initialRoomsFetch } = useRooms(); const { rooms: initialRoomsFetch } = useRooms();
const [searchQuery, setSearchQuery] = useState<string>('');
const { roomsMap, handleSelectLine, selectedLineId } = useRealTimeRooms(); const { roomsMap, handleSelectLine, selectedLineId } = useRealTimeRooms();
const [toggleTunedLines, allLines] = useMemo(() => { const [toggleTunedLines, allLines] = useMemo(() => {
@@ -33,7 +35,7 @@ export default function SidePanel() {
}, [roomsMap]); }, [roomsMap]);
return ( return (
<div className="flex flex-col w-[350px] relative group shadow-xl bg-white"> <div className="flex flex-col w-[400px] relative group shadow-xl bg-white">
<NavBar /> <NavBar />
<div className="px-4 flex flex-row items-center gap-2"> <div className="px-4 flex flex-row items-center gap-2">
@@ -42,10 +44,8 @@ export default function SidePanel() {
<input <input
placeholder="Search for people, channels, clips..." placeholder="Search for people, channels, clips..."
className="flex-1 bg-transparent placeholder-gray-300 placeholder:text-xs focus:outline-none" className="flex-1 bg-transparent placeholder-gray-300 placeholder:text-xs focus:outline-none"
onChange={() => { onChange={(e) => setSearchQuery(e.target.value)}
// value={searchQuery}
}}
value={''}
/> />
</div> </div>