update

apps/studio.saladeaula.digital/app/routes/edit.tsx

@@ -253,8 +253,8 @@ function Editing() {
                 <FormItem
                   className="flex flex-row items-center justify-between
                              rounded-lg border p-3 shadow-sm
-                            dark:has-[[aria-checked=true]]:border-blue-900
-                            dark:has-[[aria-checked=true]]:bg-blue-950"
+                             dark:has-aria-checked:border-blue-900
+                             dark:has-aria-checked:bg-blue-950"
                 >
                   <div className="space-y-1">
                     <FormLabel>Habilitar certificação</FormLabel>
@@ -383,7 +383,7 @@ function Editing() {
                       {...field}
                     />
                   </FormControl>
-                  <FormLabel>Ocultar o curso no catálogo.</FormLabel>
+                  <FormLabel>Ocultar o curso no catálogo</FormLabel>
                 </FormItem>
               )}
             />

apps/studio.saladeaula.digital/app/routes/index.tsx

@@ -1,7 +1,13 @@
 import type { Route } from './+types/index'
 
 import Fuse from 'fuse.js'
-import { AwardIcon, BanIcon, FileBadgeIcon, LaptopIcon } from 'lucide-react'
+import {
+  AwardIcon,
+  BanIcon,
+  FileBadgeIcon,
+  HatGlassesIcon,
+  LaptopIcon
+} from 'lucide-react'
 import { Suspense, useMemo } from 'react'
 import { Await, NavLink, useSearchParams } from 'react-router'
 
@@ -31,6 +37,7 @@ import {
 
 import type { Course } from './edit'
 import placeholder from '@/assets/placeholder.webp'
+import { cn } from '@repo/ui/lib/utils'
 
 export function meta({}: Route.MetaArgs) {
   return [{ title: 'Gerenciar seus cursos' }]
@@ -131,7 +138,12 @@ function Course({ id, name, access_period, cert, draft }: Course) {
   return (
     <NavLink to={`/edit/${id}`} className="hover:scale-105 transition">
       {({ isPending }) => (
-        <Card className="overflow-hidden relative h-96">
+        <Card
+          className={cn(
+            'overflow-hidden relative h-96',
+            draft && 'border-dashed'
+          )}
+        >
           {isPending && (
             <div className="absolute bottom-0 right-0 p-6 z-1">
               <Spinner className="size-6" />
@@ -139,12 +151,7 @@ function Course({ id, name, access_period, cert, draft }: Course) {
           )}
 
           <CardHeader className="z-1 relative">
-            <CardTitle className="text-xl/6">
-              {name}{' '}
-              {draft ? (
-                <span className="text-muted-foreground">(rascunho)</span>
-              ) : null}
-            </CardTitle>
+            <CardTitle className="text-xl/6">{name}</CardTitle>
           </CardHeader>
 
           <CardFooter className="text-gray-300 text-sm absolute z-1 bottom-6 w-full flex gap-1.5">
@@ -180,6 +187,12 @@ function Course({ id, name, access_period, cert, draft }: Course) {
                   <FileBadgeIcon className="size-4" />
                 </li>
               )}
+
+              {draft && (
+                <li className="flex items-center">
+                  <HatGlassesIcon className="size-4" />
+                </li>
+              )}
             </ul>
           </CardFooter>