@bouko/react 1.6.8 → 1.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,5 +1,9 @@
|
|
|
1
|
+
import { ReactElement } from "react";
|
|
1
2
|
export type SearchBarProps = {
|
|
3
|
+
button?: ReactElement<{
|
|
4
|
+
onClick: (query: string) => void;
|
|
5
|
+
}>;
|
|
2
6
|
placeholder?: string;
|
|
3
7
|
action: (query: string) => void;
|
|
4
8
|
};
|
|
5
|
-
export declare function SearchBar({ placeholder, action }: SearchBarProps): import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
export declare function SearchBar({ button, placeholder, action }: SearchBarProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,11 +1,13 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
-
import { useState } from "react";
|
|
3
|
+
import { cloneElement, useState } from "react";
|
|
4
4
|
import { RowBox } from "./flex";
|
|
5
5
|
import { Button } from "./button";
|
|
6
|
-
export function SearchBar({ placeholder, action }) {
|
|
6
|
+
export function SearchBar({ button, placeholder, action }) {
|
|
7
7
|
const [query, search] = useState("");
|
|
8
|
-
return (_jsxs(RowBox, { style: styles.container, children: [_jsxs("div", { className: "relative grow", children: [_jsx("input", { className: "w-full outline-none
|
|
8
|
+
return (_jsxs(RowBox, { style: styles.container, children: [_jsxs("div", { className: "relative grow", children: [_jsx("input", { className: "w-full outline-none text-lg placeholder-slate-500 tracking-wide", placeholder: placeholder, value: query, onChange: (e) => search(e.target.value), onKeyUp: (e) => e.key === "Enter" ? action(query) : null }), _jsx("div", { className: "absolute top-0 right-0 w-12 h-full bg-gradient-to-l from-slate-950" })] }), button ? cloneElement(button, {
|
|
9
|
+
onClick: () => action(query)
|
|
10
|
+
}) : _jsx(Button, { size: "sm", style: "gap-[0.4rem] font-extrabold py-1 px-3 font-mono", onClick: () => action(query), children: "GO" })] }));
|
|
9
11
|
}
|
|
10
12
|
const styles = {
|
|
11
13
|
container: "items-center gap-6 w-xl pl-5 pr-4 py-3 bg-slate-950 border border-border rounded-md"
|