769ea63 · urbit.org · git.iko.soy

53 }, []);

54

55 return (

56− <>

57− <div className="fixed w-screen h-screen bg-black bg-opacity-30 z-50 flex flex-col">

56+ <div className="fixed w-screen h-screen bg-black bg-opacity-30 z-50 flex flex-col">

58− <div className="p-12 w-100 flex flex-col min-h-0">

57+ <div className="p-12 w-100 flex flex-col min-h-0">

59− <div className="relative flex flex-col" ref={searchRef}>

58+ <div className="relative flex flex-col" ref={searchRef}>

60− <input

59+ <input

61− className="bg-white type-ui text-green rounded-xl border-transparent p-2 outline-none relative"

60+ className="bg-white type-ui text-green rounded-xl border-transparent p-2 outline-none relative"

62− onChange={onChange}

61+ onChange={onChange}

63− onFocus={onFocus}

62+ onFocus={onFocus}

64− placeholder="Search..."

63+ placeholder="Search..."

65− type="text"

64+ type="text"

66− value={query}

65+ value={query}

67− autoFocus={true}

66+ autoFocus={true}

68− />

67+ />

69− {query.length > 0 && (

68+ {query.length > 0 && (

70− <span

69+ <span

71− onClick={clear}

70+ onClick={clear}

72− className="absolute right-3"

71+ className="absolute right-3"

73− style={{ top: 13 }}

72+ style={{ top: 13 }}

73+ >

74+ <svg

75+ width="16"

76+ height="16"

77+ viewBox="0 0 16 16"

78+ fill="none"

79+ xmlns="http://www.w3.org/2000/svg"

74 >

80 >

75− <svg

76− width="16"

77− height="16"

78− viewBox="0 0 16 16"

79− fill="none"

80− xmlns="http://www.w3.org/2000/svg"

81− >

82− <path

81+ <path

83− fill-rule="evenodd"

82+ fill-rule="evenodd"

84− clip-rule="evenodd"

83+ clip-rule="evenodd"

85− d="M0.39382 13.7045C-0.131273 14.2296 -0.131274 15.081 0.39382 15.6061C0.918913 16.1312 1.77026 16.1312 2.29535 15.6061L7.99999 9.90142L13.7047 15.6061C14.2297 16.1312 15.0811 16.1312 15.6062 15.6061C16.1313 15.081 16.1313 14.2296 15.6062 13.7046L9.90152 7.99989L15.6061 2.29535C16.1311 1.77026 16.1312 0.918913 15.6061 0.39382C15.081 -0.131273 14.2296 -0.131273 13.7045 0.39382L7.99999 6.09836L2.29548 0.393844C1.77038 -0.131249 0.919038 -0.131249 0.393945 0.393844C-0.131148 0.918937 -0.131148 1.77028 0.393945 2.29537L6.09846 7.99989L0.39382 13.7045Z"

84+ d="M0.39382 13.7045C-0.131273 14.2296 -0.131274 15.081 0.39382 15.6061C0.918913 16.1312 1.77026 16.1312 2.29535 15.6061L7.99999 9.90142L13.7047 15.6061C14.2297 16.1312 15.0811 16.1312 15.6062 15.6061C16.1313 15.081 16.1313 14.2296 15.6062 13.7046L9.90152 7.99989L15.6061 2.29535C16.1311 1.77026 16.1312 0.918913 15.6061 0.39382C15.081 -0.131273 14.2296 -0.131273 13.7045 0.39382L7.99999 6.09836L2.29548 0.393844C1.77038 -0.131249 0.919038 -0.131249 0.393945 0.393844C-0.131148 0.918937 -0.131148 1.77028 0.393945 2.29537L6.09846 7.99989L0.39382 13.7045Z"

86− fill="black"

85+ fill="black"

87− fill-opacity="0.6"

86+ fill-opacity="0.6"

88− />

87+ />

89− </svg>

88+ </svg>

90− </span>

89+ </span>

91− )}

90+ )}

92− </div>

91+ </div>

93− <div

92+ <div

94− className={

93+ className={

95− "bg-white overflow-scroll min-h-0 rounded-xl border-transparent mt-2 " +

94+ "bg-white overflow-scroll min-h-0 rounded-xl border-transparent mt-2 " +

96− (query.length > 0 ? "" : "hidden")

95+ (query.length > 0 ? "" : "hidden")

97− }

96+ }

98− >

97+ >

99− {active && glossaryResults.length > 0 && (

98+ {active && glossaryResults.length > 0 && (

100− <ul>

99+ <ul>

101− {glossaryResults.map(({ name, link, desc, symbol }) => {

100+ {glossaryResults.map(({ name, link, desc, symbol }) => {

101+ return (

102+ <div className="border-b border-gray">

103+ <p className="font-semibold text-sm pb-4 text-gray pl-3 pt-2">

104+ Glossary Result

105+ </p>

106+ <li key={link} className="cursor-pointer hover:bg-wall">

107+ <Link href={link} as={link}>

108+ <div className="font-semibold px-3">

109+ {symbol.length > 0 && (

110+ <code className="mr-1">{symbol}</code>

111+ )}

112+ {name}

113+ <p className="font-normal text-base pt-1 pb-4">

114+ {desc}

115+ </p>

116+ </div>

117+ </Link>

118+ </li>

119+ </div>

120+ );

121+ })}

122+ </ul>

123+ )}

124+ {active && results.length > 0 && (

125+ <ul className="p-2">

126+ <div>

127+ <p className="font-semibold text-sm pb-4 text-gray">

128+ {results.length} results for "{query}"

129+ </p>

130+ </div>

131+ {results

132+ .filter((e) => e.parent !== "Glossary")

133+ .map(({ title, slug, content, parent }) => {

102 return (

134 return (

103− <div className="border-b border-gray">

104− <p className="font-semibold text-sm pb-4 text-gray pl-3 pt-2">

105− Glossary Result

106− </p>

107− <li key={link} className="cursor-pointer hover:bg-wall">

135+ <li key={slug} className="cursor-pointer hover:bg-wall">

108− <Link href={link} as={link}>

136+ <Link href={slug} as={slug}>

137+ <div>

109− <div className="font-semibold px-3">

138+ <p className="font-medium text-base">

110− {symbol.length > 0 && (

139+ {parent} / {title}

111− <code className="mr-1">{symbol}</code>

140+ </p>

112− )}

113− {name}

114− <p className="font-normal text-base pt-1 pb-4">

141+ <p className="text-base font-regular">{content}</p>

115− {desc}

116− </p>

117− </div>

142+ </div>

118− </Link>

143+ </Link>

119− </li>

144+ </li>

120− </div>

121 );

145 );

122 })}

146 })}

123− </ul>

124− )}

125− {active && results.length > 0 && (

126− <ul className="p-2">

127− <div>

128− <p className="font-semibold text-sm pb-4 text-gray">

129− {results.length} results for "{query}"

130− </p>

131− </div>

132− {results

133− .filter((e) => e.parent !== "Glossary")

134− .map(({ title, slug, content, parent }) => {

135− return (

136− <li key={slug} className="cursor-pointer hover:bg-wall">

137− <Link href={slug} as={slug}>

138− <div>

139− <p className="font-medium text-base">

140− {parent} / {title}

141− </p>

142− <p className="text-base font-regular">{content}</p>

143− </div>

144− </Link>

145− </li>

146− );

147− })}

148− </ul>

147+ </ul>

149− )}

148+ )}

150− </div>

151 </div>

149 </div>

152 </div>

150 </div>

153− {props.children}

151+ </div>

154− </>

155 );

152 );

156}

153}