# Codeblocks

By [Chris' Blog](https://paragraph.com/@chris-blog) · 2024-10-24

---

UI Rendering
============

    return (
      <main className="container mx-auto p-4">
        <h1 className="text-2xl font-bold mb-4">
          Decentralized Voting Application
        </h1>
        <ConnectButton />
    
        {votingStatus ? (
          address ? (
            <Card className="mt-4">
              <CardContent>
                <p>Connected Account: {address}</p>
                <p>Remaining Time: {Number(remainingTime)} seconds</p>
                {!canVote ? (
                  <div className="mt-4">
                    <Input
                      type="number"
                      placeholder="Enter Candidate Index"
                      value={number}
                      onChange={(e) => setNumber(e.target.value)}
                      className="mb-2"
                    />
                    <Button onClick={vote}>Vote</Button>
                  </div>
                ) : (
                  <p>You have already voted</p>
                )}
                <div className="mt-4">
                  <h2 className="text-xl font-semibold mb-2">Candidates</h2>
                  <ul>
                    {candidates.map((candidate) => (
                      <li key={candidate.index}>
                        {candidates.indexOf(candidate)}: {candidate.name} -{" "}
                        {Number(candidate.voteCount)} votes
                      </li>
                    ))}
                  </ul>
                </div>
              </CardContent>
            </Card>
          ) : (
            <p>Please connect your wallet to vote</p>
          )
        ) : (
          <p>Voting has finished</p>
        )}
      </main>
    );

---

*Originally published on [Chris' Blog](https://paragraph.com/@chris-blog/codeblocks)*