starred/linsa-linsa-io
1
0
Fork 0
mirror of https://github.com/linsa-io/linsa.git synced 2026-03-31 22:23:28 +02:00
Code Issues 2 Packages Projects Releases Wiki Activity

/ route for force graph, /links for links

Browse Source
This commit is contained in:
marshennikovaolga
2024-09-06 13:34:03 +03:00
parent 3014116b56
commit fbc9fd156c
8 changed files with 53 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
web/components/routes/public/PublicHomeRoute.tsx
View File

@@ -5,6 +5,7 @@ import dynamic from "next/dynamic"
import { motion } from "framer-motion"
import { Autocomplete } from "./Autocomplete"
import { useRouter } from "next/navigation"
import { useAccount } from "@/lib/providers/jazz-provider"
let graph_data_promise = import("./graph-data.json").then(a => a.default)
@@ -20,6 +21,7 @@ export function PublicHomeRoute() {
const router = useRouter()
const raw_graph_data = React.use(graph_data_promise) as GraphNode[]
const [filterQuery, setFilterQuery] = React.useState<string>("")
const { me } = useAccount()
const handleTopicSelect = (topicName: string) => {
router.push(`/${topicName}`)
@@ -30,35 +32,37 @@ export function PublicHomeRoute() {
}
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}
<>
<div className="relative h-full w-screen">
<ForceGraphClient
raw_nodes={raw_graph_data}
onNodeClick={val => handleTopicSelect(val)}
filter_query={filterQuery}
/>
</motion.div>
</div>
<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>
</>
)
}