abi/screenshot-to-code
View on GitHubAdd a better looking frame for mobile and web previews
Open
#176 opened on Dec 10, 2023
3 comments (3 comments)0 reactions (0 reactions)0 assignees (0 assignees)TypeScript72,582 stars (72,582 stars)8,943 forks (8,943 forks)batch import
good first issue
Description
Something similar to this:
Contributor guide
- Tech stack
- typescriptcsstailwindcssreact
- Domain
- frontend
- Issue type
- feature
- DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
- 2
- Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
- 1-3 hours
- Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
- fresh
- ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
- mostly clear
- Prerequisites
- CSS layouttailwindcss styling
- Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
- 75
- Research direction
- Locate the preview component in the codebase (e.g., src/components/Preview.tsx or similar). Review how mobile and web previews are currently rendered. The images in the issue show a device frame with rounded corners and a subtle shadow; implement a similar frame using TailwindCSS classes. Ensure the frame adapts to different screen sizes and maintains the preview aspect ratio.