diff options
Diffstat (limited to 'examples/docs/src/components/Header')
-rw-r--r-- | examples/docs/src/components/Header/LanguageSelect.tsx | 15 | ||||
-rw-r--r-- | examples/docs/src/components/Header/Search.tsx | 8 | ||||
-rw-r--r-- | examples/docs/src/components/Header/SidebarToggle.tsx | 23 |
3 files changed, 40 insertions, 6 deletions
diff --git a/examples/docs/src/components/Header/LanguageSelect.tsx b/examples/docs/src/components/Header/LanguageSelect.tsx index 7fd3af229..a895cc7cc 100644 --- a/examples/docs/src/components/Header/LanguageSelect.tsx +++ b/examples/docs/src/components/Header/LanguageSelect.tsx @@ -6,8 +6,19 @@ import { KNOWN_LANGUAGES, langPathRegex } from '../../languages'; const LanguageSelect: FunctionalComponent<{ lang: string }> = ({ lang }) => { return ( <div class="language-select-wrapper"> - <svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 88.6 77.3" height="1.2em" width="1.2em"> - <path fill="currentColor" d="M61,24.6h7.9l18.7,51.6h-7.7l-5.4-15.5H54.3l-5.6,15.5h-7.2L61,24.6z M72.6,55l-8-22.8L56.3,55H72.6z" /> + <svg + aria-hidden="true" + focusable="false" + role="img" + xmlns="http://www.w3.org/2000/svg" + viewBox="0 0 88.6 77.3" + height="1.2em" + width="1.2em" + > + <path + fill="currentColor" + d="M61,24.6h7.9l18.7,51.6h-7.7l-5.4-15.5H54.3l-5.6,15.5h-7.2L61,24.6z M72.6,55l-8-22.8L56.3,55H72.6z" + /> <path fill="currentColor" d="M53.6,60.6c-10-4-16-9-22-14c0,0,1.3,1.3,0,0c-6,5-20,13-20,13l-4-6c8-5,10-6,19-13c-2.1-1.9-12-13-13-19h8 c4,9,10,14,10,14c10-8,10-19,10-19h8c0,0-1,13-12,24l0,0c5,5,10,9,19,13L53.6,60.6z M1.6,16.6h56v-8h-23v-7h-9v7h-24V16.6z" diff --git a/examples/docs/src/components/Header/Search.tsx b/examples/docs/src/components/Header/Search.tsx index ebc563c61..4d06ce00b 100644 --- a/examples/docs/src/components/Header/Search.tsx +++ b/examples/docs/src/components/Header/Search.tsx @@ -41,7 +41,13 @@ export default function Search() { <> <button type="button" ref={searchButtonRef} onClick={onOpen} className="search-input"> <svg width="24" height="24" fill="none"> - <path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" /> + <path + d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" + stroke="currentColor" + strokeWidth="2" + strokeLinecap="round" + strokeLinejoin="round" + /> </svg> <span>Search</span> <span className="search-hint"> diff --git a/examples/docs/src/components/Header/SidebarToggle.tsx b/examples/docs/src/components/Header/SidebarToggle.tsx index 90b180461..2be9dee9a 100644 --- a/examples/docs/src/components/Header/SidebarToggle.tsx +++ b/examples/docs/src/components/Header/SidebarToggle.tsx @@ -15,9 +15,26 @@ const MenuToggle: FunctionalComponent = () => { }, [sidebarShown]); return ( - <button type="button" aria-pressed={sidebarShown ? 'true' : 'false'} id="menu-toggle" onClick={() => setSidebarShown(!sidebarShown)}> - <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" viewBox="0 0 24 24" stroke="currentColor"> - <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" /> + <button + type="button" + aria-pressed={sidebarShown ? 'true' : 'false'} + id="menu-toggle" + onClick={() => setSidebarShown(!sidebarShown)} + > + <svg + xmlns="http://www.w3.org/2000/svg" + width="1em" + height="1em" + fill="none" + viewBox="0 0 24 24" + stroke="currentColor" + > + <path + stroke-linecap="round" + stroke-linejoin="round" + stroke-width="2" + d="M4 6h16M4 12h16M4 18h16" + /> </svg> <span className="sr-only">Toggle sidebar</span> </button> |