refactor: update website

Androz2091 · Nov 19, 2023 · cfda802 · cfda802
1 parent d2221bc
commit cfda802
Show file tree

Hide file tree

Showing 15 changed files with 425 additions and 201 deletions.
diff --git a/apps/website/src/components/docs/entities/Example.tsx b/apps/website/src/components/docs/entities/Example.tsx
@@ -1,3 +1,4 @@
+import { jbMono } from '@/lib/constants';
 import { getExampleText } from '@/lib/util';
 import { CodeBlock, Heading } from '@edge-ui/react';
 
@@ -8,15 +9,17 @@ export function Example({ item }: { item: { examples?: string[] } }) {
         <div className="space-y-3 mt-2">
             <Heading.H4>Examples</Heading.H4>
 
-            {item.examples.map((example, idx) => {
-                const data = getExampleText(example);
+            <div>
+                {item.examples.map((example, idx) => {
+                    const data = getExampleText(example);
 
-                return (
-                    <CodeBlock key={idx} language={data.language} lines>
-                        {data.code}
-                    </CodeBlock>
-                );
-            })}
+                    return (
+                        <CodeBlock key={idx} language={data.language} lines>
+                            {data.code}
+                        </CodeBlock>
+                    );
+                })}
+            </div>
         </div>
     );
 }
diff --git a/apps/website/src/components/docs/entities/Type.tsx b/apps/website/src/components/docs/entities/Type.tsx
@@ -2,10 +2,10 @@ import { docsLink } from '@/lib/docs';
 import { cleanupTypes } from '@/lib/util';
 import { cn } from '@edge-ui/react';
 import Link from 'next/link';
