iarv/mesh-forge
1
0
Fork 1
mirror of https://github.com/MeshEnvy/mesh-forge.git synced 2026-03-28 17:42:55 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat: add RedditButton component and integrate it into Navbar and LandingPage

Browse Source
This commit is contained in:
Ben Allfree
2025-12-05 00:19:23 -08:00
parent 4556e8acb4
commit cb5a44a19d
3 changed files with 179 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/Navbar.tsx
View File

@@ -3,6 +3,7 @@ import { Authenticated, Unauthenticated, useQuery } from 'convex/react'
import { Link } from 'react-router-dom'
import { Button } from '@/components/ui/button'
import { DiscordButton } from '@/components/DiscordButton'
import { RedditButton } from '@/components/RedditButton'
import { api } from '../../convex/_generated/api'
export default function Navbar() {
@@ -51,6 +52,10 @@ export default function Navbar() {
variant="default"
className="bg-gradient-to-r from-indigo-500 to-purple-600 hover:from-indigo-600 hover:to-purple-700 text-white border-0 shadow-lg shadow-purple-500/50"
/>
<RedditButton
variant="default"
className="bg-gradient-to-r from-orange-500 to-red-600 hover:from-orange-600 hover:to-red-700 text-white border-0 shadow-lg shadow-orange-500/50"
/>
<Unauthenticated>
<Button
onClick={() => signIn('google', { redirectTo: window.location.href })}

168
src/components/RedditButton.tsx Normal file
View File

@@ -0,0 +1,168 @@
import { Button } from '@/components/ui/button'
import { cn } from '@/lib/utils'
function RedditIcon(props: React.SVGProps<SVGSVGElement>) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
fill="currentColor"
{...props}
>
<mask id="SVGfUZuVbjp">
<g fill="#fff">
<path
fillOpacity="0"
stroke="#fff"
strokeDasharray="48"
strokeDashoffset="48"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M12 9.42c4.42 0 8 2.37 8 5.29c0 2.92 -3.58 5.29 -8 5.29c-4.42 0 -8 -2.37 -8 -5.29c0 -2.92 3.58 -5.29 8 -5.29Z"
>
<animate
fill="freeze"
attributeName="fill-opacity"
begin="0.6s"
dur="0.4s"
values="0;1"
/>
<animate
fill="freeze"
attributeName="stroke-dashoffset"
dur="0.6s"
values="48;0"
/>
</path>
<circle cx="7.24" cy="11.97" r="2.24" opacity="0">
<animate
fill="freeze"
attributeName="cx"
begin="1s"
dur="0.2s"
values="7.24;3.94"
/>
<set fill="freeze" attributeName="opacity" begin="1s" to="1" />
</circle>
<circle cx="16.76" cy="11.97" r="2.24" opacity="0">
<animate
fill="freeze"
attributeName="cx"
begin="1s"
dur="0.2s"
values="16.76;20.06"
/>
<set fill="freeze" attributeName="opacity" begin="1s" to="1" />
</circle>
<circle cx="18.45" cy="4.23" r="1.61" opacity="0">
<animate
attributeName="cx"
begin="2.4s"
dur="6s"
repeatCount="indefinite"
values="18.45;5.75;18.45"
/>
<set fill="freeze" attributeName="opacity" begin="2.6s" to="1" />
</circle>
</g>
<path
fill="none"
stroke="#fff"
strokeDasharray="12"
strokeDashoffset="12"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth=".8"
d="M12 8.75L13.18 3.11L18.21 4.18"
>
<animate
attributeName="d"
begin="2.4s"
dur="6s"
repeatCount="indefinite"
values="M12 8.75L13.18 3.11L18.21 4.18;M12 8.75L12 2L12 4.18;M12 8.75L10.82 3.11L5.79 4.18;M12 8.75L12 2L12 4.18;M12 8.75L13.18 3.11L18.21 4.18"
/>
<animate
fill="freeze"
attributeName="stroke-dashoffset"
begin="2.4s"
dur="0.2s"
values="12;0"
/>
</path>
<g fillOpacity="0">
<circle cx="8.45" cy="13.59" r="1.61">
<animate
fill="freeze"
attributeName="fill-opacity"
begin="1.2s"
dur="0.4s"
values="0;1"
/>
</circle>
<circle cx="15.55" cy="13.59" r="1.61">
<animate
fill="freeze"
attributeName="fill-opacity"
begin="1.6s"
dur="0.4s"
values="0;1"
/>
</circle>
</g>
<path
fill="none"
stroke="#000"
strokeDasharray="10"
strokeDashoffset="10"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth=".8"
d="M8.47 17.52c0 0 0.94 1.06 3.53 1.06c2.58 0 3.53 -1.06 3.53 -1.06"
>
<animate
fill="freeze"
attributeName="stroke-dashoffset"
begin="2s"
dur="0.2s"
values="10;0"
/>
</path>
</mask>
<rect width="24" height="24" fill="currentColor" mask="url(#SVGfUZuVbjp)" />
</svg>
)
}
interface RedditButtonProps {
variant?: 'default' | 'outline' | 'ghost' | 'link' | 'destructive'
size?: 'default' | 'sm' | 'lg' | 'icon'
className?: string
}
export function RedditButton({
variant = 'outline',
size,
className,
}: RedditButtonProps) {
return (
<a
href="https://www.reddit.com/r/MeshForge/"
target="_blank"
rel="noopener noreferrer"
>
<Button
variant={variant}
size={size}
className={cn('flex items-center gap-2', className)}
>
<RedditIcon className="w-4 h-4" />
Reddit
</Button>
</a>
)
}

6
src/pages/LandingPage.tsx
View File

@@ -1,6 +1,7 @@
import { useNavigate } from 'react-router-dom'
import { Button } from '@/components/ui/button'
import { DiscordButton } from '@/components/DiscordButton'
import { RedditButton } from '@/components/RedditButton'
function QuickBuildIcon(props: React.SVGProps<SVGSVGElement>) {
return (
@@ -51,6 +52,11 @@ export default function LandingPage() {
variant="default"
className="bg-gradient-to-r from-indigo-500 to-purple-600 hover:from-indigo-600 hover:to-purple-700 text-white border-0 shadow-lg shadow-purple-500/50"
/>
<RedditButton
size="lg"
variant="default"
className="bg-gradient-to-r from-orange-500 to-red-600 hover:from-orange-600 hover:to-red-700 text-white border-0 shadow-lg shadow-orange-500/50"
/>
</div>
{/* Benefits Grid */}