| 133 | }; |
| 134 | |
| 135 | export function SrcbookCard(props: SrcbookCardPropsType) { |
| 136 | function onDelete(e: React.MouseEvent<HTMLButtonElement>) { |
| 137 | e.stopPropagation(); |
| 138 | props.onDelete(); |
| 139 | } |
| 140 | |
| 141 | return ( |
| 142 | <CardContainer |
| 143 | onClick={props.onClick} |
| 144 | className={cn( |
| 145 | 'active:translate-y-0.5', |
| 146 | props.running ? 'border-run' : 'hover:border-foreground', |
| 147 | )} |
| 148 | > |
| 149 | <h5 className="font-medium leading-[18px] line-clamp-2">{props.title}</h5> |
| 150 | <div className="flex align-bottom items-center justify-between text-tertiary-foreground"> |
| 151 | <div className="text-[13px] flex items-center gap-2"> |
| 152 | {props.running ? ( |
| 153 | <> |
| 154 | <Circle size={14} strokeWidth={3} className="text-run" /> |
| 155 | <span>Running</span> |
| 156 | </> |
| 157 | ) : ( |
| 158 | <span> |
| 159 | {props.cellCount} {props.cellCount === 1 ? 'Cell' : 'Cells'} |
| 160 | </span> |
| 161 | )} |
| 162 | </div> |
| 163 | <code className="font-mono group-hover:hidden"> |
| 164 | {props.language === 'javascript' ? 'JS' : 'TS'} |
| 165 | </code> |
| 166 | <button |
| 167 | type="button" |
| 168 | onClick={onDelete} |
| 169 | className="hidden group-hover:block hover:text-foreground" |
| 170 | > |
| 171 | <Trash2 size={16} /> |
| 172 | </button> |
| 173 | </div> |
| 174 | </CardContainer> |
| 175 | ); |
| 176 | } |
| 177 | |
| 178 | export function GenerateSrcbookButton(props: { onClick: () => void }) { |
| 179 | return ( |