Skip to content

Commit 0134f2d

Browse files
juliencrnjuliencrn
committed
Add Algolia logo to the website doc-search
1 parent b14db5b commit 0134f2d

File tree

2 files changed

+169
-0
lines changed

2 files changed

+169
-0
lines changed

‎apps/www/src/components/doc-search/command-menu.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { Index } from 'react-instantsearch'
22

3+
import { Footer } from './footer'
34
import { RenderHits } from './hits'
45
import { SearchInput } from './input'
56
import { useCommandMenuContext } from './modal.context'
@@ -29,6 +30,7 @@ export function CommandMenu() {
2930
</Index>
3031
<CommandEmpty>No results found.</CommandEmpty>
3132
</CommandList>
33+
<Footer />
3234
</CommandDialog>
3335
)
3436
}

‎apps/www/src/components/doc-search/footer.tsx‎

Lines changed: 167 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,167 @@
1+
export function Footer() {
2+
return (
3+
<footer className="flex flex-row-reverse items-center justify-between relative px-4 py-2.5 select-none w-full text-xs border-t text-muted-foreground">
4+
<div>
5+
<a
6+
href="https://www.algolia.com/ref/docsearch/?utm_source=usehooks-ts.com&amp;utm_medium=referral&amp;utm_content=powered_by&amp;utm_campaign=docsearch"
7+
target="_blank"
8+
rel="noopener noreferrer"
9+
className="flex items-center gap-1"
10+
>
11+
<span>Search by</span>
12+
<AlgoliaLogo />
13+
</a>
14+
</div>
15+
<ul className="flex gap-3">
16+
<li className="flex items-center gap-1">
17+
<Kbd>
18+
<EnterKey />
19+
</Kbd>
20+
<span>to select</span>
21+
</li>
22+
<li className="flex items-center gap-1">
23+
<Kbd>
24+
<ArrowDownKey />
25+
</Kbd>
26+
<Kbd>
27+
<ArrowUpKey />
28+
</Kbd>
29+
<span>to navigate</span>
30+
</li>
31+
<li className="flex items-center gap-1">
32+
<Kbd>
33+
<EscapeKey />
34+
</Kbd>
35+
<span>to close</span>
36+
</li>
37+
</ul>
38+
</footer>
39+
)
40+
}
41+
42+
function EscapeKey() {
43+
return (
44+
<svg width="15" height="15" aria-label="Escape key" role="img">
45+
<g
46+
fill="none"
47+
stroke="currentColor"
48+
strokeLinecap="round"
49+
strokeLinejoin="round"
50+
strokeWidth="1.2"
51+
>
52+
<path d="M13.6167 8.936c-.1065.3583-.6883.962-1.4875.962-.7993 0-1.653-.9165-1.653-2.1258v-.5678c0-1.2548.7896-2.1016 1.653-2.1016.8634 0 1.3601.4778 1.4875 1.0724M9 6c-.1352-.4735-.7506-.9219-1.46-.8972-.7092.0246-1.344.57-1.344 1.2166s.4198.8812 1.3445.9805C8.465 7.3992 8.968 7.9337 9 8.5c.032.5663-.454 1.398-1.4595 1.398C6.6593 9.898 6 9 5.963 8.4851m-1.4748.5368c-.2635.5941-.8099.876-1.5443.876s-1.7073-.6248-1.7073-2.204v-.4603c0-1.0416.721-2.131 1.7073-2.131.9864 0 1.6425 1.031 1.5443 2.2492h-2.956"></path>
53+
</g>
54+
</svg>
55+
)
56+
}
57+
58+
function ArrowDownKey() {
59+
return (
60+
<svg width="15" height="15" aria-label="Arrow down" role="img">
61+
<g
62+
fill="none"
63+
stroke="currentColor"
64+
strokeLinecap="round"
65+
strokeLinejoin="round"
66+
strokeWidth="1.2"
67+
>
68+
<path d="M7.5 3.5v8M10.5 8.5l-3 3-3-3"></path>
69+
</g>
70+
</svg>
71+
)
72+
}
73+
function ArrowUpKey() {
74+
return (
75+
<svg width="15" height="15" aria-label="Arrow up" role="img">
76+
<g
77+
fill="none"
78+
stroke="currentColor"
79+
strokeLinecap="round"
80+
strokeLinejoin="round"
81+
strokeWidth="1.2"
82+
>
83+
<path d="M7.5 11.5v-8M10.5 6.5l-3-3-3 3"></path>
84+
</g>
85+
</svg>
86+
)
87+
}
88+
89+
function EnterKey() {
90+
return (
91+
<svg width="15" height="15" aria-label="Enter key" role="img">
92+
<g
93+
fill="none"
94+
stroke="currentColor"
95+
strokeLinecap="round"
96+
strokeLinejoin="round"
97+
strokeWidth="1.2"
98+
>
99+
<path d="M12 3.53088v3c0 1-1 2-2 2H4M7 11.53088l-3-3 3-3"></path>
100+
</g>
101+
</svg>
102+
)
103+
}
104+
105+
function Kbd({ children }: { children: React.ReactNode }) {
106+
return (
107+
<kbd className="flex items-center border-none rounded-sm bg-zinc-200 text-zinc-500 p-[2px] h-5 w-5">
108+
{children}
109+
</kbd>
110+
)
111+
}
112+
113+
function AlgoliaLogo() {
114+
return (
115+
<svg
116+
width="77"
117+
height="19"
118+
aria-label="Algolia"
119+
role="img"
120+
xmlns="http://www.w3.org/2000/svg"
121+
viewBox="0 0 2196.2 500"
122+
>
123+
<path
124+
style={{ fill: '#003dff', fillRule: 'evenodd' }}
125+
d="M1070.38,275.3V5.91c0-3.63-3.24-6.39-6.82-5.83l-50.46,7.94c-2.87,.45-4.99,2.93-4.99,5.84l.17,273.22c0,12.92,0,92.7,95.97,95.49,3.33,.1,6.09-2.58,6.09-5.91v-40.78c0-2.96-2.19-5.51-5.12-5.84-34.85-4.01-34.85-47.57-34.85-54.72Z"
126+
></path>
127+
<rect
128+
style={{ fill: '#003dff' }}
129+
x="1845.88"
130+
y="104.73"
131+
width="62.58"
132+
height="277.9"
133+
rx="5.9"
134+
ry="5.9"
135+
></rect>
136+
<path
137+
style={{ fill: '#003dff', fillRule: 'evenodd' }}
138+
d="M1851.78,71.38h50.77c3.26,0,5.9-2.64,5.9-5.9V5.9c0-3.62-3.24-6.39-6.82-5.83l-50.77,7.95c-2.87,.45-4.99,2.92-4.99,5.83v51.62c0,3.26,2.64,5.9,5.9,5.9Z"
139+
></path>
140+
<path
141+
style={{ fill: '#003dff', fillRule: 'evenodd' }}
142+
d="M1764.03,275.3V5.91c0-3.63-3.24-6.39-6.82-5.83l-50.46,7.94c-2.87,.45-4.99,2.93-4.99,5.84l.17,273.22c0,12.92,0,92.7,95.97,95.49,3.33,.1,6.09-2.58,6.09-5.91v-40.78c0-2.96-2.19-5.51-5.12-5.84-34.85-4.01-34.85-47.57-34.85-54.72Z"
143+
></path>
144+
<path
145+
style={{ fill: '#003dff', fillRule: 'evenodd' }}
146+
d="M1631.95,142.72c-11.14-12.25-24.83-21.65-40.78-28.31-15.92-6.53-33.26-9.85-52.07-9.85-18.78,0-36.15,3.17-51.92,9.85-15.59,6.66-29.29,16.05-40.76,28.31-11.47,12.23-20.38,26.87-26.76,44.03-6.38,17.17-9.24,37.37-9.24,58.36,0,20.99,3.19,36.87,9.55,54.21,6.38,17.32,15.14,32.11,26.45,44.36,11.29,12.23,24.83,21.62,40.6,28.46,15.77,6.83,40.12,10.33,52.4,10.48,12.25,0,36.78-3.82,52.7-10.48,15.92-6.68,29.46-16.23,40.78-28.46,11.29-12.25,20.05-27.04,26.25-44.36,6.22-17.34,9.24-33.22,9.24-54.21,0-20.99-3.34-41.19-10.03-58.36-6.38-17.17-15.14-31.8-26.43-44.03Zm-44.43,163.75c-11.47,15.75-27.56,23.7-48.09,23.7-20.55,0-36.63-7.8-48.1-23.7-11.47-15.75-17.21-34.01-17.21-61.2,0-26.89,5.59-49.14,17.06-64.87,11.45-15.75,27.54-23.52,48.07-23.52,20.55,0,36.63,7.78,48.09,23.52,11.47,15.57,17.36,37.98,17.36,64.87,0,27.19-5.72,45.3-17.19,61.2Z"
147+
></path>
148+
<path
149+
style={{ fill: '#003dff', fillRule: 'evenodd' }}
150+
d="M894.42,104.73h-49.33c-48.36,0-90.91,25.48-115.75,64.1-14.52,22.58-22.99,49.63-22.99,78.73,0,44.89,20.13,84.92,51.59,111.1,2.93,2.6,6.05,4.98,9.31,7.14,12.86,8.49,28.11,13.47,44.52,13.47,1.23,0,2.46-.03,3.68-.09,.36-.02,.71-.05,1.07-.07,.87-.05,1.75-.11,2.62-.2,.34-.03,.68-.08,1.02-.12,.91-.1,1.82-.21,2.73-.34,.21-.03,.42-.07,.63-.1,32.89-5.07,61.56-30.82,70.9-62.81v57.83c0,3.26,2.64,5.9,5.9,5.9h50.42c3.26,0,5.9-2.64,5.9-5.9V110.63c0-3.26-2.64-5.9-5.9-5.9h-56.32Zm0,206.92c-12.2,10.16-27.97,13.98-44.84,15.12-.16,.01-.33,.03-.49,.04-1.12,.07-2.24,.1-3.36,.1-42.24,0-77.12-35.89-77.12-79.37,0-10.25,1.96-20.01,5.42-28.98,11.22-29.12,38.77-49.74,71.06-49.74h49.33v142.83Z"
151+
></path>
152+
<path
153+
style={{ fill: '#003dff', fillRule: 'evenodd' }}
154+
className="cls-2"
155+
d="M2133.97,104.73h-49.33c-48.36,0-90.91,25.48-115.75,64.1-14.52,22.58-22.99,49.63-22.99,78.73,0,44.89,20.13,84.92,51.59,111.1,2.93,2.6,6.05,4.98,9.31,7.14,12.86,8.49,28.11,13.47,44.52,13.47,1.23,0,2.46-.03,3.68-.09,.36-.02,.71-.05,1.07-.07,.87-.05,1.75-.11,2.62-.2,.34-.03,.68-.08,1.02-.12,.91-.1,1.82-.21,2.73-.34,.21-.03,.42-.07,.63-.1,32.89-5.07,61.56-30.82,70.9-62.81v57.83c0,3.26,2.64,5.9,5.9,5.9h50.42c3.26,0,5.9-2.64,5.9-5.9V110.63c0-3.26-2.64-5.9-5.9-5.9h-56.32Zm0,206.92c-12.2,10.16-27.97,13.98-44.84,15.12-.16,.01-.33,.03-.49,.04-1.12,.07-2.24,.1-3.36,.1-42.24,0-77.12-35.89-77.12-79.37,0-10.25,1.96-20.01,5.42-28.98,11.22-29.12,38.77-49.74,71.06-49.74h49.33v142.83Z"
156+
></path>
157+
<path
158+
style={{ fill: '#003dff', fillRule: 'evenodd' }}
159+
d="M1314.05,104.73h-49.33c-48.36,0-90.91,25.48-115.75,64.1-11.79,18.34-19.6,39.64-22.11,62.59-.58,5.3-.88,10.68-.88,16.14s.31,11.15,.93,16.59c4.28,38.09,23.14,71.61,50.66,94.52,2.93,2.6,6.05,4.98,9.31,7.14,12.86,8.49,28.11,13.47,44.52,13.47h0c17.99,0,34.61-5.93,48.16-15.97,16.29-11.58,28.88-28.54,34.48-47.75v50.26h-.11v11.08c0,21.84-5.71,38.27-17.34,49.36-11.61,11.08-31.04,16.63-58.25,16.63-11.12,0-28.79-.59-46.6-2.41-2.83-.29-5.46,1.5-6.27,4.22l-12.78,43.11c-1.02,3.46,1.27,7.02,4.83,7.53,21.52,3.08,42.52,4.68,54.65,4.68,48.91,0,85.16-10.75,108.89-32.21,21.48-19.41,33.15-48.89,35.2-88.52V110.63c0-3.26-2.64-5.9-5.9-5.9h-56.32Zm0,64.1s.65,139.13,0,143.36c-12.08,9.77-27.11,13.59-43.49,14.7-.16,.01-.33,.03-.49,.04-1.12,.07-2.24,.1-3.36,.1-1.32,0-2.63-.03-3.94-.1-40.41-2.11-74.52-37.26-74.52-79.38,0-10.25,1.96-20.01,5.42-28.98,11.22-29.12,38.77-49.74,71.06-49.74h49.33Z"
160+
></path>
161+
<path
162+
style={{ fill: '#003dff' }}
163+
d="M249.83,0C113.3,0,2,110.09,.03,246.16c-2,138.19,110.12,252.7,248.33,253.5,42.68,.25,83.79-10.19,120.3-30.03,3.56-1.93,4.11-6.83,1.08-9.51l-23.38-20.72c-4.75-4.21-11.51-5.4-17.36-2.92-25.48,10.84-53.17,16.38-81.71,16.03-111.68-1.37-201.91-94.29-200.13-205.96,1.76-110.26,92-199.41,202.67-199.41h202.69V407.41l-115-102.18c-3.72-3.31-9.42-2.66-12.42,1.31-18.46,24.44-48.53,39.64-81.93,37.34-46.33-3.2-83.87-40.5-87.34-86.81-4.15-55.24,39.63-101.52,94-101.52,49.18,0,89.68,37.85,93.91,85.95,.38,4.28,2.31,8.27,5.52,11.12l29.95,26.55c3.4,3.01,8.79,1.17,9.63-3.3,2.16-11.55,2.92-23.58,2.07-35.92-4.82-70.34-61.8-126.93-132.17-131.26-80.68-4.97-148.13,58.14-150.27,137.25-2.09,77.1,61.08,143.56,138.19,145.26,32.19,.71,62.03-9.41,86.14-26.95l150.26,133.2c6.44,5.71,16.61,1.14,16.61-7.47V9.48C499.66,4.25,495.42,0,490.18,0H249.83Z"
164+
></path>
165+
</svg>
166+
)
167+
}

0 commit comments

Comments
 (0)