feat(resources): add get_random_resources function and update resource components to include author details

Author: tyronejosee

docs/etc/queries.md

@@ -116,3 +116,51 @@ with check (
   )
 );
 ```
+
+```sql
+create or replace function get_random_resources()
+returns table (
+  id uuid,
+  name text,
+  slug text,
+  url text,
+  description text,
+  image text,
+  tags text[],
+  status text,
+  created_at timestamp with time zone,
+  category jsonb,
+  author jsonb
+)
+language sql
+as $$
+  select
+    r.id,
+    r.name,
+    r.slug,
+    r.url,
+    r.description,
+    r.image,
+    r.tags,
+    r.status,
+    r.created_at,
+    jsonb_build_object(
+      'id', c.id,
+      'name', c.name,
+      'slug', c.slug,
+      'created_at', c.created_at
+    ) as category,
+    jsonb_build_object(
+      'id', p.id,
+      'username', p.username,
+      'full_name', p.full_name,
+      'avatar_url', p.avatar_url
+    ) as author
+  from resources r
+  join categories c on r.category = c.id
+  join profiles p on r.author = p.id
+  order by random()
+  limit 10
+$$;
+
+```

src/actions/resources.ts

@@ -22,9 +22,9 @@ export const getResources = async (): Promise<ResourceList[]> => {
 
 export const getAllResources = async (): Promise<Resource[]> => {
   const supabase = await createClient();
-  const { data, error } = await supabase
-    .from("resources")
-    .select(`*, category:categories (id, name, slug, created_at)`);
+  const { data, error } = await supabase.from("resources").select(`*,
+      category:categories (id, name, slug, created_at),
+      author:profiles (id, username, full_name, avatar_url)`);
 
   if (error) throw new Error(error.message);
   return data;
@@ -84,7 +84,9 @@ export const getResourceBySlug = async (
   const supabase = await createClient();
   const { data, error } = await supabase
     .from("resources")
-    .select("*")
+    .select(
+      "*, category:categories (id, name, slug, created_at), author:profiles (id, username, full_name, avatar_url)",
+    )
     .eq("slug", slug)
     .single();
 

src/components/resources/resource-card.tsx

@@ -17,25 +17,24 @@ export default function ResourceCard({ resource }: Props) {
         <Card
           isBlurred
           radius="none"
-          className="bg-white dark:bg-neutral-950 transition-colors duration-1000 !outline-none shadow-none rounded-xl border-2 border-neutral-200 dark:border-neutral-800"
+          className="bg-white dark:bg-neutral-950 !outline-none shadow-none rounded-xl border-2 border-neutral-200 dark:border-neutral-800 group-hover:border-neutral-300 dark:group-hover:border-neutral-700"
         >
-          <figure className="relative border-b-2 border-neutral-200 dark:border-neutral-800 overflow-hidden">
-            <span className="hidden group-hover:block absolute top-2 right-2 bg-neutral-950 dark:bg-white text-white dark:text-neutral-950 px-2 py-1 rounded-lg text-xs z-50">
+          <figure className="relative border-b-2 border-neutral-200 dark:border-neutral-800 overflow-hidden aspect-[2/1]">
+            <span className="hidden group-hover:block absolute top-2 right-2 bg-neutral-950 dark:bg-white text-white dark:text-neutral-950 px-2 py-1 rounded-lg text-xs z-50 shadow-md">
               {resource.category?.name ?? "Uncategorized"}
             </span>
             <Image
               isBlurred
               src={resource.image}
               alt={resource.name}
               title={resource.name}
-              width={400}
-              height={200}
               loading="lazy"
               radius="none"
-              className="transform transition-transform duration-300 group-hover:scale-105"
+              sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw"
+              className="w-full h-full object-cover"
             />
           </figure>
-          <CardFooter>
+          <CardFooter className="min-h-[80px]">
             <div className="flex flex-col gap-2">
               <h2 className="text-sm font-medium line-clamp-2">
                 {resource.name}
@@ -47,8 +46,9 @@ export default function ResourceCard({ resource }: Props) {
                     size="sm"
                     variant="flat"
                     radius="sm"
-                    startContent={<Hash className="h-4 w-4" />}
+                    startContent={<Hash className="h-3 w-3" />}
                     className="flex items-center gap-1"
+                    classNames={{ content: "text-xs" }}
                   >
                     {tag}
                   </Chip>

src/components/resources/resource-detail.tsx

@@ -3,8 +3,7 @@
 import type { Resource } from "@/types";
 
 import Link from "next/link";
-import Image from "next/image";
-import { Avatar, Button, Card, Chip } from "@heroui/react";
+import { Avatar, Button, Card, Chip, Image } from "@heroui/react";
 import { formatDistanceToNow } from "date-fns";
 import { ArrowUpRight, Clock, Hash } from "lucide-react";
 
@@ -89,13 +88,20 @@ export default function ResourceDetail({ resource }: Props) {
             </div>
 
             <footer className="flex justify-between">
-              <div className="flex gap-4">
-                <div className="flex items-center gap-2 text-sm text-neutral-500">
-                  by{" "}
-                  <span className="text-neutral-950 dark:text-white font-medium">
-                    {comments[0].author.name}
-                  </span>
-                </div>
+              <div className="flex justify-center items-center gap-3 text-sm text-gray-500">
+                {resource.author.avatar_url && (
+                  <Image
+                    src={resource.author.avatar_url}
+                    alt={resource.author.username}
+                    width={18}
+                    height={18}
+                    radius="full"
+                    className="border-2 border-neutral-200 dark:border-neutral-800"
+                  />
+                )}
+                <span className="hover:underline">
+                  {resource.author.full_name || resource.author.username}
+                </span>
               </div>
               <div className="flex gap-2">
                 <Button

src/components/resources/resource-list.tsx

@@ -10,7 +10,7 @@ type Props = {
 
 export default function ResourceList({ resources }: Props) {
   return (
-    <section className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+    <section className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
       {resources.map((resource) => (
         <ResourceCard key={resource.id} resource={resource} />
       ))}

src/types/index.ts

@@ -33,7 +33,7 @@ export type Resource = {
   description?: string;
   image: string;
   tags: string[];
-  author: string;
+  author: ProfilePublic;
   category: Category;
   status: "pending" | "approved" | "rejected";
   created_at: string;