diff --git a/README.md b/README.md index ecb21127..3230c242 100644 --- a/README.md +++ b/README.md @@ -38,8 +38,8 @@ Check out [this project's issues](https://github.com/JamesHawkinss/movie-web/iss - [x] Add back link of results view - [x] Add results list end - [x] Store watched percentage -- [ ] Add Brand tag top left -- [ ] Add github and discord top right +- [x] Add Brand tag top left +- [X] Add github and discord top right - [x] Link Github and Discord in error boundary - [ ] Implement movie + series view - [ ] Global state for media objects diff --git a/src/components/Icon.tsx b/src/components/Icon.tsx index 206ecc0f..5875b1ad 100644 --- a/src/components/Icon.tsx +++ b/src/components/Icon.tsx @@ -11,6 +11,9 @@ export enum Icons { FILM = "film", DRAGON = "dragon", WARNING = "warning", + MOVIE_WEB = "movieWeb", + DISCORD = "discord", + GITHUB = "github", } export interface IconProps { @@ -31,6 +34,9 @@ const iconList: Record = { dragon: ``, warning: ``, arrowRight: ``, + movieWeb: ``, + discord: ``, + github: ``, }; export function Icon(props: IconProps) { diff --git a/src/components/Text/Link.tsx b/src/components/Text/Link.tsx index a16e5605..612a81e6 100644 --- a/src/components/Text/Link.tsx +++ b/src/components/Text/Link.tsx @@ -31,7 +31,7 @@ export function Link(props: LinkProps) { ); if (isExternal) - return {content}; + return {content}; else if (isInternal) return ( {content} diff --git a/src/components/layout/BrandPill.tsx b/src/components/layout/BrandPill.tsx new file mode 100644 index 00000000..7c4062ec --- /dev/null +++ b/src/components/layout/BrandPill.tsx @@ -0,0 +1,12 @@ +import { Icon, Icons } from 'components/Icon' +import { ReactNode } from 'react' + +export function BrandPill() { + + return ( +
+ + Movie Web +
+ ) +} \ No newline at end of file diff --git a/src/views/SearchView.tsx b/src/views/SearchView.tsx index 1ba85316..fa71e329 100644 --- a/src/views/SearchView.tsx +++ b/src/views/SearchView.tsx @@ -17,6 +17,7 @@ import { Title } from "components/text/Title"; import { useDebounce } from "hooks/useDebounce"; import { useLoading } from "hooks/useLoading"; import { IconPatch } from "components/buttons/IconPatch"; +import { BrandHeader } from "components/layout/BrandHeader"; function SearchLoading() { return ; @@ -140,29 +141,32 @@ export function SearchView() { }, [debouncedSearch]); return ( - - {/* input section */} -
-
- Because watching legally is boring - What movie do you want to watch? + <> + + + {/* input section */} +
+
+ Because watching legally is boring + What movie do you want to watch? +
+
- -
- - {/* results view */} - {loading ? ( - - ) : searching ? ( - setSearch((v) => ({ searchQuery: "", type: v.type }))} - /> - ) : null} - + + {/* results view */} + {loading ? ( + + ) : searching ? ( + setSearch((v) => ({ searchQuery: "", type: v.type }))} + /> + ) : null} + + ); }