Software-Mac/spacedrive
Software-Mac/spacedrive
1
0
Fork 0
mirror of https://github.com/spacedriveapp/spacedrive synced 2024-07-18 20:09:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

SearchBar Logo fix (#310)

Browse source 
* SearchBar Component

* showing cmd+k for macOS&web

Co-authored-by: Ahriox <28069568+Ahriox@users.noreply.github.com>
This commit is contained in:
Alex 2022-07-12 12:33:00 +01:00 committed by GitHub
parent 982bc40b66
commit fadd165247
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 21 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
packages/interface/src/components/layout/TopBar.tsx
View file

@ -13,8 +13,9 @@ import {
Tag,
TerminalWindow
} from 'phosphor-react';
import React, { DetailedHTMLProps, HTMLAttributes } from 'react';
import React, { DetailedHTMLProps, HTMLAttributes, useContext } from 'react';
import { useNavigate } from 'react-router-dom';
import { AppPropsContext } from '../../AppPropsContext';
import { Shortcut } from '../primitive/Shortcut';
import { DefaultProps } from '../primitive/types';
@ -28,6 +29,7 @@ export interface TopBarButtonProps
left?: boolean;
right?: boolean;
}
interface SearchBarProps extends DefaultProps {}
const TopBarButton: React.FC<TopBarButtonProps> = ({ icon: Icon, ...props }) => {
return (
@ -49,6 +51,23 @@ const TopBarButton: React.FC<TopBarButtonProps> = ({ icon: Icon, ...props }) =>
);
};
const SearchBar: React.FC<SearchBarProps> = (props) => { //TODO: maybe pass the appProps, so we can have the context in the TopBar if needed again
const appProps = useContext(AppPropsContext);
return (
<div className="relative flex h-7">
<input
placeholder="Search"
className="w-32 h-[30px] focus:w-52 text-sm p-3 rounded-lg outline-none focus:ring-2 placeholder-gray-400 dark:placeholder-gray-500 bg-[#F6F2F6] border border-gray-50 dark:bg-gray-650 dark:border-gray-550 focus:ring-gray-100 dark:focus:ring-gray-600 transition-all"
/>
<div className="space-x-1 absolute top-[2px] right-1">
<Shortcut chars={ appProps?.platform === "macOS" || appProps?.platform === "browser" ? "⌘K" : "CTRL+K" } />
{/* <Shortcut chars="S" /> */}
</div>
</div>
);
}
export const TopBar: React.FC<TopBarProps> = (props) => {
const { locationId } = useExplorerStore();
const { mutate: generateThumbsForLocation } = useLibraryCommand('GenerateThumbsForLocation', {
@ -88,16 +107,7 @@ export const TopBar: React.FC<TopBarProps> = (props) => {
<TopBarButton icon={FolderPlus} />
<TopBarButton icon={TerminalWindow} />
</div>
<div className="relative flex h-7">
<input
placeholder="Search"
className="w-32 h-[30px] focus:w-52 text-sm p-3 rounded-lg outline-none focus:ring-2 placeholder-gray-400 dark:placeholder-gray-500 bg-[#F6F2F6] border border-gray-50 dark:bg-gray-650 dark:border-gray-550 focus:ring-gray-100 dark:focus:ring-gray-600 transition-all"
/>
<div className="space-x-1 absolute top-[2px] right-1">
<Shortcut chars="⌘K" />
{/* <Shortcut chars="S" /> */}
</div>
</div>
<SearchBar />
<div className="flex mx-8 space-x-2">
<TopBarButton icon={Key} />
<TopBarButton icon={Cloud} />