Skip to content

Commit 4e9fae1

Browse files
g-francescag-francesca
authored
Merge pull request #36 from oramasearch/feature/o-3197
Feature/o-3197
2 parents ea9a112 + 8d8b6c5 commit 4e9fae1

10 files changed

Lines changed: 1184 additions & 1183 deletions

File tree

‎apps/demo-next/app/components/ComponentShowcase.tsx‎

Lines changed: 275 additions & 272 deletions
Large diffs are not rendered by default.

‎apps/demo-next/app/components/SearchBox.tsx‎

Lines changed: 96 additions & 96 deletions
Large diffs are not rendered by default.

‎apps/demo-next/app/components/SearchBoxModal.tsx‎

Lines changed: 74 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -1,88 +1,88 @@
1-
'use client'
2-
import React from 'react'
3-
import { X, Search, FileText, Users, Settings, File } from 'lucide-react'
4-
import { oramaDocsCollection } from '@/data'
1+
"use client";
2+
import React from "react";
3+
import { X, Search, FileText, Users, Settings, File } from "lucide-react";
4+
import { oramaDocsCollection } from "@/data";
55
import {
66
SearchInput,
77
SearchRoot,
88
ChatRoot,
99
SearchResults,
1010
Suggestions,
1111
Modal,
12-
RecentSearches
13-
} from '@orama/ui/components'
14-
import { Hit } from '@orama/core'
15-
import Link from 'next/link'
12+
RecentSearches,
13+
} from "@orama/ui/components";
14+
import { Hit } from "@orama/core";
15+
import Link from "next/link";
1616

1717
const mockInitialContent = [
1818
{
1919
id: 1,
20-
title: 'Getting Started Guide',
21-
type: 'documentation',
22-
icon: FileText
20+
title: "Getting Started Guide",
21+
type: "documentation",
22+
icon: FileText,
2323
},
24-
{ id: 2, title: 'User Management', type: 'feature', icon: Users },
25-
{ id: 3, title: 'API Configuration', type: 'settings', icon: Settings }
26-
]
24+
{ id: 2, title: "User Management", type: "feature", icon: Users },
25+
{ id: 3, title: "API Configuration", type: "settings", icon: Settings },
26+
];
2727

