Enhance DocSearchView with filters and sorting options

Updated the `DocSearchView` component to initialize the `filters` state with an empty array. Added a new section to render filters, mapping over the `filters` array to display `DocSearch` and `DocSort` components. This improves the user interface by enabling sorting and filtering of displayed posts.

src/client/dd-hub-react/src/sections/document/view/doc-search-view.tsx

@@ -26,7 +26,7 @@ type Props = {
 export function DocSearchView({ posts }: Props) {
   const [sortBy, setSortBy] = useState('latest');
 
-  const [filters, setFilters] = useState<Filter[]>()
+  const [filters, setFilters] = useState<Filter[]>([])
 
   const handleSort = useCallback((newSort: string) => {
     setSortBy(newSort);
@@ -40,6 +40,7 @@ export function DocSearchView({ posts }: Props) {
 
   return (
     <DashboardContent>
+
       <Box
         sx={{
           mb: 5,
@@ -79,6 +80,32 @@ export function DocSearchView({ posts }: Props) {
         />
       </Box>
 
+      <>
+        {filters.map((filter, index) =>
+        (
+          <Box
+            sx={{
+              mb: 5,
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'space-between',
+            }}
+          >
+            <DocSearch posts={posts} />
+            <DocSort
+              sortBy={sortBy}
+              onSort={handleSort}
+              options={[
+                { value: 'latest', label: 'Latest' },
+                { value: 'popular', label: 'Popular' },
+                { value: 'oldest', label: 'Oldest' },
+              ]}
+            />
+          </Box>
+        )
+        )}
+      </>
+
       <Grid container spacing={3}>
         {posts.map((post, index) => {
           const latestDocLarge = index === 0;