fix(search): Add preview to options

src/features/search/options/SearchOptions.jsx

@@ -4,12 +4,14 @@ import { toast } from 'react-toastify';
 import { TextField } from '@mui/material';
 
 import { Header, Row, Content, Action, PreferencesWrapper } from 'components/Layout/Settings';
+import { Hero, Preview, Controls } from 'components/Layout/Settings/Hero';
 import { Dropdown, Checkbox } from 'components/Form/Settings';
 
 import EventBus from 'utils/eventbus';
 
 import searchEngines from '../search_engines.json';
 import defaults from './default';
+import SearchPreview from './SearchPreview';
 
 function SearchOptions() {
   const [customEnabled, setCustomEnabled] = useState(false);
@@ -148,6 +150,17 @@ function SearchOptions() {
         category="widgets"
         visibilityToggle={true}
       />
+      <Hero>
+        <Preview>
+          <SearchPreview />
+        </Preview>
+        <Controls
+          title={variables.getMessage(`${SEARCH_SECTION}.title`)}
+          setting="searchBar"
+          category="widgets"
+          visibilityToggle={true}
+        />
+      </Hero>
       <PreferencesWrapper setting="searchBar" category="widgets" visibilityToggle={true}>
         <SearchEngineSelection />
         <AdditionalOptions />

src/features/search/options/SearchPreview.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import Search from 'features/search/Search';
+
+const SearchPreview = ({ zoomLevel = 100 }) => {
+  const searchEngine = localStorage.getItem('searchEngine') || 'duckduckgo';
+
+  return (
+    <AnimatePresence mode="crossfade">
+      <motion.div
+        className="absolute"
+        key={`search-preview-${searchEngine}`}
+        initial={{ opacity: 0, scale: 0.95 }}
+        animate={{
+          opacity: 1,
+          scale: zoomLevel / 100,
+        }}
+        exit={{ opacity: 0, scale: 0.95 }}
+        transition={{
+          opacity: { duration: 0.2 },
+          scale: { duration: 0.3, ease: 'anticipate' },
+        }}
+      >
+        <Search isPreview={true} />
+      </motion.div>
+    </AnimatePresence>
+  );
+};
+
+export { SearchPreview, SearchPreview as default };