diff --git a/src/App.tsx b/src/App.tsx index 10d8ebe..7d5fee1 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -9,6 +9,7 @@ import { } from 'react-router-dom' import { Toaster } from '@/components/ui/sonner' import Navbar from './components/Navbar' +import Browse from './pages/Browse' import BuildNew from './pages/BuildNew' import BuildProgress from './pages/BuildProgress' import Dashboard from './pages/Dashboard' @@ -38,6 +39,7 @@ function App() { } /> + } /> } /> } /> } /> @@ -49,6 +51,7 @@ function App() { } /> + } /> } /> } /> } /> diff --git a/src/pages/Browse.tsx b/src/pages/Browse.tsx new file mode 100644 index 0000000..af21f53 --- /dev/null +++ b/src/pages/Browse.tsx @@ -0,0 +1,56 @@ +import { useQuery } from 'convex/react' +import { useNavigate } from 'react-router-dom' +import { + ProfileCardContent, + profileCardClasses, +} from '@/components/ProfileCard' +import { api } from '../../convex/_generated/api' + +export default function Browse() { + const navigate = useNavigate() + const profiles = useQuery(api.profiles.listPublic) + + return ( + + + + Browse Public Profiles + + Discover and explore firmware profiles shared by the community + + + + + {profiles === undefined ? ( + + Loading profiles... + + ) : profiles.length === 0 ? ( + + No public profiles available yet. + + ) : ( + + {profiles.map((profile) => ( + navigate(`/profiles/${profile._id}`)} + onKeyDown={(event) => { + if (event.key === 'Enter' || event.key === ' ') { + event.preventDefault() + navigate(`/profiles/${profile._id}`) + } + }} + className={`${profileCardClasses} hover:bg-slate-900 cursor-pointer transition-colors text-left`} + > + + + ))} + + )} + + + + ) +} diff --git a/src/pages/LandingPage.tsx b/src/pages/LandingPage.tsx index 70e9af8..6ac4490 100644 --- a/src/pages/LandingPage.tsx +++ b/src/pages/LandingPage.tsx @@ -1,12 +1,7 @@ import { useAuthActions } from '@convex-dev/auth/react' -import { Authenticated, Unauthenticated, useQuery } from 'convex/react' +import { Authenticated, Unauthenticated } from 'convex/react' import { useNavigate } from 'react-router-dom' -import { - ProfileCardContent, - profileCardClasses, -} from '@/components/ProfileCard' import { Button } from '@/components/ui/button' -import { api } from '../../convex/_generated/api' function QuickBuildIcon(props: React.SVGProps) { return ( @@ -25,10 +20,45 @@ function QuickBuildIcon(props: React.SVGProps) { ) } +function BrowseIcon(props: React.SVGProps) { + return ( + + Browse + + + + + + ) +} + export default function LandingPage() { const navigate = useNavigate() const { signIn } = useAuthActions() - const profiles = useQuery(api.profiles.listPublic) return ( @@ -54,6 +84,15 @@ export default function LandingPage() { Quick Build + navigate('/browse')} + size="lg" + variant="outline" + className="border-cyan-500/50 text-white hover:bg-slate-900/60" + > + + Browse + navigate('/dashboard')} @@ -135,37 +174,6 @@ export default function LandingPage() { - - - {profiles === undefined ? ( - - Loading profiles... - - ) : profiles.length === 0 ? ( - - No public profiles available yet. - - ) : ( - - {profiles.map((profile) => ( - navigate(`/profiles/${profile._id}`)} - onKeyDown={(event) => { - if (event.key === 'Enter' || event.key === ' ') { - event.preventDefault() - navigate(`/profiles/${profile._id}`) - } - }} - className={`${profileCardClasses} hover:bg-slate-900 cursor-pointer transition-colors text-left`} - > - - - ))} - - )} - )
+ Discover and explore firmware profiles shared by the community +