Make new resources page (#40)

src/components/Resources/Card.tsx

@@ -0,0 +1,47 @@
+import { H2 } from '@/components/Text/Headings.tsx'
+import { FaHeart } from 'react-icons/fa'
+
+export const Card = (props: {
+    title: string
+    description: string
+    tags: string[]
+    numHearted: number
+    link: string
+}) => {
+    const { title, description, tags, numHearted, link } = props
+    return (
+        <a href={link} target="_blank" rel="noreferrer">
+            <div className="m-4 rounded border-2 border-solid border-white bg-white p-4 text-slate-900 drop-shadow-xl hover:border-orange-300">
+                <Hearted number={numHearted} />
+                <H2 title={title} />
+                <div className="p-1text-center">{description}</div>
+                <div className="mt-3 flex flex-row gap-1">
+                    {tags.map((i) => {
+                        return <Tag title={i} key={i} />
+                    })}
+                </div>
+            </div>
+        </a>
+    )
+}
+
+export const Tag = (props: { title: string }) => {
+    const { title } = props
+    return (
+        <div className="rounded-full bg-orange-300 p-1 px-2 text-sm">
+            {title}
+        </div>
+    )
+}
+
+export const Hearted = (props: { number: number }) => {
+    const { number } = props
+    return (
+        <div className="flex flex-row items-center justify-end text-right">
+            <span className="pr-1">
+                <FaHeart color="#FF5B1F" />
+            </span>
+            {number}
+        </div>
+    )
+}

src/components/Resources/FilterButtons.tsx

@@ -0,0 +1,33 @@
+import { FaHeart } from 'react-icons/fa'
+import { FaTag } from 'react-icons/fa'
+
+export const FilterButtons = () => {
+    return (
+        <div className="mt-2 flex flex-row gap-2">
+            <HeartedButton />
+            <FilterTagsButton />
+        </div>
+    )
+}
+
+const HeartedButton = () => {
+    return (
+        <div className="flex w-1/2 flex-row items-center rounded bg-orange-100 p-2 text-slate-900 hover:bg-orange-200">
+            <div className="px-2">
+                <FaHeart />
+            </div>
+            Hearted
+        </div>
+    )
+}
+
+const FilterTagsButton = () => {
+    return (
+        <div className="flex w-1/2 flex-row items-center rounded bg-orange-200 p-2 text-slate-900 hover:bg-orange-300">
+            <div className="px-2">
+                <FaTag size="20px" />
+            </div>
+            Filter Tags
+        </div>
+    )
+}

src/components/Resources/Search.tsx

@@ -0,0 +1,18 @@
+export const Search = () => {
+    return (
+        <div className="relative">
+            <input
+                type="text"
+                placeholder="search"
+                className="w-full rounded-lg border-none py-2 pl-10 pr-4"
+            />
+            <div
+                className="pointer-events-none absolute inset-y-0 left-0
+                    flex items-center
+                    pl-3"
+            >
+                <i className="fa fa-search text-gray-400"></i>
+            </div>
+        </div>
+    )
+}

src/components/Resources/Sidebar.tsx

@@ -0,0 +1,11 @@
+import { Search } from '@/components/Resources/Search.tsx'
+import { FilterButtons } from '@/components/Resources/FilterButtons.tsx'
+
+export const Sidebar = () => {
+    return (
+        <div className="w-full rounded bg-gray-200 p-4 drop-shadow-2xl">
+            <Search />
+            <FilterButtons />
+        </div>
+    )
+}

src/components/Text/Headings.tsx

@@ -6,3 +6,12 @@ export const H1 = (props: { title: string }) => {
         </h1>
     )
 }
+
+export const H2 = (props: { title: string }) => {
+    const { title } = props
+    return (
+        <h2 className="mb-4 text-center text-4xl text-gray-800 md:text-8xl">
+            {title}
+        </h2>
+    )
+}

src/main.tsx

@@ -8,6 +8,7 @@ import { SuggestionPage } from '@/views/SuggestionPage/SuggestionPage.tsx'
 import LoginPage from '@/views/AuthPages/LoginPage.tsx'
 import ChangePasswordPage from '@/views/AuthPages/ChangePasswordPage.tsx'
 import { ResourcesPage } from '@/views/ResourcesPage/ResourcesPage.tsx'
+import { XueResourcesPage } from '@/views/ResourcesPage/XueResourcesPage.tsx'
 import { PanicPage } from '@/views/PanicPage/PanicPage.tsx'
 import client from './database/client.tsx'
 
@@ -55,6 +56,10 @@ const router = createBrowserRouter([
         path: '*',
         element: <NotFoundPage />,
     },
+    {
+        path: '/xue/resources',
+        element: <XueResourcesPage />,
+    },
 ])
 
 ReactDOM.createRoot(document.getElementById('root')!).render(

src/views/ResourcesPage/XueResourcesPage.tsx

@@ -0,0 +1,53 @@
+import { Navigation } from '@/components/Navigation/Navigation.tsx'
+import { Sidebar } from '@/components/Resources/Sidebar.tsx'
+import { H1 } from '@/components/Text/Headings.tsx'
+import { Card } from '@/components/Resources/Card.tsx'
+import client from '@/database/client.tsx'
+import { QueryData } from '@supabase/supabase-js'
+import { useEffect, useState } from 'react'
+
+export const XueResourcesPage = () => {
+    // Getting the data
+    const resourcesQuery = client
+        .from('resources')
+        .select(
+            'id, name, description, num_helped, link, tag_resource(...tags(name))'
+        )
+    type ResourcesType = QueryData<typeof resourcesQuery>
+
+    const [data, setData] = useState<ResourcesType>([])
+    useEffect(() => {
+        const fetchData = async () => {
+            const { data, error } = await resourcesQuery
+            if (error) throw error
+            const resources: ResourcesType = data
+            setData(resources)
+        }
+        fetchData()
+    }, [])
+    return (
+        <div className="bg-orange-100">
+            <Navigation />
+            <H1 title="Resources" />
+            <section>
+                <Sidebar />
+            </section>
+            <section>
+                {data.map((d: any) => {
+                    return (
+                        <Card
+                            title={d.name}
+                            description={d.description}
+                            numHearted={d.num_helped}
+                            link={d.link}
+                            tags={d.tag_resource.map((tag: any) => {
+                                return tag.name
+                            })}
+                            key={d.id}
+                        />
+                    )
+                })}
+            </section>
+        </div>
+    )
+}