mirror of
https://github.com/linsa-io/linsa.git
synced 2026-01-11 20:00:23 +01:00
add search
This commit is contained in:
marshennikovaolga
1
.gitignore
vendored
1
.gitignore
vendored
@@ -13,3 +13,4 @@ pnpm-lock.yaml
|
||||
private
|
||||
past-*
|
||||
output
|
||||
dist
|
||||
|
||||
@@ -1,138 +1,131 @@
|
||||
"use client"
|
||||
import { useState } from "react"
|
||||
// import { useAccount } from "@/lib/providers/jazz-provider"
|
||||
import { IoSearch, IoCloseOutline, IoChevronForward } from "react-icons/io5"
|
||||
import { useCoState } from "@/lib/providers/jazz-provider"
|
||||
import { LaIcon } from "@/components/custom/la-icon"
|
||||
import AiSearch from "../../custom/ai-search"
|
||||
import { Topic } from "@/lib/schema"
|
||||
import { PublicGlobalGroup } from "@/lib/schema/master/public-group"
|
||||
import { ID } from "jazz-tools"
|
||||
import Link from "next/link"
|
||||
|
||||
interface ProfileTopicsProps {
|
||||
topic: string
|
||||
}
|
||||
|
||||
const ProfileTopics: React.FC<ProfileTopicsProps> = ({ topic }) => {
|
||||
return (
|
||||
<div className="bg-result flex cursor-pointer flex-row items-center justify-between rounded-lg p-3">
|
||||
<p>{topic}</p>
|
||||
<IoChevronForward className="text-black/50 dark:text-white" size={20} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
interface ProfileLinksProps {
|
||||
linklabel: string
|
||||
link: string
|
||||
topic: string
|
||||
}
|
||||
|
||||
interface ProfileTitleProps {
|
||||
interface SearchTitleProps {
|
||||
topics: string[]
|
||||
topicTitle: string
|
||||
spanNumber: number
|
||||
}
|
||||
|
||||
const ProfileTitle: React.FC<ProfileTitleProps> = ({ topicTitle, spanNumber }) => {
|
||||
const SearchTitle: React.FC<SearchTitleProps> = ({ topicTitle, topics }) => {
|
||||
return (
|
||||
<p className="pb-3 pl-2 text-base font-light text-black/50 dark:text-white/50">
|
||||
{topicTitle} <span className="text-black dark:text-white">{spanNumber}</span>
|
||||
</p>
|
||||
)
|
||||
}
|
||||
|
||||
const ProfileLinks: React.FC<ProfileLinksProps> = ({ linklabel, link, topic }) => {
|
||||
return (
|
||||
<div className="bg-result flex flex-row items-center justify-between rounded-lg p-3 text-black dark:text-white">
|
||||
<div className="flex flex-row items-center space-x-3">
|
||||
<p className="text-base">{linklabel}</p>
|
||||
<div className="flex cursor-pointer flex-row items-center gap-1">
|
||||
<p className="text-md opacity-50 transition-colors duration-300 hover:opacity-30">{link}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="cursor-default rounded-lg bg-[#888888] p-2 text-white dark:bg-[#1a1a1a] dark:text-opacity-50">
|
||||
{topic}
|
||||
<div className="flex w-full items-center">
|
||||
<h2 className="text-lg font-semibold">{topicTitle}</h2>
|
||||
<div className="mx-4 flex-grow">
|
||||
<div className="h-px bg-neutral-200 dark:bg-neutral-700"></div>
|
||||
</div>
|
||||
<span className="text-base font-light text-opacity-55">{topics.length}</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export const SearchWrapper = () => {
|
||||
// const account = useAccount()
|
||||
const [searchText, setSearchText] = useState("")
|
||||
const [aiSearch, setAiSearch] = useState("")
|
||||
const [showAiSearch, setShowAiSearch] = useState(false)
|
||||
const [showAiPlaceholder, setShowAiPlaceholder] = useState(false)
|
||||
const [searchResults, setSearchResults] = useState<Topic[]>([])
|
||||
|
||||
const inputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setSearchText(e.target.value)
|
||||
if (e.target.value.trim() !== "") {
|
||||
setShowAiPlaceholder(false)
|
||||
setTimeout(() => setShowAiPlaceholder(true), 1000)
|
||||
} else {
|
||||
setShowAiPlaceholder(false)
|
||||
setShowAiSearch(false)
|
||||
const globalGroup = useCoState(
|
||||
PublicGlobalGroup,
|
||||
process.env.NEXT_PUBLIC_JAZZ_GLOBAL_GROUP as ID<PublicGlobalGroup>,
|
||||
{
|
||||
root: {
|
||||
topics: []
|
||||
}
|
||||
}
|
||||
)
|
||||
const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const value = e.target.value
|
||||
setSearchText(value)
|
||||
|
||||
const results = value
|
||||
? globalGroup?.root.topics.filter(
|
||||
(topic): topic is Topic => topic !== null && topic.prettyName.toLowerCase().startsWith(value.toLowerCase())
|
||||
)
|
||||
: []
|
||||
setSearchResults(results)
|
||||
}
|
||||
|
||||
const clearSearch = () => {
|
||||
setSearchText("")
|
||||
setShowAiSearch(false)
|
||||
setShowAiPlaceholder(false)
|
||||
}
|
||||
|
||||
const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
|
||||
if (e.key === "Enter" && searchText.trim() !== "") {
|
||||
setShowAiSearch(true)
|
||||
setAiSearch(searchText)
|
||||
}
|
||||
setSearchResults([])
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex h-full flex-auto flex-col overflow-hidden">
|
||||
<div className="flex h-full w-full justify-center overflow-hidden">
|
||||
<div className="flex h-full w-full justify-center overflow-y-auto">
|
||||
<div className="w-full max-w-[70%] sm:px-6 lg:px-8">
|
||||
<div className="relative mb-2 mt-5 flex w-full flex-row items-center transition-colors duration-300 hover:text-white/60">
|
||||
<IoSearch className="absolute left-3 text-black/30 dark:text-white/30" size={20} />
|
||||
<input
|
||||
type="text"
|
||||
autoFocus
|
||||
value={searchText}
|
||||
onChange={inputChange}
|
||||
onKeyDown={handleKeyDown}
|
||||
className="bg-input w-full rounded-[10px] p-10 py-3 pl-10 pr-3 font-semibold tracking-wider text-black/70 outline-none placeholder:font-light dark:text-white"
|
||||
placeholder="Search..."
|
||||
/>
|
||||
|
||||
{showAiPlaceholder && searchText && !showAiSearch && (
|
||||
<div className="absolute right-10 text-sm text-black/70 dark:text-white/30">
|
||||
press "Enter" for AI search
|
||||
</div>
|
||||
)}
|
||||
{searchText && (
|
||||
<IoCloseOutline
|
||||
className="absolute right-3 cursor-pointer text-black/70 dark:text-white/30"
|
||||
size={20}
|
||||
onClick={clearSearch}
|
||||
<div className="relative mb-2 mt-5 flex w-full flex-row items-center transition-colors duration-300">
|
||||
<div className="relative my-5 flex w-full items-center space-x-2">
|
||||
<LaIcon name="Search" className="absolute left-4 size-4 flex-shrink-0 text-black/50 dark:text-white/50" />
|
||||
<input
|
||||
autoFocus
|
||||
type="text"
|
||||
value={searchText}
|
||||
onChange={handleSearch}
|
||||
placeholder="Search something..."
|
||||
className="dark:bg-input w-full rounded-lg border border-neutral-300 p-2 pl-8 focus:outline-none dark:border-neutral-600"
|
||||
/>
|
||||
|
||||
{searchText && (
|
||||
<LaIcon
|
||||
name="X"
|
||||
className="absolute right-3 size-4 flex-shrink-0 cursor-pointer text-black/50 dark:text-white/50"
|
||||
onClick={clearSearch}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative w-full pb-5">
|
||||
{searchResults.length > 0 ? (
|
||||
<div className="space-y-4">
|
||||
<SearchTitle topicTitle="Topics" topics={searchResults.map(topic => topic.prettyName)} />
|
||||
{searchResults.map((topic, index) => (
|
||||
<div key={topic.id} className="group flex min-w-0 items-center gap-x-4">
|
||||
<LaIcon
|
||||
name="Square"
|
||||
className="size-4 flex-shrink-0 opacity-0 transition-opacity duration-200 group-hover:opacity-50"
|
||||
/>
|
||||
<div className="group">
|
||||
<Link
|
||||
href={`/${topic.name}`}
|
||||
passHref
|
||||
prefetch={false}
|
||||
onClick={e => e.stopPropagation()}
|
||||
className="hover:text-primary text-sm font-medium hover:opacity-70"
|
||||
>
|
||||
{topic.prettyName}
|
||||
<span className="ml-2 text-xs opacity-45">
|
||||
{topic.latestGlobalGuide?.sections?.reduce(
|
||||
(total, section) => total + (section?.links?.length || 0),
|
||||
0
|
||||
) || 0}{" "}
|
||||
links
|
||||
</span>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="mt-5">
|
||||
{searchText && searchResults.length === 0 && !showAiSearch && (
|
||||
<div
|
||||
className="cursor-pointer rounded-lg bg-blue-700 p-4 font-semibold text-white"
|
||||
onClick={() => setShowAiSearch(true)}
|
||||
>
|
||||
✨ Didn't find what you were looking for? Ask AI
|
||||
</div>
|
||||
)}
|
||||
{showAiSearch && <AiSearch searchQuery={searchText} />}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="my-5 rounded-lg bg-blue-600 p-4 font-semibold text-white">✨ Ask AI</div>
|
||||
{showAiSearch ? (
|
||||
<div className="relative w-full">
|
||||
<div className="absolute left-1/2 w-[110%] -translate-x-1/2">
|
||||
<AiSearch searchQuery={searchText} />
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="my-5 space-y-1">
|
||||
<ProfileTitle topicTitle="Topics" spanNumber={1} />
|
||||
<ProfileTopics topic="Figma" />
|
||||
</div>
|
||||
<div className="my-5 space-y-1">
|
||||
<ProfileTitle topicTitle="Links" spanNumber={3} />
|
||||
<ProfileLinks linklabel="Figma" link="https://figma.com" topic="Figma" />
|
||||
<ProfileLinks linklabel="Figma" link="https://figma.com" topic="Figma" />
|
||||
<ProfileLinks linklabel="Figma" link="https://figma.com" topic="Figma" />
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user