@c-rex/components 0.1.38 → 0.1.39

package/src/results/dialog-filter.tsx

@@ -1,166 +1,166 @@
-"use client"
-
-import React, { FC, useState } from "react"
-import { Button } from "@c-rex/ui/button"
-import {
-    Dialog,
-    DialogClose,
-    DialogContent,
-    DialogFooter,
-    DialogHeader,
-    DialogTitle,
-    DialogTrigger,
-} from "@c-rex/ui/dialog"
-import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "@c-rex/ui/select"
-import { Label } from "@c-rex/ui/label"
-import { parseAsBoolean, parseAsInteger, parseAsString, useQueryStates } from "nuqs"
-import { useTranslations } from "next-intl"
-import { LanguageAndCountries } from "@c-rex/interfaces"
-import { WILD_CARD_OPTIONS, OPERATOR_OPTIONS } from "@c-rex/constants"
-import { Switch } from "@c-rex/ui/switch"
-import { useSearchSettingsStore } from "../stores/search-settings-store"
-import { OperatorType, WildCardType } from "@c-rex/types"
-import { useLanguageStore } from "../stores/language-store"
-
-interface Props {
-    trigger: React.ReactNode;
-}
-export const DialogFilter: FC<Props> = ({ trigger }) => {
-    const t = useTranslations("filter");
-    const availableLanguagesAndCountries = useLanguageStore(state => state.availableLanguages);
-    const initialSettings = useSearchSettingsStore.getState();
-
-    const [form, setForm] = useState({
-        like: initialSettings.like,
-        operator: initialSettings.operator as string,
-        wildcard: initialSettings.wildcard as string,
-        language: initialSettings.language || '',
-    });
-
-    const [, setParams] = useQueryStates({
-        language: parseAsString,
-        page: parseAsInteger,
-        wildcard: parseAsString,
-        operator: parseAsString,
-        like: parseAsBoolean,
-    }, {
-        history: 'push',
-        shallow: false,
-    });
-
-    const apply = () => {
-        useSearchSettingsStore.getState().updatePreferences({
-            like: form.like,
-            operator: form.operator as OperatorType,
-            wildcard: form.wildcard as WildCardType,
-            language: form.language,
-        });
-
-        setParams({
-            page: 1,
-            language: form.language,
-            operator: form.operator,
-            wildcard: form.wildcard,
-            like: form.like,
-        });
-    }
-
-    const reload = () => {
-        const settings = useSearchSettingsStore.getState();
-        setForm({
-            like: settings.like,
-            operator: settings.operator,
-            wildcard: settings.wildcard,
-            language: settings.language || '',
-        });
-    };
-
-    return (
-        <Dialog onOpenChange={reload}>
-            <DialogTrigger asChild>
-                {trigger}
-            </DialogTrigger>
-            <DialogContent>
-                <DialogHeader>
-                    <DialogTitle>{t("searchSettings")}</DialogTitle>
-                </DialogHeader>
-
-                <div className="grid grid-cols-2 items-center pt-2">
-                    <Label className="text-right">
-                        {t("languages")}:
-                    </Label>
-                    <div className="flex items-center">
-                        <Select onValueChange={(language) => setForm((prev) => ({ ...prev, language }))} value={form.language}>
-                            <SelectTrigger className="w-[180px]">
-                                <SelectValue placeholder="" />
-                            </SelectTrigger>
-                            <SelectContent>
-                                <SelectGroup>
-                                    {availableLanguagesAndCountries?.map((item: LanguageAndCountries) => (
-                                        <SelectItem key={item.value} value={item.value}>
-                                            {item.lang.toUpperCase()}
-                                        </SelectItem>
-                                    ))}
-                                </SelectGroup>
-                            </SelectContent>
-                        </Select>
-                    </div>
-                </div>
-
-                <div className="grid grid-cols-2 items-center pt-2">
-                    <Label className="text-right">
-                        {t("wildcard")}:
-                    </Label>
-                    <div className="flex items-center">
-                        <Select
-                            onValueChange={(wildcard) => setForm((prev) => ({ ...prev, wildcard }))}
-                            value={form.wildcard}
-                        >
-                            <SelectTrigger className="w-[180px]">
-                                <SelectValue placeholder="" />
-                            </SelectTrigger>
-                            <SelectContent>
-                                <SelectGroup>
-                                    {Object.keys(WILD_CARD_OPTIONS).map((item: string) => {
-                                        return (
-                                            <SelectItem key={item} value={item}>
-                                                {item}
-                                            </SelectItem>
-                                        )
-                                    })}
-                                </SelectGroup>
-                            </SelectContent>
-                        </Select>
-                    </div>
-                </div>
-
-                <div className="grid grid-cols-2 items-center pt-2">
-                    <Label htmlFor="operator" className="text-right">
-                        {t("operator")}:
-                    </Label>
-
-                    <Switch
-                        id="operator"
-                        onCheckedChange={(value) => setForm((prev) => ({ ...prev, operator: value ? OPERATOR_OPTIONS.AND : OPERATOR_OPTIONS.OR }))}
-                        checked={form.operator == OPERATOR_OPTIONS.AND}
-                    />
-                </div>
-
-                <div className="grid grid-cols-2 items-center pt-2">
-                    <Label htmlFor="like" className="text-right">
-                        {t("like")}:
-                    </Label>
-                    <Switch id="like" onCheckedChange={(like) => setForm((prev) => ({ ...prev, like }))} checked={form.like} />
-                </div>
-
-                <DialogFooter className="pt-2">
-                    <DialogClose asChild>
-                        <Button onClick={apply}>
-                            {t("apply")}
-                        </Button>
-                    </DialogClose>
-                </DialogFooter>
-            </DialogContent>
-        </Dialog >
-    )
-}
+"use client"
+
+import React, { FC, useState } from "react"
+import { Button } from "@c-rex/ui/button"
+import {
+    Dialog,
+    DialogClose,
+    DialogContent,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+    DialogTrigger,
+} from "@c-rex/ui/dialog"
+import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "@c-rex/ui/select"
+import { Label } from "@c-rex/ui/label"
+import { parseAsBoolean, parseAsInteger, parseAsString, useQueryStates } from "nuqs"
+import { useTranslations } from "next-intl"
+import { LanguageAndCountries } from "@c-rex/interfaces"
+import { WILD_CARD_OPTIONS, OPERATOR_OPTIONS } from "@c-rex/constants"
+import { Switch } from "@c-rex/ui/switch"
+import { useSearchSettingsStore } from "../stores/search-settings-store"
+import { OperatorType, WildCardType } from "@c-rex/types"
+import { useLanguageStore } from "../stores/language-store"
+
+interface Props {
+    trigger: React.ReactNode;
+}
+export const DialogFilter: FC<Props> = ({ trigger }) => {
+    const t = useTranslations("filter");
+    const availableLanguagesAndCountries = useLanguageStore(state => state.availableLanguages);
+    const initialSettings = useSearchSettingsStore.getState();
+
+    const [form, setForm] = useState({
+        like: initialSettings.like,
+        operator: initialSettings.operator as string,
+        wildcard: initialSettings.wildcard as string,
+        language: initialSettings.language || '',
+    });
+
+    const [, setParams] = useQueryStates({
+        language: parseAsString,
+        page: parseAsInteger,
+        wildcard: parseAsString,
+        operator: parseAsString,
+        like: parseAsBoolean,
+    }, {
+        history: 'push',
+        shallow: false,
+    });
+
+    const apply = () => {
+        useSearchSettingsStore.getState().updatePreferences({
+            like: form.like,
+            operator: form.operator as OperatorType,
+            wildcard: form.wildcard as WildCardType,
+            language: form.language,
+        });
+
+        setParams({
+            page: 1,
+            language: form.language,
+            operator: form.operator,
+            wildcard: form.wildcard,
+            like: form.like,
+        });
+    }
+
+    const reload = () => {
+        const settings = useSearchSettingsStore.getState();
+        setForm({
+            like: settings.like,
+            operator: settings.operator,
+            wildcard: settings.wildcard,
+            language: settings.language || '',
+        });
+    };
+
+    return (
+        <Dialog onOpenChange={reload}>
+            <DialogTrigger asChild>
+                {trigger}
+            </DialogTrigger>
+            <DialogContent>
+                <DialogHeader>
+                    <DialogTitle>{t("searchSettings")}</DialogTitle>
+                </DialogHeader>
+
+                <div className="grid grid-cols-2 items-center pt-2">
+                    <Label className="text-right">
+                        {t("languages")}:
+                    </Label>
+                    <div className="flex items-center">
+                        <Select onValueChange={(language) => setForm((prev) => ({ ...prev, language }))} value={form.language}>
+                            <SelectTrigger className="w-[180px]">
+                                <SelectValue placeholder="" />
+                            </SelectTrigger>
+                            <SelectContent>
+                                <SelectGroup>
+                                    {availableLanguagesAndCountries?.map((item: LanguageAndCountries) => (
+                                        <SelectItem key={item.value} value={item.value}>
+                                            {item.lang.toUpperCase()}
+                                        </SelectItem>
+                                    ))}
+                                </SelectGroup>
+                            </SelectContent>
+                        </Select>
+                    </div>
+                </div>
+
+                <div className="grid grid-cols-2 items-center pt-2">
+                    <Label className="text-right">
+                        {t("wildcard")}:
+                    </Label>
+                    <div className="flex items-center">
+                        <Select
+                            onValueChange={(wildcard) => setForm((prev) => ({ ...prev, wildcard }))}
+                            value={form.wildcard}
+                        >
+                            <SelectTrigger className="w-[180px]">
+                                <SelectValue placeholder="" />
+                            </SelectTrigger>
+                            <SelectContent>
+                                <SelectGroup>
+                                    {Object.keys(WILD_CARD_OPTIONS).map((item: string) => {
+                                        return (
+                                            <SelectItem key={item} value={item}>
+                                                {item}
+                                            </SelectItem>
+                                        )
+                                    })}
+                                </SelectGroup>
+                            </SelectContent>
+                        </Select>
+                    </div>
+                </div>
+
+                <div className="grid grid-cols-2 items-center pt-2">
+                    <Label htmlFor="operator" className="text-right">
+                        {t("operator")}:
+                    </Label>
+
+                    <Switch
+                        id="operator"
+                        onCheckedChange={(value) => setForm((prev) => ({ ...prev, operator: value ? OPERATOR_OPTIONS.AND : OPERATOR_OPTIONS.OR }))}
+                        checked={form.operator == OPERATOR_OPTIONS.AND}
+                    />
+                </div>
+
+                <div className="grid grid-cols-2 items-center pt-2">
+                    <Label htmlFor="like" className="text-right">
+                        {t("like")}:
+                    </Label>
+                    <Switch id="like" onCheckedChange={(like) => setForm((prev) => ({ ...prev, like }))} checked={form.like} />
+                </div>
+
+                <DialogFooter className="pt-2">
+                    <DialogClose asChild>
+                        <Button onClick={apply}>
+                            {t("apply")}
+                        </Button>
+                    </DialogClose>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog >
+    )
+}

package/src/results/empty.tsx

@@ -1,16 +1,16 @@
-import React, { FC } from "react";
-import { Alert, AlertDescription, AlertTitle } from "@c-rex/ui/alert";
-import { useTranslations } from "next-intl";
-
-export const Empty: FC = () => {
-    const t = useTranslations("results")
-
-    return (
-        <Alert className="my-2">
-            <AlertTitle>{t("noResultsTitle")}</AlertTitle>
-            <AlertDescription>
-                {t("noResultsDescription")}
-            </AlertDescription>
-        </Alert>
-    );
+import React, { FC } from "react";
+import { Alert, AlertDescription, AlertTitle } from "@c-rex/ui/alert";
+import { useTranslations } from "next-intl";
+
+export const Empty: FC = () => {
+    const t = useTranslations("results")
+
+    return (
+        <Alert className="my-2">
+            <AlertTitle>{t("noResultsTitle")}</AlertTitle>
+            <AlertDescription>
+                {t("noResultsDescription")}
+            </AlertDescription>
+        </Alert>
+    );
 };