[FEAT] Email Templates > SuperAdmin Email Management Dashboard > Template Preview Component - Githubissues

hngprojects / hng_boilerplate_nextjs

https://deployment.nextjs.boilerplate.hng.tech

Apache License 2.0

205 stars 265 forks source link

[FEAT] Email Templates > SuperAdmin Email Management Dashboard > Template Preview Component #43

Closed elitenoire closed 2 weeks ago

elitenoire commented 1 month ago

Description

Create the Preview Component for HTML Templates used in the Super Admin Email Management Dashboard for creating and editing email templates.

Acceptance Criteria

Reusable Preview Component for HTML Templates
Component adapts to scrollable Templates
Components shrink templates to fit
Component has a fluid width
Component adheres to the brand colors and design

Expected Outcome

User should be able to view any HTML Template
User should be able to scroll the Template if longer than the Preview Component
User should be able to edit the HTML markup
Responsive design of Component

Purpose

As a User, I want to be able to preview or edit Html Email Templates

Requirement

custom scrollbar design

Testing

[ ] test Preview Component has a fluid width
[ ] test Preview Component can scroll its content
[ ] test Preview Component accepts template prop of html content
[ ] test Preview Component accepts mode prop - preview and edit

Task

[ ] Implement Reusable Preview Component
[ ] Component has a scrollable content
[ ] Scrollbar is visible when content overflows its container
[ ] Make Preview Component responsive with a fluid width
[ ] Preview Component should render html template as prop
[ ] Preview Component should have a prop 'mode' - preview and edit
[ ] Preview mode (the default) displays the HTML template
[ ] Edit mode displays the HTML Markup as content editable
[ ] Supports onEdit / onChange callback to pass edited markup
[ ] HTML Template scales to fit its container
[ ] Component adheres to the brand design and color scheme

Deadline

You are given till Saturday 20th July 10:00AM WAT to complete the task.

Picture

preview_email_template preview_email_template_scaled

Dev Mode Figma Link

https://www.figma.com/design/VEItfX6St5NSAqqNHImcxD/HNG-Boilerplate-Designs?node-id=2266-27056&m=dev https://www.figma.com/design/VEItfX6St5NSAqqNHImcxD/HNG-Boilerplate-Designs?node-id=2319-10446&m=dev

Samadeen commented 1 month ago

Kindly confirm this isn't a duplicate

elitenoire commented 1 month ago

Kindly confirm this isn't a duplicate

No it is not, It is a standalone component to preview HTML Email Templates.

elitenoire commented 1 month ago

@Samadeen I mean the Preview Component in both images are the same. It is used in the two places linked in the figma file

Samadeen commented 1 month ago

Understood ma'am.