feat: full edit shelter and improved interface of pet friendly in shelter page

Author: fagundesjg

src/components/Authenticated/Authenticated.tsx

@@ -0,0 +1,13 @@
+import { Fragment, useContext } from 'react';
+
+import { SessionContext } from '@/contexts';
+
+const Authenticated = ({ children }: { children?: React.ReactNode }) => {
+  const { session } = useContext(SessionContext);
+
+  if (!session) return <Fragment />;
+
+  return <div className="contents">{children}</div>;
+};
+
+export { Authenticated };

src/components/Authenticated/index.ts

@@ -0,0 +1,3 @@
+import { Authenticated } from './Authenticated';
+
+export { Authenticated };

src/components/CardAboutShelter/CardAboutShelter.tsx

@@ -24,13 +24,22 @@ const CardAboutShelter = (props: ICardAboutShelter) => {
       <div className="flex flex-col flex-wrap gap-3">
         <InfoRow icon={<Home />} label={shelter.address} />
         <InfoRow
+          className=""
           icon={<PawPrint />}
           label={
-            check(shelter.petFriendly)
-              ? shelter.petFriendly
-                ? 'O abrigo aceita animais'
-                : 'O abrigo não aceita animais'
-              : 'Não informado se aceita animais'
+            check(shelter.petFriendly) ? (
+              shelter.petFriendly ? (
+                <p>
+                  O abrigo <b className="text-green-600">aceita</b> animais
+                </p>
+              ) : (
+                <p>
+                  O abrigo <b className="text-red-600">não</b> aceita animais
+                </p>
+              )
+            ) : (
+              <b>Não informado se aceita animais</b>
+            )
           }
         />
         <InfoRow

src/components/CardAboutShelter/components/InfoRow/types.ts

@@ -1,5 +1,5 @@
 export interface IInfoRowProps extends React.ComponentPropsWithoutRef<'div'> {
-  label: string;
+  label: React.ReactNode;
   value?: string;
   icon: React.ReactNode;
 }

src/components/SelectField/SelectField.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../ui/select';
+import { ISelectComponentProps } from './types';
+import { cn } from '@/lib/utils';
+
+const SelectField = React.forwardRef<HTMLDivElement, ISelectComponentProps>(
+  (props, ref) => {
+    const {
+      onSelectChange,
+      options,
+      value,
+      label,
+      className = '',
+      ...rest
+    } = props;
+
+    return (
+      <div ref={ref} className={cn('w-full', className)} {...rest}>
+        <label className="text-muted-foreground">{label}</label>
+        <Select
+          value={value}
+          onValueChange={(v) =>
+            onSelectChange ? onSelectChange(v) : undefined
+          }
+        >
+          <SelectTrigger className="w-full">
+            <SelectValue className="text-muted-foreground" />
+          </SelectTrigger>
+          <SelectContent>
+            {options.map((option, idx) => (
+              <SelectItem key={idx} value={option.value}>
+                {option.label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+    );
+  }
+);
+
+export { SelectField };

src/components/SelectField/index.ts

@@ -0,0 +1,3 @@
+import { SelectField } from './SelectField';
+
+export { SelectField };

src/components/SelectField/types.ts

@@ -0,0 +1,7 @@
+export interface ISelectComponentProps
+  extends React.ComponentPropsWithoutRef<'div'> {
+  label: string;
+  value: string;
+  onSelectChange?: (v: string) => void;
+  options: { label: string; value: string }[];
+}

src/components/TextField/TextField.tsx

@@ -14,6 +14,7 @@ const TextField = forwardRef<React.ElementRef<'input'>, TextFieldProps>(
       className,
       error,
       helperText,
+      value = '',
       ...rest
     } = props;
 
@@ -29,6 +30,7 @@ const TextField = forwardRef<React.ElementRef<'input'>, TextFieldProps>(
           ref={ref}
           name={name}
           className={cn(error ? 'border-[1px] border-red-600' : '', className)}
+          value={value}
           {...rest}
         />
         {helperText && (

src/components/index.ts

@@ -11,6 +11,8 @@ import { Chip } from './Chip';
 import { Footer } from './Footer';
 import { SearchInput } from './SearchInput';
 import { VerifiedBadge } from './VerifiedBadge';
+import { SelectField } from './SelectField';
+import { Authenticated } from './Authenticated';
 
 export {
   LoadingScreen,
@@ -26,4 +28,6 @@ export {
   Footer,
   VerifiedBadge,
   SearchInput,
+  SelectField,
+  Authenticated,
 };

src/lib/utils.ts

@@ -138,7 +138,7 @@ function groupShelterSuppliesByTag(data: IUseSheltersDataSupplyData[]) {
   return Object.entries(grouped).reduce((prev, [category, values]) => {
     return {
       ...prev,
-      [category]: values.sort((a, b) => a.priority - b.priority),
+      [category]: values.sort((a, b) => b.priority - a.priority),
     };
   }, initialGroup);
 }