-import { useCallback } from 'react';
+import { useMemo } from 'react';
 
 export function Type({ types, prefix }: { types: string[]; prefix?: string }) {
-    const findType = useCallback(() => {
+    const resolvedType = useMemo(() => {
         const resolved: JSX.Element[] = [];
 
         types = cleanupTypes(types);
@@ -53,7 +53,7 @@ export function Type({ types, prefix }: { types: string[]; prefix?: string }) {
     return (
         <div className="flex flex-row items-center">
             {prefix ? <span className="mr-2">{prefix}</span> : null}
-            {findType()}
+            {resolvedType}
         </div>
     );
 }
diff --git a/apps/website/src/components/footer/index.tsx b/apps/website/src/components/footer/index.tsx
@@ -0,0 +1,106 @@
+import Link from 'next/link';
+import { TextMark } from '../assets/TextMark';
+import { cn } from '@edge-ui/react';
+
+export default function Footer() {
+    return (
+        <footer className="border-t py-4 px-16">
+            <div className="flex items-start justify-around">
+                <div className="flex flex-col items-center">
+                    <TextMark />
+                    <h2 className={cn('text-lg font-bold select-none')}>Discord Player</h2>
+                </div>
+                <div className="flex items-start gap-16">
+                    <div className="flex items-start flex-col text-sm">
+                        <h3 className="font-semibold">Links</h3>
+                        <Link href="/docs" className="text-blue-500">
+                            Documentation
+                        </Link>
+                        <Link href="/guide" className="text-blue-500">
+                            Guides
+                        </Link>
+                        <Link href="/showcase" className="text-blue-500">
+                            Showcase
+                        </Link>
+                    </div>
+                    <div className="flex items-start flex-col text-sm">
+                        <h3 className="font-semibold">Social</h3>
+                        <Link href="https://github.com/Androz2091" className="text-blue-500">
+                            GitHub
+                        </Link>
+                        <Link href="https://androz2091.fr/discord" className="text-blue-500">
+                            Discord
+                        </Link>
+                    </div>
+                    <div className="flex items-start flex-col text-sm">
+                        <h3 className="font-semibold">About</h3>
+                        <Link href="/privacy" className="text-blue-500">
+                            Privacy Policy
+                        </Link>
+                        <Link href="/legal" className="text-blue-500">
+                            Legal
+                        </Link>
+                        <Link href="/contributing" className="text-blue-500">
+                            Contributing
+                        </Link>
+                    </div>
+                </div>
+            </div>
+            <div className="flex flex-col items-center justify-center mt-6">
+                <span className="text-sm text-muted font-medium">
+                    Made with ❤️ by{' '}
+                    <Link href="https://github.com/Androz2091" className="text-blue-500">
+                        Androz2091
+                    </Link>{' '}
+                    and{' '}
+                    <Link href="https://github.com/twlite" className="text-blue-500">
+                        twlite
+                    </Link>
+                </span>
+                <span className="text-sm text-muted">
+                    © {new Date().getFullYear()}{' '}
+                    <Link href="https://github.com/Androz2091" className="text-blue-500">
+                        Androz2091
+                    </Link>{' '}
+                    - Not affiliated with{' '}
+                    <Link className="text-blue-500" href="https://discord.com">
+                        Discord
+                    </Link>
+                </span>
+            </div>
+        </footer>
+    );
+}
+
+/*
+<footer className="border-t py-4">
+            <div className="flex items-center justify-around">
+                <div>
+                    <Link href="/" className="mr-6 flex items-center space-x-2">
+                        <TextMark className="h-10 w-10" />
+                    </Link>
+                </div>
+                <div className="flex items-start gap-8">
+                    
+                </div>
+            </div>
+            <div className="flex flex-col items-start justify-start mt-3">
+                <span className="text-sm text-muted font-medium">
+                    Made with ❤️ by{' '}
+                    <Link href="https://github.com/Androz2091" className="text-blue-500">
+                        Androz2091
+                    </Link>{' '}
+                    and{' '}
+                    <Link href="https://github.com/twlite" className="text-blue-500">
+                        twlite
+                    </Link>
+                </span>
+                <span className="text-sm text-muted">
+                    © {new Date().getFullYear()}{' '}
+                    <Link href="https://github.com/Androz2091" className="text-blue-500">
+                        Androz2091
+                    </Link>
+                </span>
+            </div>
+        </footer>
+*/
diff --git a/apps/website/src/components/homepage/Hero.tsx b/apps/website/src/components/homepage/Hero.tsx
@@ -1,5 +1,6 @@
-import { firaCode, orbitron } from '@/lib/constants';
-import { Button, cn, GitHubIcon, Heading, Label } from '@edge-ui/react';
+import { jbMono, orbitron } from '@/lib/constants';
+import { Separator, Button, cn, GitHubIcon, Heading, Label } from '@edge-ui/react';
+import { ArrowRight } from 'lucide-react';
 import Link from 'next/link';
 import React from 'react';
 import DiscordInvite from './DiscordInvite';
@@ -17,6 +18,11 @@ export default function Hero() {
                     library and offers a comprehensive set of customizable tools, making it one of the most feature enrich framework in town.
                 </Heading.H5>
             </div>
+            <div className="mt-5">
+                <Link href={'https://github.com/twlite/music-bot'} className="inline-flex items-center rounded-lg bg-muted px-3 py-1 text-sm font-medium">
+                    🎉 <Separator orientation="vertical" /> Get started with our music bot example <ArrowRight className="h-4 w-4" />
+                </Link>
+            </div>
             <div className="flex items-center gap-4 mt-6 px-4 flex-col md:flex-row w-full md:w-auto">
                 <Link href="/docs" className="w-full md:w-auto">
                     <Button size="lg" className="w-full md:w-auto">
@@ -31,10 +37,11 @@ export default function Hero() {
                 </Link>
             </div>
             <div className="mt-5">
-                <Label className={cn(firaCode.className, 'text-muted-foreground')}>
+                <Label className={cn(jbMono.className, 'text-muted-foreground')}>
                     <span className="select-none">$</span> npm i --save discord-player
                 </Label>
             </div>
+
             <div className="mt-5">
                 <DiscordInvite />
             </div>

diff --git a/apps/website/src/components/layout/Layout.tsx b/apps/website/src/components/layout/Layout.tsx
@@ -1,10 +1,12 @@
+import Footer from '../footer';
 import Navbar from '../nav/Navbar';
 
 export function AppLayout({ children }: React.PropsWithChildren) {
     return (
         <>
             <Navbar />
             <div className="transition-all">{children}</div>
+            <Footer />
         </>
     );
 }
diff --git a/apps/website/src/components/scrolltop/ScrollTop.tsx b/apps/website/src/components/scrolltop/ScrollTop.tsx