@/utils#timeFromNow TypeScript Examples

The following examples show how to use @/utils#timeFromNow. 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: feed.tsx    From nextjs-hasura-fullstack with MIT License 6 votes vote down vote up 
FeedPage: React.FC<FeedPageProps> = ({ feed }) => {
  return (
    <Card>
      <CardBody>
        <div className={`flex items-center`}>
          <div className={`mr-2`}>
            {feed.user && <Avatar alt={feed.user.name} src={feed.user.image} />}
          </div>
          <div>
            <div>
              <p className={`font-bold`}>{feed.user.name}</p>
            </div>
            <div>
              <p>{timeFromNow(feed.created_at)}</p>
            </div>
          </div>
        </div>
        {/*  */}
        <div className={`mt-2`}>
          <p className={`text-gray-800`}>{feed.body}</p>
        </div>
      </CardBody>
    </Card>
  )
}
Example #2
Source File: index.tsx    From nextjs-hasura-fullstack with MIT License 4 votes vote down vote up 
BoardsPage: React.FC = () => {
  const { data, loading } = useBoardsQuery()
  const [name, setName] = React.useState('')

  const [insert, { loading: insertLoading }] = useInsertBoardMutation({
    update: (cache, { data }) => {
      cache.modify({
        fields: {
          boards: (existingBoards = []) => {
            const newTodoRef = cache.writeFragment({
              data: data?.insert_boards_one,
              fragment: BoardFragmentDoc,
            })
            return [...existingBoards, newTodoRef]
          },
        },
      })
    },
  })

  const handleInsert = async () => {
    try {
      if (name) {
        await insert({
          variables: { name },
        })
      }
    } catch (error) {
      // console.log('Error: ', Object.entries(error))
    }
  }

  return (
    <div className={`container flex flex-col items-center py-6 mx-auto`}>
      <div className={`flex items-center mb-4 space-x-2 `}>
        <div>
          <Input
            className={``}
            placeholder="Enter board name"
            value={name}
            onChange={(e) => setName(e.target.value)}
          />
        </div>
        <Button
          className={`flex-grow`}
          onClick={() => handleInsert()}
          isLoading={insertLoading}
        >
          New board
        </Button>
      </div>

      <div
        className={`grid w-full gap-8 px-4 mt-10 sm:grid-cols-2 lg:grid-cols-4 sm:gap-16`}
      >
        {(data?.boards || []).map((board) => {
          return (
            <Card key={board.id} color="default">
              <CardHeader
                action={
                  <NextLink
                    key={board.id}
                    href={`/boards/[boardId]`}
                    as={`/boards/${board.id}`}
                  >
                    <ButtonIcon
                      variant="light"
                      color="primary"
                      icon={<StarSolid />}
                    />
                  </NextLink>
                }
              >
                <div className={`flex items-center space-x-2`}>
                  <div>{board.icon}</div>
                  <div
                    className={`font-semibold text-gray-600 dark:text-gray-100 text-md`}
                  >
                    {board.name}
                  </div>
                </div>
              </CardHeader>
              {/* <CardBody>{board.name}</CardBody> */}
              <CardFooter className={`italic`}>
                {timeFromNow(board.created_at)}
              </CardFooter>
            </Card>
          )
        })}
      </div>
    </div>
  )
}