---
updatedAt: 2025-05-14T08:18:37.000Z
agentTools:
  projectIndex: https://learn.vtex.com/llms.txt
---

# Gabarito para o passo 'Tornando o bloco countdown customizável'

<HTMLBlock>{`
<style>
      section#hub-content header h1, section#hub-content header h2 {
        color: #f71963
      }
    
      p {
        line-height: 1.5rem;
      }
    </style>
`}</HTMLBlock>

```typescript Countdown.tsx
// store-block/react/Countdown.tsx
import React from 'react'

interface CountdownProps {
  targetDate: string
}

const Countdown: StorefrontFunctionComponent<CountdownProps> = ({
  targetDate,
}) => {
  return (
    <div>
      <h1>{targetDate}</h1>
    </div>
  )
}

Countdown.schema = {
  title: 'editor.countdown.title',
  description: 'editor.countdown.description',
  type: 'object',
  properties: {
    targetDate: {
      title: 'Data final',
      description: 'Data final utilizada no contador',
      type: 'string',
      default: null,
    },
  },
}

export default Countdown
```

<HTMLBlock>{`
<div id="back-button">
            <i class="fa fa-angle-left"></i>
            <a id="back-link" href="/docs/course-store-block-step03props-implementation-lang-en">back</a>
          </div>
`}</HTMLBlock>

<hr/>
<div id="contribute-container">
  <p id="contribute-title"> 
    Help us make this content better!
  </p>
  <p id="contribute-description">
    VTEX IO courses are open source. If you see something wrong, you can open a pull request!
  </p>

  <a id="contribute-button" href="https://github.com/vtex/vtex-courses/edit/master/courses/store-block/steps/03_props-implementation/answersheet">
    Make a contribution
  </a>

  <p id="contribute-issue">
    or <a href="https://github.com/vtex/vtex-courses/issues/new/choose">open an issue</a>
  </p>

</div>