-
Notifications
You must be signed in to change notification settings - Fork 43
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* add footer * rename IconPropsColor -> IconColorProps * make imagesc icon bigger as according to designs * change breakpoint 450->495 * make footer always go to bottom of page * fix footer links * add napari hub logo * follow design scaling more faithfully
- Loading branch information
Showing
8 changed files
with
294 additions
and
10 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,103 @@ | ||
| import clsx from 'clsx'; | ||
| import { ComponentType, ReactNode } from 'react'; | ||
|
|
||
| import { | ||
| GitHub, | ||
| IconColorProps, | ||
| ImageSC, | ||
| NapariHub, | ||
| Twitter, | ||
| Zulip, | ||
| } from '@/components/icons'; | ||
| import { Link } from '@/components/Link'; | ||
|
|
||
| interface FooterItem { | ||
| title: ReactNode | string; | ||
| link: string; | ||
| alt: string; | ||
| icon: ComponentType<IconColorProps>; | ||
| size?: string; | ||
| } | ||
|
|
||
| const FOOTER_LINKS: FooterItem[] = [ | ||
| { | ||
| title: ( | ||
| <> | ||
| <span className="font-normal">napari</span> hub | ||
| </> | ||
| ), | ||
| link: 'https://napari-hub.org', | ||
| alt: 'Visit napari hub', | ||
| icon: NapariHub, | ||
| }, | ||
| { | ||
| title: 'GitHub', | ||
| link: 'https://github.com/napari/napari', | ||
| alt: 'Visit GitHub repository', | ||
| icon: GitHub, | ||
| }, | ||
| { | ||
| title: 'Twitter', | ||
| link: 'https://twitter.com/napari_imaging', | ||
| alt: 'Visit Twitter page', | ||
| icon: Twitter, | ||
| }, | ||
| { | ||
| title: 'image.sc', | ||
| link: 'https://forum.image.sc/tag/napari', | ||
| alt: 'Visit image.sc forum', | ||
| icon: ImageSC, | ||
| size: 'h-[1.25em] w-[1.25em]', | ||
| }, | ||
| { | ||
| title: 'Zulip', | ||
| link: 'https://napari.zulipchat.com', | ||
| alt: 'Visit Zulip chatroom', | ||
| icon: Zulip, | ||
| }, | ||
| ]; | ||
|
|
||
| const STANDARD_ICON_SIZE = 'h-[1em] w-[1em]'; | ||
|
|
||
| function FooterLinks() { | ||
| return ( | ||
| <> | ||
| {FOOTER_LINKS.map((item) => ( | ||
| <Link | ||
| className={clsx( | ||
| 'text-white', | ||
| 'whitespace-nowrap mr-4 last:mr-0', | ||
| 'flex flex-row items-center', | ||
| )} | ||
| href={item.link} | ||
| newTab | ||
| > | ||
| <item.icon | ||
| className={clsx( | ||
| item.size ? item.size : STANDARD_ICON_SIZE, | ||
| 'inline-block mr-1', | ||
| )} | ||
| color="white" | ||
| alt={item.alt} | ||
| /> | ||
| <span className="font-semibold text-[0.875em]">{item.title}</span> | ||
| </Link> | ||
| ))} | ||
| </> | ||
| ); | ||
| } | ||
|
|
||
| export function Footer() { | ||
| return ( | ||
| <div | ||
| className={clsx( | ||
| 'flex flex-row items-center justify-start', | ||
| 'h-[4.6875em] w-full', | ||
| 'px-6 screen-495:px-12', | ||
| 'bg-black', | ||
| )} | ||
| > | ||
| <FooterLinks /> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,46 @@ | ||
| import { IconColorProps } from './icons.type'; | ||
|
|
||
| export function ImageSC({ className, alt, color = 'black' }: IconColorProps) { | ||
| return ( | ||
| <svg | ||
| className={className} | ||
| width="20" | ||
| height="20" | ||
| viewBox="0 0 20 20" | ||
| fill="none" | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| > | ||
| {alt && <title>{alt}</title>} | ||
| <path | ||
| d="M12.9987 4.65361V2.01143C12.9987 2.00512 12.9936 2 12.9873 2H6.95296C6.94665 2 6.94153 2.00512 6.94153 2.01143V8.04571C6.94153 8.05203 6.94665 8.05714 6.95296 8.05714H10.9701" | ||
| stroke={color} | ||
| strokeWidth="2.34286" | ||
| /> | ||
| <path | ||
| d="M6.94153 15.3464V17.9886C6.94153 17.9949 6.94665 18 6.95296 18H12.9873C12.9936 18 12.9987 17.9949 12.9987 17.9886V11.9543C12.9987 11.948 12.9936 11.9429 12.9873 11.9429H8.9701" | ||
| stroke={color} | ||
| strokeWidth="2.34286" | ||
| /> | ||
| <path | ||
| d="M16.1145 9.9496L18.4027 8.62852C18.4082 8.62536 18.4101 8.61837 18.4069 8.6129L15.3898 3.38706C15.3866 3.38159 15.3796 3.37972 15.3742 3.38288L10.1483 6.40002C10.1429 6.40317 10.141 6.41016 10.1441 6.41563L12.1527 9.89458" | ||
| stroke={color} | ||
| strokeWidth="2.34286" | ||
| /> | ||
| <path | ||
| d="M3.82577 10.0503L1.53758 11.3714C1.53211 11.3745 1.53024 11.3815 1.5334 11.387L4.55054 16.6128C4.5537 16.6183 4.56069 16.6202 4.56615 16.617L9.792 13.5999C9.79746 13.5967 9.79934 13.5897 9.79618 13.5842L7.78761 10.1053" | ||
| stroke={color} | ||
| strokeWidth="2.34286" | ||
| /> | ||
| <path | ||
| d="M13.086 15.2962L15.3742 16.6173C15.3796 16.6205 15.3866 16.6186 15.3898 16.6131L18.4069 11.3873C18.4101 11.3818 18.4082 11.3748 18.4027 11.3717L13.1769 8.35456C13.1714 8.35141 13.1644 8.35328 13.1613 8.35875L11.1527 11.8377" | ||
| stroke={color} | ||
| strokeWidth="2.34286" | ||
| /> | ||
| <path | ||
| d="M6.85434 4.70397L4.56614 3.38288C4.56068 3.37973 4.55369 3.3816 4.55053 3.38707L1.53339 8.61291C1.53023 8.61838 1.53211 8.62537 1.53757 8.62852L6.76342 11.6457C6.76888 11.6488 6.77587 11.647 6.77903 11.6415L8.7876 8.16254" | ||
| stroke={color} | ||
| strokeWidth="2.34286" | ||
| /> | ||
| </svg> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,100 @@ | ||
| import { IconColorProps } from './icons.type'; | ||
|
|
||
| export function NapariHub({ | ||
| className, | ||
| alt, | ||
| color = '#009BF2', | ||
| }: IconColorProps) { | ||
| return ( | ||
| <svg | ||
| className={className} | ||
| width="487" | ||
| height="512" | ||
| viewBox="0 0 487 512" | ||
| fill="none" | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| > | ||
| {alt && <title>{alt}</title>} | ||
| <circle | ||
| cx="243.036" | ||
| cy="256" | ||
| r="85.3333" | ||
| fill={color} | ||
| stroke={color} | ||
| strokeWidth="56.8889" | ||
| /> | ||
| <circle cx="243.036" cy="42.6667" r="42.6667" fill={color} /> | ||
| <circle cx="243.036" cy="469.333" r="42.6667" fill={color} /> | ||
| <path | ||
| d="M243.036 28.4444L243.036 142.222" | ||
| stroke={color} | ||
| strokeWidth="56.8889" | ||
| strokeLinecap="round" | ||
| strokeLinejoin="round" | ||
| /> | ||
| <path | ||
| d="M243.036 369.778L243.036 483.556" | ||
| stroke={color} | ||
| strokeWidth="56.8889" | ||
| strokeLinecap="round" | ||
| strokeLinejoin="round" | ||
| /> | ||
| <circle | ||
| cx="58.2838" | ||
| cy="149.333" | ||
| r="42.6667" | ||
| transform="rotate(-60 58.2838 149.333)" | ||
| fill={color} | ||
| /> | ||
| <circle | ||
| cx="427.788" | ||
| cy="362.667" | ||
| r="42.6667" | ||
| transform="rotate(-60 427.788 362.667)" | ||
| fill={color} | ||
| /> | ||
| <path | ||
| d="M45.967 142.222L144.501 199.111" | ||
| stroke={color} | ||
| strokeWidth="56.8889" | ||
| strokeLinecap="round" | ||
| strokeLinejoin="round" | ||
| /> | ||
| <path | ||
| d="M341.57 312.889L440.105 369.778" | ||
| stroke={color} | ||
| strokeWidth="56.8889" | ||
| strokeLinecap="round" | ||
| strokeLinejoin="round" | ||
| /> | ||
| <circle | ||
| cx="58.2838" | ||
| cy="362.667" | ||
| r="42.6667" | ||
| transform="rotate(-120 58.2838 362.667)" | ||
| fill={color} | ||
| /> | ||
| <circle | ||
| cx="427.788" | ||
| cy="149.333" | ||
| r="42.6667" | ||
| transform="rotate(-120 427.788 149.333)" | ||
| fill={color} | ||
| /> | ||
| <path | ||
| d="M45.967 369.778L144.501 312.889" | ||
| stroke={color} | ||
| strokeWidth="56.8889" | ||
| strokeLinecap="round" | ||
| strokeLinejoin="round" | ||
| /> | ||
| <path | ||
| d="M341.57 199.111L440.105 142.222" | ||
| stroke={color} | ||
| strokeWidth="56.8889" | ||
| strokeLinecap="round" | ||
| strokeLinejoin="round" | ||
| /> | ||
| </svg> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| import { IconColorProps } from './icons.type'; | ||
|
|
||
| export function Zulip({ className, alt, color = 'black' }: IconColorProps) { | ||
| return ( | ||
| <svg | ||
| className={className} | ||
| width="16" | ||
| height="16" | ||
| viewBox="0 0 16 16" | ||
| fill="none" | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| > | ||
| {alt && <title>{alt}</title>} | ||
| <g clipPath="url(#clip0)"> | ||
| <path | ||
| d="M15.178 2.39267C15.178 3.19867 14.816 3.91467 14.2647 4.34867L8.90869 9.13133C8.80935 9.21667 8.68002 9.07933 8.75202 8.96467L10.716 5.03133C10.7714 4.92133 10.7 4.786 10.5867 4.786H2.96802C1.78802 4.786 0.822021 3.70933 0.822021 2.39267C0.822021 1.07733 1.78802 3.09431e-07 2.96802 3.09431e-07H13.032C14.212 -0.000666357 15.178 1.076 15.178 2.39267ZM2.96802 16H13.032C14.212 16 15.178 14.9227 15.178 13.6067C15.178 12.2907 14.212 11.2133 13.032 11.2133H5.41335C5.30002 11.2133 5.22869 11.0787 5.28402 10.9687L7.24802 7.03533C7.32002 6.92067 7.19069 6.78333 7.09135 6.86867L1.73602 11.6507C1.18402 12.084 0.822688 12.8007 0.822688 13.6067C0.822688 14.9227 1.78802 16 2.96802 16Z" | ||
| fill={color} | ||
| /> | ||
| </g> | ||
| <defs> | ||
| <clipPath id="clip0"> | ||
| <rect width="16" height="16" fill={color} /> | ||
| </clipPath> | ||
| </defs> | ||
| </svg> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters