I'll create an Enterprise Search App with a search screen that includes results from various connectors and allows users to filter result sources. Let's build this using Next.js and React, incorporating some key components for search functionality and result filtering.

Let's create the Enterprise Search App:

This Enterprise Search App includes the following features:

1. A search input field where users can enter their queries.
2. A results display area that shows search results from various sources.
3. A filter component that allows users to select which sources they want to see results from.
4. A responsive layout that works well on both desktop and mobile devices.
5. Placeholder data to demonstrate how results from different sources (Confluence, JIRA, GitHub, SharePoint, Slack, and Notion) would be displayed.

Here's a breakdown of the components:

1. app/page.tsx: This is the main page component that renders the search input and results.
2. components/search.tsx: This component handles the search input and form submission. It uses the useSearchParams and useRouter hooks to manage the search query in the URL.

3. components/search-results.tsx: This component displays the search results and source filters. It includes:

   • A list of checkboxes to filter results by source
   • A grid layout to display results
   • Mock data to simulate results from various sources
   • Filtering logic to show/hide results based on selected sources

The app uses Tailwind CSS for styling and incorporates some UI components from the shadcn/ui library (Input, Button, Checkbox, and Label) 1.

To use this app:

1. Enter a search query in the input field and press Enter or click the Search button.
2. The URL will update with the search query, and results will be displayed.
3. Use the checkboxes on the left to filter results by source.

Note that this is a frontend-only implementation with mock data. In a real-world scenario, you would need to:

1. Implement backend services to connect to various data sources (Confluence, JIRA, GitHub, etc.).
2. Create API endpoints to handle search requests and return results.
3. Implement proper error handling and loading states.
4. Add pagination or infinite scrolling for large result sets.
5. Implement authentication and authorization to ensure users only see results they have access to.

You can further enhance this app by adding features like:

• Advanced search options (e.g., date ranges, specific fields)
• Result highlighting to show where the search terms appear in the snippets
• Sorting options for results
• Recent searches or saved searches functionality

This Enterprise Search App provides a solid foundation that you can build upon to create a fully-featured search experience across multiple data sources.