Conversation
|
|
||
| const days = Math.floor(hours / 24); | ||
| return `${days} days ago`; | ||
| }; No newline at end of file |
There was a problem hiding this comment.
Clean and easy-to-read implementation 👍
I really like how explicit the calculations are — it makes the logic very clear and predictable.
As an optional idea, using a library like moment.js (or dayjs) could make this even shorter and more concise :D
| import Thoughts from "./components/Thoughts"; | ||
|
|
||
| export const App = () => { | ||
| return ( |
There was a problem hiding this comment.
I like how the layout is kept simple and readable, and the Tailwind classes are applied very consistently. The dark mode support and smooth color transition are a nice touch as well — it makes the UI feel polished 🔥
src/components/ThoughtCard.tsx
Outdated
| } | ||
| }} | ||
| > | ||
| <span aria-hidden="true">❤️</span> |
There was a problem hiding this comment.
Great job on accessibility as well 😀
The aria-label, sr-only text, keyboard handling, and disabled state are all thoughtfully implemented. Small touches like the animation for new thoughts and the relative time display make the UX feel polished!
|
|
||
| const [message, setMessage] = useState<string>("") | ||
|
|
||
| const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => { |
There was a problem hiding this comment.
I like how the submit logic prevents empty or whitespace-only messages)
| } | ||
|
|
||
| return data; | ||
| }) |
There was a problem hiding this comment.
Great job on the handleSubmitThought function! 👏
I really like how you handle the POST request: you parse the response, check res.ok, and provide a friendly error message for the user
| @media (prefers-reduced-motion: reduce) { | ||
| .transition-colors { | ||
| transition: none; | ||
| } |
There was a problem hiding this comment.
wow, cool how you structured the font imports and custom properties (--body-font-family, --number-font-family) — it makes the typography consistent and easy to maintain. The dark mode variables and prefers-color-scheme media query are implemented cleanly, and the new-thought-animation adds a nice touch of polish. Accessibility helpers like .sr-only and .focus-ring are also thoughtfully included. Overall, very well-organized and readable CSS
3 participants
https://happythought.daniellauding.se/