fix: issues

Author: professoralex13

examples/playground/src/components/JsonView.tsx

@@ -1,8 +1,7 @@
 import clsx from "clsx"
 
 interface Props {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  content: any
+  content: unknown
   onClick?: () => void
 }
 

examples/playground/src/components/SegmentControl.tsx

@@ -17,6 +17,7 @@ export default function SegmentControl({ segments, index, onChange, inactiveText
 
         return (
           <button
+            key={label}
             onClick={() => onChange(i)}
             disabled={disabled}
             className={clsx(

examples/playground/src/pages/Amdb.tsx

@@ -19,8 +19,8 @@ function AmdbPage({ amdb }: { amdb: ReturnType<typeof getAmdbAPI> }) {
 
   const { data: airport, isLoading } = useQuery({
     queryKey: ["amdb-search-specific", idarpt],
-    queryFn: async () => (await amdb.searchAmdb(idarpt!))?.find(airport => airport.idarpt === idarpt!),
-    enabled: idarpt !== undefined,
+    queryFn: async () =>
+      idarpt ? (await amdb.searchAmdb(idarpt))?.find(airport => airport.idarpt === idarpt) : undefined,
   })
 
   const [layers, setLayers] = useRecoilState(amdbLayersState)
@@ -86,6 +86,7 @@ function AmdbPage({ amdb }: { amdb: ReturnType<typeof getAmdbAPI> }) {
 
               return (
                 <Button
+                  key={layer}
                   className="px-5"
                   selected={airportLayers.includes(layer)}
                   onClick={() => {
@@ -133,7 +134,7 @@ function AmdbSearch({ amdb }: { amdb: ReturnType<typeof getAmdbAPI> }) {
         <div className="overflow-auto space-y-3 px-3 self-stretch">
           {response &&
             response.map(item => (
-              <Link to={`/amdb/${item.idarpt}`}>
+              <Link to={`/amdb/${item.idarpt}`} key={item.idarpt}>
                 <JsonView onClick={() => null} content={item} />
               </Link>
             ))}

examples/playground/src/pages/App.tsx

@@ -67,7 +67,7 @@ export default function App() {
         />
         <span className="text-sm">Scopes: </span>
         {Object.values(Scope).map(scope => (
-          <label className="flex gap-2 items-center text-sm ml-5">
+          <label className="flex gap-2 items-center text-sm ml-5" key={scope}>
             {scope}
             <input
               disabled={!editUnlocked}

examples/playground/src/pages/Packages.tsx

@@ -25,7 +25,7 @@ const Packages = protectedPage(
             </span>
             <div className="flex flex-col gap-3 overflow-auto px-3 self-stretch">
               {data.map(item => (
-                <Link to={item.file.url} download>
+                <Link to={item.file.url} download key={item.id}>
                   <JsonView onClick={() => null} content={item} />
                 </Link>
               ))}