@heroicons/react/solid#TrashIcon TypeScript Examples

The following examples show how to use @heroicons/react/solid#TrashIcon. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.

Example #1

Source File: EditCircle.tsx From server with MIT License

6 votes

MemberCard = (props: MemberCardProps) => {
  const {user, onDelete} = props
  const {name} = getNameAndSubName(user)

  return (
    <div className="edit-circle-member-card-wrapper">
      <div className="edit-circle-member-card-avatar">
        <AvatarV2 className="edit-circle-member-card-avatar-img" user={props.user} />
      </div>
      <div className="edit-circle-member-card-name">
        {name}
      </div>
      <div className="edit-circle-member-card-delete-button" onClick={e => {
        e.preventDefault()
        onDelete(user)
      }}>
        <TrashIcon />
      </div>
    </div>
  )
}

Example #2

Source File: FilesGrid.tsx From ide with Mozilla Public License 2.0

4 votes

export default function FilesGrid(props: FilesGridProps): JSX.Element {
  const firebaseUser = useAtomValue(firebaseUserAtom);
  const formatCreationTime = (creationTime: number | null): string => {
    if (!creationTime) return 'Unknown';
    // return String(creationTime);
    // if recent then display time ago
    if (+dayjs() - +dayjs(creationTime) <= 1000 * 60 * 60 * 24 * 2)
      // <= two days
      return dayjs(creationTime).fromNow();
    return dayjs(creationTime).format('MM/DD/YYYY'); // otherwise display date
  };
  return (
    <div className="mt-4 -mx-2">
      {props.files
        .sort((a, b) => (a.creationTime ?? 0) - (b.creationTime ?? 0))
        .reverse()
        .map(file => (
          <Link key={file.id} href={`/${file.id.substring(1)}`}>
            <a className="bg-gray-800 hover:bg-gray-700 px-4 py-3 rounded-lg inline-block w-full max-w-sm m-2">
              <div className="flex justify-between">
                <div className="text-gray-200">
                  {file.title || 'Unnamed File'}
                </div>
                <button
                  onClick={e => {
                    e.preventDefault(); // not stopPropagation
                    if (!firebaseUser) {
                      alert('Firebase not loaded, please wait');
                      return;
                    }
                    const confirmed = confirm(
                      file.hidden ? 'Unhide this item?' : 'Hide this item?'
                    );
                    if (!confirmed) return;
                    if (confirmed) {
                      const ref = firebase
                        .database()
                        .ref('users')
                        .child(firebaseUser.uid)
                        .child(file.id);
                      ref.update({ hidden: !file.hidden });
                    }
                  }}
                >
                  {file.hidden ? (
                    <SaveIcon
                      className="h-5 w-5 text-gray-400 hover:text-gray-500 focus:text-gray-500 focus:outline-none"
                      aria-hidden="true"
                    />
                  ) : (
                    <TrashIcon
                      className="h-5 w-5 text-gray-400 hover:text-gray-500 focus:text-gray-500 focus:outline-none"
                      aria-hidden="true"
                    />
                  )}
                </button>
              </div>
              <div className="text-gray-400">
                Last Accessed: {dayjs(file.lastAccessTime).fromNow()}
              </div>
              <div className="text-gray-400">
                Created: {formatCreationTime(file.creationTime)}
              </div>
              {props.showPerms ? (
                <div className="text-gray-400">
                  Permissions:{' '}
                  {file.lastPermission &&
                  file.lastPermission in permissionLabels
                    ? permissionLabels[file.lastPermission]
                    : 'Unknown'}
                </div>
              ) : (
                <div className="text-gray-400">
                  Default Permissions:{' '}
                  {file.lastDefaultPermission &&
                  file.lastDefaultPermission in sharingPermissionLabels
                    ? sharingPermissionLabels[file.lastDefaultPermission]
                    : 'Unknown'}
                </div>
              )}
            </a>
          </Link>
        ))}
    </div>
  );
}