FIX: link color (#55)

depapp · Nov 24, 2024 · e694d8c · e694d8c
1 parent 4275701
commit e694d8c
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 32 deletions.
diff --git a/src/components/TableUser/card-users.tsx b/src/components/TableUser/card-users.tsx
@@ -18,12 +18,12 @@ import {
 } from '@tanstack/react-table';
 import { ClockIcon } from 'lucide-react';
 import { Fragment, useState } from 'react';
+import { Link } from 'react-router-dom';
 import { Avatar, AvatarFallback, AvatarImage } from '../ui/avatar';
 import { DEFAULT_CLASSNAMES_RANK, renderRank } from './column';
 import { DataTablePagination } from './data-table-pagination';
 import { DataTableRowActions } from './data-table-row-actions';
 import { DataTableToolbar } from './data-table-toolbar';
-import { Link } from 'react-router-dom';
 
 interface DataTableProps<TData, TValue> {
   columns: ColumnDef<TData, TValue>[];
@@ -37,21 +37,26 @@ function renderRowUser({ row }: { row: Row<User> }) {
     <div className="w-full px-4 py-2 rounded gap-4 grid border-b">
       <div className="flex justify-between">
         <div className="flex items-center gap-2">
-          <Avatar>
-            <AvatarImage src={user?.avatarUrl} />
-            <AvatarFallback>
-              {makeInitial(user?.name || user?.username)}
-            </AvatarFallback>
-          </Avatar>
-          <div className="space-y-1">
-            <p className="text-sm font-medium leading-none">{user?.name}</p>
+          <Link to={`/u/${user?.username}`}>
+            <Avatar>
+              <AvatarImage src={user?.avatarUrl} />
+              <AvatarFallback>
+                {makeInitial(user?.name || user?.username)}
+              </AvatarFallback>
+            </Avatar>
+          </Link>
+          <div className="flex flex-col gap-1">
+            <Link
+              to={`/u/${user?.username}`}
+              className="text-sm font-medium leading-none"
+            >
+              {user?.name}
+            </Link>
             <Link
               to={`/u/${user?.username}`}
-              className="underline"
+              className="text-sm text-muted-foreground underline"
             >
-              <span className="text-sm text-muted-foreground">
-                @{user?.username}
-              </span>
+              @{user?.username}
             </Link>
           </div>
         </div>

diff --git a/src/components/TableUser/column.tsx b/src/components/TableUser/column.tsx
@@ -4,7 +4,7 @@ import type { User } from '@/lib/api';
 import { cn, formatNumber, makeInitial } from '@/lib/utils';
 import type { ColumnDef } from '@tanstack/react-table';
 import { Link } from 'react-router-dom';
-import { Avatar, AvatarFallback, AvatarImage, } from '../ui/avatar';
+import { Avatar, AvatarFallback, AvatarImage } from '../ui/avatar';
 import { DataTableColumnHeader } from './data-table-column-header';
 import { DataTableRowActions } from './data-table-row-actions';
 
@@ -15,9 +15,12 @@ export const DEFAULT_CLASSNAMES_RANK = {
   other: '',
 };
 
-export const renderRank = (rank: number, classNames = DEFAULT_CLASSNAMES_RANK) => {
+export const renderRank = (
+  rank: number,
+  classNames = DEFAULT_CLASSNAMES_RANK
+) => {
   if (rank === 1) {
-    return <p className={cn("text-right text-3xl", classNames?.first)}>🥇</p>;
+    return <p className={cn('text-right text-3xl', classNames?.first)}>🥇</p>;
   }
   if (rank === 2) {
     return <p className={cn('text-right text-3xl', classNames?.second)}>🥈</p>;
@@ -26,7 +29,9 @@ export const renderRank = (rank: number, classNames = DEFAULT_CLASSNAMES_RANK) =
     return <p className={cn('text-right text-3xl', classNames?.third)}>🥉</p>;
   }
 
-  return <p className={cn('text-right', classNames.other)}>#{formatNumber(rank)}</p>;
+  return (
+    <p className={cn('text-right', classNames.other)}>#{formatNumber(rank)}</p>
+  );
 };
 
 export const columnsDesktop: ColumnDef<User>[] = [
@@ -40,14 +45,12 @@ export const columnsDesktop: ColumnDef<User>[] = [
       const name = row.getValue('name') as string;
 
       return (
-        <div className="">
+        <Link to={`/u/${username}`}>
           <Avatar>
             <AvatarImage src={avatarUrl} />
-            <AvatarFallback>
-              {makeInitial(name || username)}
-            </AvatarFallback>
+            <AvatarFallback>{makeInitial(name || username)}</AvatarFallback>
           </Avatar>
-        </div>
+        </Link>
       );
     },
   },
@@ -59,10 +62,7 @@ export const columnsDesktop: ColumnDef<User>[] = [
     cell: ({ row }) => {
       const username = row.getValue('username') as string;
       return (
-        <Link
-          to={`/u/${username}`}
-          className="underline"
-        >
+        <Link to={`/u/${username}`} className="underline">
           {username}
         </Link>
       );
@@ -126,7 +126,6 @@ export const columnsDesktop: ColumnDef<User>[] = [
   },
 ];
 
-
 export const columnsMobile: ColumnDef<User>[] = [
   {
     accessorKey: 'avatarUrl',

diff --git a/src/views/Detail.tsx b/src/views/Detail.tsx
@@ -32,6 +32,7 @@ export const Detail = () => {
   const { username } = useParams();
 
   const [badgeType, setBadgeType] = useState<string>('markdown');
+  const [styleType, setStyleType] = useState<string>('flat');
 
   if (isLoading)
     return (
@@ -163,15 +164,15 @@ export const Detail = () => {
         </div>
       </div>
 
-      <div className="relative py-16 max-w-4xl mx-auto flex flex-col justify-center items-center gap-8">
+      <div className="relative max-w-4xl mx-auto flex flex-col justify-center items-center gap-8">
         <h2 className="text-center scroll-m-20 pb-2 text-3xl font-semibold tracking-tight first:mt-0">
           Create your badge
         </h2>
 
         <div className="relative flex flex-col gap-4">
           <img
-            src={`https://indogithubers-badge.vercel.app/badge?username=${username}`}
-            alt="Badge"
+            src={`https://indogithubers-badge.vercel.app/badge?username=${username}&style=${styleType}`}
+            alt="Preview Badge"
             loading="lazy"
           />
 
@@ -191,13 +192,30 @@ export const Detail = () => {
                   <SelectItem value="html">HTML</SelectItem>
                 </SelectContent>
               </Select>
+              <Select
+                onValueChange={(newValue) => {
+                  setStyleType(newValue);
+                }}
+                defaultValue={styleType}
+              >
+                <SelectTrigger className="w-[100px]">
+                  <SelectValue placeholder="Select style" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="flat">Flat</SelectItem>
+                  <SelectItem value="flat-square">Flat Square</SelectItem>
+                  <SelectItem value="for-the-badge">For The Badge</SelectItem>
+                  <SelectItem value="social">Social</SelectItem>
+                  <SelectItem value="plastic">Plastic</SelectItem>
+                </SelectContent>
+              </Select>
             </div>
 
             <CopyButton
               text={
                 badgeType === 'markdown'
-                  ? `![IndoGitHubers-badge](https://indogithubers-badge.vercel.app/badge?username=${username})`
-                  : ` <img src="https://indogithubers-badge.vercel.app/badge?username=${username}" alt="IndoGitHubers Badge">`
+                  ? `![IndoGitHubers-badge](https://indogithubers-badge.vercel.app/badge?username=${username}&style=${styleType})`
+                  : ` <img src="https://indogithubers-badge.vercel.app/badge?username=${username}&style=${styleType}" alt="IndoGitHubers Badge">`
               }
               fullWidth
               withInput={true}