From d217c4d9f4f6f5edbb5314c3e00f1ea6ef95b6bd Mon Sep 17 00:00:00 2001 From: Jelle van Snik Date: Fri, 18 Feb 2022 20:22:56 +0100 Subject: [PATCH] Link + section heading link --- src/components/Icon.tsx | 4 +- src/components/Text/Link.tsx | 53 ++++++++++++++++++++++++ src/components/layout/SectionHeading.tsx | 26 ++++++++---- src/views/SearchView.tsx | 20 +++++++-- 4 files changed, 92 insertions(+), 11 deletions(-) create mode 100644 src/components/Text/Link.tsx diff --git a/src/components/Icon.tsx b/src/components/Icon.tsx index d714ca89..206ecc0f 100644 --- a/src/components/Icon.tsx +++ b/src/components/Icon.tsx @@ -4,6 +4,7 @@ export enum Icons { CLOCK = "clock", EYE_SLASH = "eyeSlash", ARROW_LEFT = "arrowLeft", + ARROW_RIGHT = "arrowRight", CHEVRON_DOWN = "chevronDown", CHEVRON_RIGHT = "chevronRight", CLAPPER_BOARD = "clapperBoard", @@ -22,13 +23,14 @@ const iconList: Record = { bookmark: ``, clock: ``, eyeSlash: ``, - arrowLeft: ``, + arrowLeft: ``, chevronDown: ``, chevronRight: ``, clapperBoard: ``, film: ``, dragon: ``, warning: ``, + arrowRight: ``, }; export function Icon(props: IconProps) { diff --git a/src/components/Text/Link.tsx b/src/components/Text/Link.tsx new file mode 100644 index 00000000..829e8511 --- /dev/null +++ b/src/components/Text/Link.tsx @@ -0,0 +1,53 @@ +import { Icon, Icons } from "components/Icon"; +import { Link as LinkRouter } from "react-router-dom"; + +interface ILinkPropsBase { + linkText: string; + className?: string; + onClick?: () => void; + direction?: "left" | "right"; +} + +interface ILinkPropsExternal extends ILinkPropsBase { + url: string; +} + +interface ILinkPropsInternal extends ILinkPropsBase { + to: string; +} + +export type LinkProps = + | ILinkPropsExternal + | ILinkPropsInternal + | ILinkPropsBase; + +export function Link(props: LinkProps) { + const direction = props.direction || "right"; + const isExternal = !!(props as ILinkPropsExternal).url; + const isInternal = !!(props as ILinkPropsInternal).to; + const content = ( + + {direction === "left" ? ( + + + + ) : null} + {props.linkText} + {direction === "right" ? ( + + + + ) : null} + + ); + + if (isExternal) + return {content}; + else if (isInternal) + return ( + {content} + ); + return ( + props.onClick && props.onClick()}>{content} + ); +} diff --git a/src/components/layout/SectionHeading.tsx b/src/components/layout/SectionHeading.tsx index 0ffb33cd..39f6006f 100644 --- a/src/components/layout/SectionHeading.tsx +++ b/src/components/layout/SectionHeading.tsx @@ -1,23 +1,35 @@ import { Icon, Icons } from "components/Icon"; +import { Link } from "components/Text/Link"; import { ReactNode } from "react"; interface SectionHeadingProps { icon?: Icons; title: string; children?: ReactNode; + linkText?: string; + onClick?: () => void; } export function SectionHeading(props: SectionHeadingProps) { return (
-

- {props.icon ? ( - - - +

+

+ {props.icon ? ( + + + + ) : null} + {props.title} +

+ {props.linkText ? ( + ) : null} - {props.title} -

+
{props.children}
); diff --git a/src/views/SearchView.tsx b/src/views/SearchView.tsx index 3c75e594..8cbc3e8e 100644 --- a/src/views/SearchView.tsx +++ b/src/views/SearchView.tsx @@ -63,7 +63,13 @@ function SearchSuffix(props: { ); } -function SearchResultsView({ searchQuery }: { searchQuery: MWQuery }) { +function SearchResultsView({ + searchQuery, + clear, +}: { + searchQuery: MWQuery; + clear: () => void; +}) { const [results, setResults] = useState(); const [runSearchQuery, loading, error, success] = useLoading( (query: MWQuery) => SearchProviders(query) @@ -83,7 +89,12 @@ function SearchResultsView({ searchQuery }: { searchQuery: MWQuery }) {
{/* results */} {success && results?.results.length ? ( - + clear()} + > {results.results.map((v) => ( ) : searching ? ( - + setSearch((v) => ({ searchQuery: "", type: v.type }))} + /> ) : null} );