commit fda5bda211e2efc5e363daf26e59c8e0389277fc · pdsls.dev/pdsls

+28 -17
src/views/pds.tsx
···

       56
       56
        
           const [openInfo, setOpenInfo] = createSignal(false);

     

       57
       57
        
       

     

       58
       58
        
           return (

     

       59
       59
       -
             <div class="flex items-center">

     

       59
       59
       +
             <div class="flex items-center gap-0.5">

     

       60
       60
        
               <A

     

       61
       61
        
                 href={`/at://${repo.did}`}

     

       62
       62
        
                 class="grow truncate rounded-md p-0.5 font-mono hover:bg-neutral-200 active:bg-neutral-300 dark:hover:bg-neutral-700 dark:active:bg-neutral-600"

     
···

       75
       75
        
                 <span class="iconify lucide--info"></span>

     

       76
       76
        
               </button>

     

       77
       77
        
               <Modal open={openInfo()} onClose={() => setOpenInfo(false)}>

     

       78
       78
       -
                 <div class="dark:bg-dark-300 dark:shadow-dark-700 absolute top-70 left-[50%] w-max max-w-full -translate-x-1/2 rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-3 wrap-break-word shadow-md transition-opacity duration-200 sm:max-w-lg dark:border-neutral-700 starting:opacity-0">

     

       79
       79
       -
                   <div class="mb-1 flex justify-between gap-2">

     

       80
       80
       -
                     <div class="flex items-center gap-1">

     

       81
       81
       -
                       <span class="iconify lucide--info"></span>

     

       82
       82
       -
                       <span class="font-semibold">{repo.did}</span>

     

       83
       83
       -
                     </div>

     

       78
       78
       +
                 <div class="dark:bg-dark-300 dark:shadow-dark-700 absolute top-70 left-[50%] w-max max-w-full -translate-x-1/2 rounded-lg border-[0.5px] border-neutral-300 bg-white p-3 shadow-md transition-opacity duration-200 sm:max-w-xl dark:border-neutral-700 starting:opacity-0">

     

       79
       79
       +
                   <div class="mb-2 flex items-center justify-between gap-4">

     

       80
       80
       +
                     <p class="truncate font-semibold">{repo.did}</p>

     

       84
       81
        
                     <button

     

       85
       82
        
                       onclick={() => setOpenInfo(false)}

     

       86
       86
       -
                       class="flex items-center rounded-lg p-1 hover:bg-neutral-200 active:bg-neutral-300 dark:hover:bg-neutral-700 dark:active:bg-neutral-600"

     

       83
       83
       +
                       class="flex shrink-0 items-center rounded-md p-1.5 text-neutral-500 hover:bg-neutral-100 hover:text-neutral-700 active:bg-neutral-200 dark:text-neutral-400 dark:hover:bg-neutral-700 dark:hover:text-neutral-200 dark:active:bg-neutral-600"

     

       87
       84
        
                     >

     

       88
       85
        
                       <span class="iconify lucide--x"></span>

     

       89
       86
        
                     </button>

     

       90
       87
        
                   </div>

     

       91
       91
       -
                   <div class="flex flex-col text-sm">

     

       92
       92
       -
                     <span>

     

       93
       93
       -
                       Head: <span class="text-xs">{repo.head}</span>

     

       94
       94
       -
                     </span>

     

       88
       88
       +
                   <div class="grid grid-cols-[auto_1fr] items-baseline gap-x-1 text-sm">

     

       89
       89
       +
                     <span class="font-medium">Head:</span>

     

       90
       90
       +
                     <span class="wrap-anywhere text-neutral-700 dark:text-neutral-300">{repo.head}</span>

     

       91
       91
       +
       

     

       95
       92
        
                     <Show when={TID.validate(repo.rev)}>

     

       96
       96
       -
                       <span>

     

       97
       97
       -
                         Rev: {repo.rev} ({localDateFromTimestamp(TID.parse(repo.rev).timestamp / 1000)})

     

       98
       98
       -
                       </span>

     

       93
       93
       +
                       <span class="font-medium">Rev:</span>

     

       94
       94
       +
                       <div class="flex flex-col">

     

       95
       95
       +
                         <span class="text-neutral-700 dark:text-neutral-300">{repo.rev}</span>

     

       96
       96
       +
                         <span class="text-neutral-600 dark:text-neutral-400">

     

       97
       97
       +
                           {localDateFromTimestamp(TID.parse(repo.rev).timestamp / 1000)}

     

       98
       98
       +
                         </span>

     

       99
       99
       +
                       </div>

     

       99
       100
        
                     </Show>

     

       101
       101
       +
       

     

       100
       102
        
                     <Show when={repo.active !== undefined}>

     

       101
       101
       -
                       <span>Active: {repo.active ? "true" : "false"}</span>

     

       103
       103
       +
                       <span class="font-medium">Active:</span>

     

       104
       104
       +
                       <span

     

       105
       105
       +
                         class={`iconify self-center ${

     

       106
       106
       +
                           repo.active ?

     

       107
       107
       +
                             "lucide--check text-green-500 dark:text-green-400"

     

       108
       108
       +
                           : "lucide--x text-red-500 dark:text-red-400"

     

       109
       109
       +
                         }`}

     

       110
       110
       +
                       ></span>

     

       102
       111
        
                     </Show>

     

       112
       112
       +
       

     

       103
       113
        
                     <Show when={repo.status}>

     

       104
       104
       -
                       <span>Status: {repo.status}</span>

     

       114
       114
       +
                       <span class="font-medium">Status:</span>

     

       115
       115
       +
                       <span class="text-neutral-700 dark:text-neutral-300">{repo.status}</span>

     

       105
       116
        
                     </Show>

     

       106
       117
        
                   </div>

     

       107
       118
        
                 </div>