mirror of
https://github.com/linsa-io/linsa.git
synced 2026-01-12 12:20:23 +01:00
feat(landing): topic search (#134)
* feat(landing): topic search * fix: node click
This commit is contained in:
Aslam
@@ -1,70 +0,0 @@
|
||||
"use client"
|
||||
import * as react from "react"
|
||||
import { useCoState } from "@/lib/providers/jazz-provider"
|
||||
import { PublicGlobalGroup } from "@/lib/schema/master/public-group"
|
||||
import dynamic from "next/dynamic"
|
||||
import Link from "next/link"
|
||||
import { JAZZ_GLOBAL_GROUP_ID } from "@/lib/constants"
|
||||
|
||||
let graph_data_promise = import("./graph-data.json").then(a => a.default)
|
||||
const ForceGraphClient = dynamic(() => import("./force-graph-client-lazy"), { ssr: false })
|
||||
|
||||
export function PublicHomeRoute() {
|
||||
let raw_graph_data = react.use(graph_data_promise)
|
||||
|
||||
const [placeholder, setPlaceholder] = react.useState("Search something...")
|
||||
const [currentTopicIndex, setCurrentTopicIndex] = react.useState(0)
|
||||
const [currentCharIndex, setCurrentCharIndex] = react.useState(0)
|
||||
const globalGroup = useCoState(PublicGlobalGroup, JAZZ_GLOBAL_GROUP_ID, {
|
||||
root: {
|
||||
topics: []
|
||||
}
|
||||
})
|
||||
const topics = globalGroup?.root.topics?.map(topic => topic?.prettyName) || []
|
||||
|
||||
react.useEffect(() => {
|
||||
if (topics.length === 0) return
|
||||
|
||||
const typingInterval = setInterval(() => {
|
||||
const currentTopic = topics[currentTopicIndex]
|
||||
if (currentTopic && currentCharIndex < currentTopic.length) {
|
||||
setPlaceholder(`${currentTopic.slice(0, currentCharIndex + 1)}`)
|
||||
setCurrentCharIndex(currentCharIndex + 1)
|
||||
} else {
|
||||
clearInterval(typingInterval)
|
||||
setTimeout(() => {
|
||||
setCurrentTopicIndex(prevIndex => (prevIndex + 1) % topics.length)
|
||||
setCurrentCharIndex(0)
|
||||
}, 1000)
|
||||
}
|
||||
}, 200)
|
||||
|
||||
return () => clearInterval(typingInterval)
|
||||
}, [currentTopicIndex, currentCharIndex, topics])
|
||||
|
||||
return (
|
||||
<div className="relative h-full w-screen">
|
||||
<ForceGraphClient
|
||||
raw_nodes={raw_graph_data}
|
||||
onNodeClick={val => {
|
||||
console.log("clicked", val)
|
||||
}}
|
||||
filter_query=""
|
||||
/>
|
||||
<div className="absolute left-0 top-0 z-20 p-4">
|
||||
<h2 className="text-xl font-bold text-black dark:text-white">Learn Anything</h2>
|
||||
<Link href={"/1password"}>Random Topic</Link>
|
||||
</div>
|
||||
<div className="absolute left-1/2 top-1/2 z-10 w-[60%] -translate-x-1/2 -translate-y-1/2 transform">
|
||||
<div className="flex flex-col items-center justify-center gap-6">
|
||||
<h1 className="text-center text-5xl font-bold uppercase text-black dark:text-white">i want to learn</h1>
|
||||
<input
|
||||
type="text"
|
||||
placeholder={placeholder}
|
||||
className="bg-result w-[70%] rounded-md border px-6 py-3 text-lg shadow-lg placeholder:text-black/40 focus:outline-none active:outline-none dark:placeholder:text-white/40"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
123
web/components/routes/public/Autocomplete.tsx
Normal file
123
web/components/routes/public/Autocomplete.tsx
Normal file
@@ -0,0 +1,123 @@
|
||||
"use client"
|
||||
|
||||
import React, { useState, useRef, useCallback, useMemo } from "react"
|
||||
import { Command, CommandGroup, CommandItem, CommandList } from "@/components/ui/command"
|
||||
import { Command as CommandPrimitive } from "cmdk"
|
||||
import { motion, AnimatePresence } from "framer-motion"
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
interface GraphNode {
|
||||
name: string
|
||||
prettyName: string
|
||||
connectedTopics: string[]
|
||||
}
|
||||
|
||||
interface AutocompleteProps {
|
||||
topics: GraphNode[]
|
||||
onSelect: (topic: GraphNode) => void
|
||||
onInputChange: (value: string) => void
|
||||
}
|
||||
|
||||
export function Autocomplete({ topics = [], onSelect, onInputChange }: AutocompleteProps): JSX.Element {
|
||||
const inputRef = useRef<HTMLInputElement>(null)
|
||||
const [open, setOpen] = useState(false)
|
||||
const [inputValue, setInputValue] = useState("")
|
||||
|
||||
const filteredTopics = useMemo(() => {
|
||||
if (!inputValue) {
|
||||
return topics.slice(0, 5)
|
||||
}
|
||||
const regex = new RegExp(inputValue.split("").join(".*"), "i")
|
||||
return topics.filter(
|
||||
topic =>
|
||||
regex.test(topic.name) ||
|
||||
regex.test(topic.prettyName) ||
|
||||
topic.connectedTopics.some(connectedTopic => regex.test(connectedTopic))
|
||||
)
|
||||
}, [inputValue, topics])
|
||||
|
||||
const handleSelect = useCallback(
|
||||
(topic: GraphNode) => {
|
||||
setInputValue(topic.prettyName)
|
||||
setOpen(false)
|
||||
onSelect(topic)
|
||||
},
|
||||
[onSelect]
|
||||
)
|
||||
|
||||
const handleKeyDown = useCallback(
|
||||
(e: React.KeyboardEvent<HTMLDivElement>) => {
|
||||
if (e.key === "Enter" && filteredTopics.length > 0) {
|
||||
handleSelect(filteredTopics[0])
|
||||
} else if ((e.key === "Backspace" || e.key === "Delete") && inputRef.current?.value === "") {
|
||||
setOpen(true)
|
||||
}
|
||||
},
|
||||
[filteredTopics, handleSelect]
|
||||
)
|
||||
|
||||
const handleInputChange = useCallback(
|
||||
(value: string) => {
|
||||
setInputValue(value)
|
||||
setOpen(true)
|
||||
onInputChange(value)
|
||||
},
|
||||
[onInputChange]
|
||||
)
|
||||
|
||||
return (
|
||||
<Command
|
||||
className={cn("bg-background relative overflow-visible", {
|
||||
"rounded-lg border": !open,
|
||||
"rounded-none rounded-t-lg border-l border-r border-t": open
|
||||
})}
|
||||
onKeyDown={handleKeyDown}
|
||||
>
|
||||
<div className="flex items-center p-2">
|
||||
<CommandPrimitive.Input
|
||||
ref={inputRef}
|
||||
value={inputValue}
|
||||
onValueChange={handleInputChange}
|
||||
onBlur={() => setTimeout(() => setOpen(false), 100)}
|
||||
onFocus={() => setOpen(true)}
|
||||
placeholder="Search for a topic..."
|
||||
className={cn("placeholder:text-muted-foreground flex-1 bg-transparent px-2 py-1 outline-none", {
|
||||
"mb-1 border-b pb-2.5": open
|
||||
})}
|
||||
/>
|
||||
</div>
|
||||
<div className="relative">
|
||||
<AnimatePresence>
|
||||
{open && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: -10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -10 }}
|
||||
transition={{ duration: 0.1 }}
|
||||
className="bg-background absolute left-0 right-0 z-10 -mx-px rounded-b-lg border-b border-l border-r shadow-lg"
|
||||
>
|
||||
<CommandList className="max-h-52">
|
||||
<CommandGroup className="mb-2">
|
||||
{filteredTopics.map(topic => (
|
||||
<CommandItem
|
||||
key={topic.name}
|
||||
onSelect={() => handleSelect(topic)}
|
||||
className="min-h-10 rounded-none px-3 py-1.5"
|
||||
>
|
||||
<span>{topic.prettyName}</span>
|
||||
<span className="text-muted-foreground ml-auto text-xs">
|
||||
{topic.connectedTopics.length > 0 ? topic.connectedTopics.join(", ") : "-"}
|
||||
</span>
|
||||
</CommandItem>
|
||||
))}
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
</Command>
|
||||
)
|
||||
}
|
||||
|
||||
export default Autocomplete
|
||||
65
web/components/routes/public/PublicHomeRoute.tsx
Normal file
65
web/components/routes/public/PublicHomeRoute.tsx
Normal file
@@ -0,0 +1,65 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import dynamic from "next/dynamic"
|
||||
import { motion } from "framer-motion"
|
||||
import { Autocomplete } from "./Autocomplete"
|
||||
import { useRouter } from "next/navigation"
|
||||
|
||||
let graph_data_promise = import("./graph-data.json").then(a => a.default)
|
||||
|
||||
const ForceGraphClient = dynamic(() => import("./force-graph-client-lazy"), { ssr: false })
|
||||
|
||||
interface GraphNode {
|
||||
name: string
|
||||
prettyName: string
|
||||
connectedTopics: string[]
|
||||
}
|
||||
|
||||
export function PublicHomeRoute() {
|
||||
const router = useRouter()
|
||||
const raw_graph_data = React.use(graph_data_promise) as GraphNode[]
|
||||
const [filterQuery, setFilterQuery] = React.useState<string>("")
|
||||
|
||||
const handleTopicSelect = (topicName: string) => {
|
||||
router.push(`/${topicName}`)
|
||||
}
|
||||
|
||||
const handleInputChange = (value: string) => {
|
||||
setFilterQuery(value)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="relative h-full w-screen">
|
||||
<ForceGraphClient
|
||||
raw_nodes={raw_graph_data}
|
||||
onNodeClick={val => handleTopicSelect(val)}
|
||||
filter_query={filterQuery}
|
||||
/>
|
||||
|
||||
<motion.div
|
||||
className="absolute left-1/2 top-1/2 w-full max-w-md -translate-x-1/2 -translate-y-1/2 transform max-sm:px-5"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5 }}
|
||||
style={{ x: "-50%", y: "-50%" }}
|
||||
>
|
||||
<motion.h1
|
||||
className="mb-2 text-center text-3xl font-bold uppercase sm:mb-4 md:text-5xl"
|
||||
initial={{ opacity: 0, y: -20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5, delay: 0.2 }}
|
||||
>
|
||||
I want to learn
|
||||
</motion.h1>
|
||||
<Autocomplete
|
||||
topics={raw_graph_data}
|
||||
onSelect={topic => handleTopicSelect(topic.name)}
|
||||
onInputChange={handleInputChange}
|
||||
/>
|
||||
</motion.div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default PublicHomeRoute
|
||||
Reference in New Issue
Block a user