refactor: replace 'preact' with 'react' (#1048)

app/assets/javascripts/Components/Preferences/Panes/General/Labs.tsx

@@ -1,17 +1,12 @@
-import { Switch } from '@/Components/Switch/Switch'
-import {
-  PreferencesGroup,
-  PreferencesSegment,
-  Subtitle,
-  Text,
-  Title,
-} from '@/Components/Preferences/PreferencesComponents'
+import Switch from '@/Components/Switch/Switch'
+import { Subtitle, Text, Title } from '@/Components/Preferences/PreferencesComponents/Content'
 import { WebApplication } from '@/UIModels/Application'
 import { FeatureIdentifier, FeatureStatus, FindNativeFeature } from '@standardnotes/snjs'
-import { FunctionComponent } from 'preact'
-import { useCallback, useEffect, useState } from 'preact/hooks'
+import { Fragment, FunctionComponent, useCallback, useEffect, useState } from 'react'
 import { usePremiumModal } from '@/Hooks/usePremiumModal'
-import { HorizontalSeparator } from '@/Components/Shared/HorizontalSeparator'
+import HorizontalSeparator from '@/Components/Shared/HorizontalSeparator'
+import PreferencesGroup from '../../PreferencesComponents/PreferencesGroup'
+import PreferencesSegment from '../../PreferencesComponents/PreferencesSegment'
 
 type ExperimentalFeatureItem = {
   identifier: FeatureIdentifier
@@ -25,7 +20,7 @@ type Props = {
   application: WebApplication
 }
 
-export const LabsPane: FunctionComponent<Props> = ({ application }) => {
+const LabsPane: FunctionComponent<Props> = ({ application }) => {
   const [experimentalFeatures, setExperimentalFeatures] = useState<ExperimentalFeatureItem[]>([])
 
   const reloadExperimentalFeatures = useCallback(() => {
@@ -67,7 +62,7 @@ export const LabsPane: FunctionComponent<Props> = ({ application }) => {
             const showHorizontalSeparator = experimentalFeatures.length > 1 && index !== experimentalFeatures.length - 1
 
             return (
-              <>
+              <Fragment key={identifier}>
                 <div className="flex items-center justify-between">
                   <div className="flex flex-col">
                     <Subtitle>{name}</Subtitle>
@@ -76,7 +71,7 @@ export const LabsPane: FunctionComponent<Props> = ({ application }) => {
                   <Switch onChange={toggleFeature} checked={isEnabled} />
                 </div>
                 {showHorizontalSeparator && <HorizontalSeparator classes="mt-5 mb-3" />}
-              </>
+              </Fragment>
             )
           })}
           {experimentalFeatures.length === 0 && (
@@ -91,3 +86,5 @@ export const LabsPane: FunctionComponent<Props> = ({ application }) => {
     </PreferencesGroup>
   )
 }
+
+export default LabsPane