2828
export const InnerSearchBox = () => {
2929
return (
3030
<>
31-
<div className='w-full h-full flex flex-col bg-white rounded-lg shadow-lg overflow-hidden'>
32-
<div className='flex flex-col justify-between gap-2 h-full'>
33-
<SearchInput.Wrapper className='flex items-center border-b border-gray-200 px-4 py-3'>
34-
<Search className='w-4 h-4 text-gray-400 mr-3' />
31+
<div className="w-full h-full flex flex-col bg-white rounded-lg shadow-lg overflow-hidden">
32+
<div className="flex flex-col justify-between gap-2 h-full">
33+
<SearchInput.Wrapper className="flex items-center border-b border-gray-200 px-4 py-3">
34+
<Search className="w-4 h-4 text-gray-400 mr-3" />
3535
<SearchInput.Input
36-
inputId='product-search'
37-
ariaLabel='Search for products'
36+
inputId="product-search"
37+
ariaLabel="Search for products"
3838
autoFocus
39-
placeholder='Find your next favorite thing...'
40-
className='flex-1 outline-none text-sm'
39+
placeholder="Find your next favorite thing..."
40+
className="flex-1 outline-none text-sm"
4141
searchParams={{
42-
groupedBy: 'category'
42+
groupedBy: "category",
4343
}}
4444
/>
4545
</SearchInput.Wrapper>
4646

47-
<SearchResults.Loading className='p-4'>
48-
<div className='animate-pulse flex space-x-4'>
49-
<div className='rounded-full bg-gray-300 h-10 w-10'></div>
50-
<div className='flex-1 space-y-4 py-1'>
51-
<div className='h-4 bg-gray-300 rounded w-3/4'></div>
52-
<div className='space-y-2'>
53-
<div className='h-4 bg-gray-300 rounded'></div>
54-
<div className='h-4 bg-gray-300 rounded w-5/6'></div>
47+
<SearchResults.Loading className="p-4">
48+
<div className="animate-pulse flex space-x-4">
49+
<div className="rounded-full bg-gray-300 h-10 w-10"></div>
50+
<div className="flex-1 space-y-4 py-1">
51+
<div className="h-4 bg-gray-300 rounded w-3/4"></div>
52+
<div className="space-y-2">
53+
<div className="h-4 bg-gray-300 rounded"></div>
54+
<div className="h-4 bg-gray-300 rounded w-5/6"></div>
5555
</div>
5656
</div>
5757
</div>
5858
</SearchResults.Loading>
5959

60-
<SearchResults.NoResults className='p-4 overflow-auto'>
60+
<SearchResults.NoResults className="p-4 overflow-auto">
6161
{(searchTerm) => (
6262
<>
6363
{searchTerm ? (
64-
<div className='p-8 text-center text-gray-500'>
65-
<Search className='w-8 h-8 mx-auto mb-2 text-gray-300' />
64+
<div className="p-8 text-center text-gray-500">
65+
<Search className="w-8 h-8 mx-auto mb-2 text-gray-300" />
6666
<p>No results found for &quot;{searchTerm}&quot;</p>
6767
</div>
6868
) : (
6969
<>
70-
<Suggestions.Wrapper className='flex flex-col justify-center'>
71-
<p className='text-sm text-slate-800 font-semibold mb-2'>
70+
<Suggestions.Wrapper className="flex flex-col justify-center">
71+
<p className="text-sm text-slate-800 font-semibold mb-2">
7272
Highlighted content
7373
</p>
74-
<ul className='mt-1 space-y-1'>
74+
<ul className="mt-1 space-y-1">
7575
{mockInitialContent.map((item) => (
7676
<li key={item.id}>
77-
<a className='flex items-center gap-3 p-3 rounded-lg hover:bg-gray-50 cursor-pointer w-full'>
78-
<div className='w-8 h-8 rounded-lg bg-purple-100 flex items-center justify-center'>
79-
<item.icon className='w-4 h-4 text-purple-600' />
77+
<a className="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-50 cursor-pointer w-full">
78+
<div className="w-8 h-8 rounded-lg bg-purple-100 flex items-center justify-center">
79+
<item.icon className="w-4 h-4 text-purple-600" />
8080
</div>
81-
<div className='text-left'>
82-
<div className='font-medium text-sm'>
81+
<div className="text-left">
82+
<div className="font-medium text-sm">
8383
{item.title}
8484
</div>
85-
<div className='text-xs text-gray-500 capitalize'>
85+
<div className="text-xs text-gray-500 capitalize">
8686
{item.type}
8787
</div>
8888
</div>
@@ -92,26 +92,26 @@ export const InnerSearchBox = () => {
9292
</ul>
9393
</Suggestions.Wrapper>
9494
<RecentSearches.Provider>
95-
<div className='border-t border-slate-200 dark:border-slate-700 my-4 flex flex-col justify-center pt-4'>
96-
<p className='text-sm text-slate-800 font-semibold mb-2'>
95+
<div className="border-t border-slate-200 dark:border-slate-700 my-4 flex flex-col justify-center pt-4">
96+
<p className="text-sm text-slate-800 font-semibold mb-2">
9797
Your Recent Searches
9898
</p>
9999
<RecentSearches.List
100-
className='space-y-1'
101-
itemClassName='px-3'
100+
className="space-y-1"
101+
itemClassName="px-3"
102102
>
103103
{(term, index) => (
104104
<RecentSearches.Item
105105
key={`recent-search-${index}`}
106106
term={term}
107-
className='text-xs uppercase text-gray-500 hover:text-gray-700 cursor-pointer'
107+
className="text-xs uppercase text-gray-500 hover:text-gray-700 cursor-pointer"
108108
>
109109
{term}
110110
</RecentSearches.Item>
111111
)}
112112
</RecentSearches.List>
113-
<div className='flex justify-end'>
114-
<RecentSearches.Clear className='text-xs text-slate-400 hover:underline cursor-pointer mb-2'>
113+
<div className="flex justify-end">
114+
<RecentSearches.Clear className="text-xs text-slate-400 hover:underline cursor-pointer mb-2">
115115
Clear recent searches
116116
</RecentSearches.Clear>
117117
</div>
@@ -123,33 +123,33 @@ export const InnerSearchBox = () => {
123123
)}
124124
</SearchResults.NoResults>
125125

126-
<div className='flex-1 min-h-0 flex flex-col overflow-y-auto'>
127-
<SearchResults.Wrapper className='px-4 py-2'>
126+
<div className="flex-1 min-h-0 flex flex-col overflow-y-auto">
127+
<SearchResults.Wrapper className="px-4 py-2">
128128
<SearchResults.List
129-
className='space-y-0'
130-
itemClassName='border-b-neutral-200 border-b-1 last:border-b-0'
129+
className="space-y-0"
130+
itemClassName="border-b-neutral-200 border-b-1 last:border-b-0"
131131
>
132132
{(result: Hit) => (
133133
<SearchResults.Item
134134
as={Link}
135-
href='#'
136-
className='flex gap-4 items-center px-2 py-3 hover:bg-gray-50 transition-colors duration-200 cursor-pointer focus:outline-none focus:bg-gray-100 rounded-lg'
135+
href="#"
136+
className="flex gap-4 items-center px-2 py-3 hover:bg-gray-50 transition-colors duration-200 cursor-pointer focus:outline-none focus:bg-gray-100 rounded-lg"
137137
data-focus-on-arrow-nav
138138
>
139-
<div className='w-8 h-8 rounded-lg bg-purple-100 flex items-center justify-center'>
140-
<File className='w-4 h-4 text-purple-600 flex-shrink-0' />
139+
<div className="w-8 h-8 rounded-lg bg-purple-100 flex items-center justify-center">
140+
<File className="w-4 h-4 text-purple-600 flex-shrink-0" />
141141
</div>
142-
<div className='flex-1 min-w-0'>
142+
<div className="flex-1 min-w-0">
143143
{(result.document?.title as string) && (
144-
<h3 className='text-sm font-semibold text-slate-800'>
144+
<h3 className="text-sm font-semibold text-slate-800">
145145
{result.document?.title as string}
146146
</h3>
147147
)}
148148
{(result.document?.content as string) && (
149-
<p className='text-sm text-slate-500 text-ellipsis overflow-hidden'>
149+
<p className="text-sm text-slate-500 text-ellipsis overflow-hidden">
150150
{(result.document?.content as string).substring(
151151
0,
152-
100
152+
100,
153153
)}
154154
...
155155
</p>
@@ -163,8 +163,8 @@ export const InnerSearchBox = () => {
163163
</div>
164164
</div>
165165
</>
166-
)
167-
}
166+
);
167+
};
168168

169169
export const SearchBoxModal = () => {
170170
// const [openModal, setOpenModal] = useState(false);
@@ -185,35 +185,35 @@ export const SearchBoxModal = () => {
185185
</button> */}
186186
<Modal.Trigger
187187
enableCmdK
188-
className='w-full max-w-md mx-auto flex items-center justify-start gap-3 py-2 bg-white/50 hover:bg-white/80 border border-gray-200 px-2 rounded-lg'
188+
className="w-full max-w-md mx-auto flex items-center justify-start gap-3 py-2 bg-white/50 hover:bg-white/80 border border-gray-200 px-2 rounded-lg"
189189
>
190-
<Search className='w-4 h-4 text-gray-400' />
191-
<span className='text-gray-500'>Search everything...</span>
190+
<Search className="w-4 h-4 text-gray-400" />
191+
<span className="text-gray-500">Search everything...</span>
192192
</Modal.Trigger>
193193
<Modal.Wrapper
194194
// open={openModal}
195195
// onModalClosed={() => setOpenModal(false)}
196196
closeOnOutsideClick={true}
197197
closeOnEscape={true}
198-
className='bg-gray-900/40'
198+
className="bg-gray-900/40"
199199
>
200-
<Modal.Inner className='flex max-w-lg h-120 m-auto bg-white'>
200+
<Modal.Inner className="flex max-w-lg h-120 m-auto bg-white">
201201
<Modal.Content>
202202
<SearchRoot
203203
client={oramaDocsCollection}
204-
namespace='demo-default-search'
204+
namespace="demo-default-search"
205205
>
206206
<ChatRoot client={oramaDocsCollection}>
207207
<InnerSearchBox />
208208
</ChatRoot>
209209
</SearchRoot>
210210
</Modal.Content>
211-
<Modal.Close className='absolute top-4 right-4 text-gray-500 hover:text-gray-800 dark:hover:text-gray-200 transition-colors cursor-pointer'>
212-
<X className='w-4 h-4' />
211+
<Modal.Close className="absolute top-4 right-4 text-gray-500 hover:text-gray-800 dark:hover:text-gray-200 transition-colors cursor-pointer">
212+
<X className="w-4 h-4" />
213213
</Modal.Close>
214214
</Modal.Inner>
215215
</Modal.Wrapper>
216216
</Modal.Root>
217217
</>
218-
)
219-
}
218+
);
219+
};

0 commit comments

Comments
 (0)