feat: updated download card

Author: mikita-kandratsyeu

app/(course)/(routes)/courses/[courseId]/chapters/[chapterId]/page.tsx

@@ -1,10 +1,9 @@
-import { File } from 'lucide-react';
-import Link from 'next/link';
 import { redirect } from 'next/navigation';
 
 import { getCurrentUser } from '@/actions/auth/get-current-user';
 import { getChapter } from '@/actions/courses/get-chapter';
 import { Banner } from '@/components/common/banner';
+import { FileDownload } from '@/components/common/file-download';
 import { Preview } from '@/components/common/preview';
 import { Separator } from '@/components/ui/separator';
 
@@ -84,16 +83,8 @@ const ChapterIdPage = async ({ params }: ChapterIdPageProps) => {
           <>
             <Separator />
             <div className="p-4">
-              {attachments.map((attachment) => (
-                <Link
-                  className="flex items-center p-3 w-full rounded-md bg-blue-500/15 border border-blue-500/20 text-blue-700 dark:text-blue-400 mb-2"
-                  key={attachment.id}
-                  target="_blank"
-                  href={attachment.url}
-                >
-                  <File className="h-4 w-4 mr-2 flex-shrink-0" />
-                  <p className="text-sm line-clamp-1 basis-4/5">{attachment.name}</p>
-                </Link>
+              {attachments.map(({ id, url, name: fileName }) => (
+                <FileDownload key={id} fileName={fileName} url={url} />
               ))}
             </div>
           </>

app/(dashboard)/(routes)/teacher/courses/[courseId]/_components/form/attachment-form.tsx

@@ -1,14 +1,13 @@
 'use client';
 
 import { Attachment, Course } from '@prisma/client';
-import { File, Paperclip, X } from 'lucide-react';
-import Link from 'next/link';
+import { Paperclip } from 'lucide-react';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
 import toast from 'react-hot-toast';
-import { BiLoaderAlt } from 'react-icons/bi';
 import * as z from 'zod';
 
+import { FileDownload } from '@/components/common/file-download';
 import { FileUpload } from '@/components/common/file-upload';
 import { Button } from '@/components/ui/button';
 import { fetcher } from '@/lib/fetcher';
@@ -77,34 +76,15 @@ export const AttachmentForm = ({ initialData, courseId }: AttachmentProps) => {
           {initialData.attachments.length > 0 ? (
             <div className="space-y-2 mt-4">
               {initialData.attachments.map((attachment) => (
-                <div
+                <FileDownload
                   key={attachment.id}
-                  className="flex items-center p-3 w-full rounded-md bg-blue-500/15 border border-blue-500/20 text-blue-700 dark:text-blue-400"
-                >
-                  <File className="h-4 w-4 mr-2 flex-shrink-0" />
-                  <Link
-                    className="text-sm line-clamp-1 basis-4/5 hover:underline"
-                    href={attachment.url}
-                    target="_blank"
-                  >
-                    {attachment.name}
-                  </Link>
-                  <div className="ml-auto flex items-center">
-                    {deletingId === attachment.id ? (
-                      <BiLoaderAlt className="h-4 w-4 animate-spin" />
-                    ) : (
-                      <button
-                        className="hover:opacity-75 transition-all duration-300"
-                        onClick={() =>
-                          handleDelete(attachment.id, attachment?.url?.split('/')?.pop() ?? '')
-                        }
-                        disabled={Boolean(deletingId)}
-                      >
-                        <X className="h-4 w-4" />
-                      </button>
-                    )}
-                  </div>
-                </div>
+                  fileName={attachment.name}
+                  isRemoveButtonDisabled={deletingId === attachment.id}
+                  onFileRemove={() =>
+                    handleDelete(attachment.id, attachment?.url?.split('/')?.pop() ?? '')
+                  }
+                  url={attachment.url}
+                />
               ))}
             </div>
           ) : (
@@ -123,7 +103,7 @@ export const AttachmentForm = ({ initialData, courseId }: AttachmentProps) => {
             }}
           />
           <div className="flex text-xs items-start justify-between">
-            <div className="text-muted-foreground mt-4 basis-3/5">
+            <div className="text-muted-foreground mt-4">
               Add anything your students might need to complete the course
             </div>
           </div>

components/common/file-download.tsx

@@ -0,0 +1,51 @@
+'use client';
+
+import { Download, FileText, Trash2 } from 'lucide-react';
+import Link from 'next/link';
+
+import { Button } from '../ui';
+
+type FileDownloadProps = {
+  fileName: string;
+  isRemoveButtonDisabled?: boolean;
+  onFileRemove?: () => void;
+  url: string;
+};
+
+export const FileDownload = ({
+  fileName,
+  isRemoveButtonDisabled = false,
+  onFileRemove,
+  url,
+}: FileDownloadProps) => {
+  const [name, extension] = fileName.split('.');
+
+  return (
+    <div className="flex items-center justify-between p-3 w-full rounded-md border mb-2">
+      <div className="flex items-center">
+        <FileText className="h-4 w-4 mr-3 flex-shrink-0 text-red-500" />
+        <div className="flex flex-col">
+          <p className="text-primary font-medium text-sm">{name}</p>
+          <p className="text-muted-foreground text-xs">{`.${extension}`}</p>
+        </div>
+      </div>
+      <div className="flex items-center gap-x-2">
+        <Link href={url} target="_blank">
+          <Button variant="outline" title="Download">
+            <Download className="h-4 w-4" />
+          </Button>
+        </Link>
+        {Boolean(onFileRemove) && (
+          <Button
+            variant="outline"
+            disabled={isRemoveButtonDisabled}
+            onClick={onFileRemove!}
+            title="Remove"
+          >
+            <Trash2 className="h-4 w-4" />
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+};