FEAT: Searchbar || FIX: spacings, overflows

pull/45/head
aidenpwnz 2 years ago
parent f40ca1e25c
commit 4581c4eeb0

@ -1,12 +1,14 @@
import WeatherApi from "components/widgets/weather/weather";
import OpenWeatherMap from "components/widgets/openweathermap/weather";
import Resources from "components/widgets/resources/resources";
import Search from "components/widgets/search/search";
const widgetMappings = {
weather: WeatherApi, // This key will be deprecated in the future
weatherapi: WeatherApi,
openweathermap: OpenWeatherMap,
resources: Resources,
search: Search,
};
export default function Widget({ widget }) {

@ -0,0 +1,73 @@
import { useEffect, useState } from "react";
import { FiSearch } from "react-icons/fi";
import { FcGoogle } from "react-icons/fc";
import { SiDuckduckgo } from "react-icons/si";
import { SiMicrosoftbing } from "react-icons/si";
export default function Search({ options, classN }) {
const providers = ["google", "bing", "duckduckgo", "custom"];
const targets = ["_blank", "_parent", "_top"];
const [query, setQuery] = useState("");
function search() {
if (!providers.includes(options.provider)) {
return;
} else {
if (options.provider === "custom") {
if (targets.includes(options.target)) {
window.open(options.customdata.url + query, options.target);
} else window.open(options.customdata.url + query, "_self");
} else {
if (targets.includes(options.target)) {
window.open(`https://www.${options.provider}.com/search?q=` + query, `${options.target}`);
} else window.open(`https://www.${options.provider}.com/search?q=` + query, "_self");
}
}
setQuery("");
}
if (!options || (options.provider === "custom" && !options.customdata)) {
return <></>;
}
return (
<form className={`grow flex-col relative h-8 my-4 md:my-0 min-w-full md:min-w-fit ${classN}`}>
<div className="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none w-full text-theme-800 dark:text-theme-200">
{options.provider == "google" ? (
<FcGoogle className="text-theme-800 dark:text-theme-200 w-3 h-3" />
) : options.provider == "duckduckgo" ? (
<SiDuckduckgo className="text-theme-800 dark:text-theme-200 w-3 h-3" />
) : options.provider == "bing" ? (
<SiMicrosoftbing className="text-theme-800 dark:text-theme-200 w-3 h-3" />
) : options.provider == "custom" ? (
options.customdata.abbr.length > 2 ? (
options.customdata.abbr.substring(0, 2)
) : (
options.customdata.abbr
)
) : (
""
)}
</div>
<input
type="search"
autoFocus
className={`block ${
options.customdata.abbr.length > 1 ? "pl-12" : "pl-10"
} w-full text-sm text-gray-900 bg-gray-50 rounded-full border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 h-full`}
placeholder="Search..."
onChange={(s) => setQuery(s.currentTarget.value)}
required
/>
<button
type="submit"
onClick={search}
className="text-white absolute right-0.5 bottom-0.5 bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-r-full text-sm px-4 py-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
>
<FiSearch className="text-theme-200 dark:text-theme-200 w-3 h-3" />
</button>
</form>
);
}

@ -33,7 +33,7 @@ export default function WeatherApi({ options }) {
}
return (
<div className="flex flex-col">
<div className="flex flex-col justify-center md:justify-start mt-2 lg:mt-0 !-ml-1 lg:!ml-2">
<div className="flex flex-row items-center justify-end">
<div className="flex flex-col items-center">
<Icon condition={data.current.condition.code} timeOfDay={data.current.is_day ? "day" : "night"} />

@ -8,6 +8,7 @@ import ServicesGroup from "components/services/group";
import BookmarksGroup from "components/bookmarks/group";
import Widget from "components/widget";
import { ColorProvider } from "utils/color-context";
import Search from "components/widgets/search/search";
const ThemeToggle = dynamic(() => import("components/theme-toggle"), {
ssr: false,
@ -17,7 +18,7 @@ const ColorToggle = dynamic(() => import("components/color-toggle"), {
ssr: false,
});
const rightAlignedWidgets = ["weatherapi", "openweathermap", "weather"];
const rightAlignedWidgets = ["weatherapi", "openweathermap", "weather", "search"];
export default function Home() {
const { data: services, error: servicesError } = useSWR("/api/services");
@ -31,7 +32,7 @@ export default function Home() {
<title>Welcome</title>
</Head>
<div className="w-full container m-auto flex flex-col h-screen justify-between">
<div className="flex flex-wrap space-x-4 m-8 pb-4 mt-10 border-b-2 border-theme-800 dark:border-theme-200">
<div className="flex flex-wrap space-x-4 m-8 pb-4 mt-10 border-b-2 border-theme-800 dark:border-theme-200 justify-between">
{widgets && (
<>
{widgets
@ -39,12 +40,21 @@ export default function Home() {
.map((widget, i) => (
<Widget key={i} widget={widget} />
))}
<div className="grow"></div>
{widgets
.filter((widget) => widget.type === "search")
.map(
(widget, i) =>
<Search options={widget.options} classN={"hidden sm:block"} /> ?? <div className="grow"></div>
)}
{widgets
.filter((widget) => rightAlignedWidgets.includes(widget.type))
.map((widget, i) => (
<Widget key={i} widget={widget} />
))}
.map((widget, i) =>
widget.type === "search" ? (
<Search options={widget.options} classN={"block sm:hidden !ml-0 sm:!ml-1"} />
) : (
<Widget key={i} widget={widget} />
)
)}
</>
)}
</div>

@ -5,3 +5,10 @@
cpu: true
memory: true
disk: /
- search: # Searchbar in widgets area
provider: custom # Can be google, duckduckgo, bing or custom.
target: _blank # Can be _blank, _top, _self or _parent.
customdata:
url: https://startpage.com/search?q= # Required for custom provider. Remember to add the q param as per your provider.
abbr: G # Can be omitted. Only the first 2 characters will be considered.

Loading…
Cancel
Save