@@ -9,9 +9,15 @@ import { type ReactNode, useMemo, useState } from "react";
99import uFuzzy from "ufuzzy" ;
1010import { CopyableValue } from "components/CopyableValue/CopyableValue" ;
1111import { Margins } from "components/Margins/Margins" ;
12- import { PageHeader , PageHeaderTitle } from "components/PageHeader/PageHeader" ;
12+ import {
13+ PageHeader ,
14+ PageHeaderSubtitle ,
15+ PageHeaderTitle ,
16+ } from "components/PageHeader/PageHeader" ;
1317import { Stack } from "components/Stack/Stack" ;
1418import icons from "theme/icons.json" ;
19+ import { Box , Link } from "@mui/material" ;
20+ import { EmptyState } from "components/EmptyState/EmptyState" ;
1521
1622const iconsWithoutSuffix = icons . map ( ( icon ) => icon . split ( "." ) [ 0 ] ) ;
1723const fuzzyFinder = new uFuzzy ( {
@@ -61,8 +67,33 @@ export default function () {
6167
6268return (
6369< Margins >
64- < PageHeader >
70+ < PageHeader
71+ actions = {
72+ < Tooltip
73+ placement = "bottom-end"
74+ title = {
75+ < Box
76+ css = { {
77+ padding :theme . spacing ( 1 ) ,
78+ fontSize :13 ,
79+ lineHeight :1.5 ,
80+ } }
81+ >
82+ You can suggest a new icon by submitting a Pull Request to our
83+ public GitHub repository. Just keep in mind that it should be
84+ relevant to many Coder users, and redistributable under a
85+ permissive license.
86+ </ Box >
87+ }
88+ >
89+ < Link href = "" > Suggest an icon</ Link >
90+ </ Tooltip >
91+ }
92+ >
6593< PageHeaderTitle > Icons</ PageHeaderTitle >
94+ < PageHeaderSubtitle >
95+ All of the icons included with Coder
96+ </ PageHeaderSubtitle >
6697</ PageHeader >
6798< TextField
6899size = "small"
@@ -113,6 +144,9 @@ export default function () {
113144justifyContent = "center"
114145css = { ( theme ) => ( { marginTop :theme . spacing ( 4 ) } ) }
115146>
147+ { searchedIcons . length === 0 && (
148+ < EmptyState message = "No results matched your search" />
149+ ) }
116150{ searchedIcons . map ( ( icon ) => (
117151< CopyableValue key = { icon . url } value = { icon . url } placement = "bottom" >
118152< Stack alignItems = "center" css = { { margin :theme . spacing ( 1.5 ) } } >