Add templates page #36
Conversation
Karthik-315
commented
Sep 5, 2022
Karthik-315
commented
- Added styling for the templates page
- The functionality of the favorites filter is yet to be implemented. Will do it soon.
- I've added the pages to the UI (Hidden in the UI for now) and will add the functionality soon.
✅ Deploy Preview for template-bhai ready!
To edit notification comments on pull requests, go to your Netlify site settings. |
| @@ -1,3 +1,14 @@ | |||
| @tailwind base; | |||
| @tailwind components; | |||
| @tailwind utilities; | |||
|
|
|||
| @layer components { | |||
| body { | |||
There was a problem hiding this comment.
I don't think it's needed.
Thanks for working on it btw. I'll check the whole PR asap when I'm free.
| @apply h-full; | ||
| } | ||
|
|
||
| .template-action-button { |
There was a problem hiding this comment.
This should be a component. All reusability in React should always be driven by components.
There was a problem hiding this comment.
Great work on that PR @Karthik-315
I've noticed a couple repeating styles, let's catch that early and move those into components.
Otherwise, looks great!
| </p> | ||
|
|
||
| <div className="my-4 flex justify-between gap-x-4 overflow-hidden p-px transition-[margin] duration-700 group-hover:mb-10"> | ||
| <button className="template-action-button -translate-x-72 bg-zinc-50 text-zinc-800 md:translate-x-0 md:-translate-y-24"> |
There was a problem hiding this comment.
Not sure if these styles for buttons, paragraphs, links, etc repeat. But if you ever going to reuse it anywhere in the app, it should be a component.
You can get inspiration for components from MUI lib for example. Button, Typography, etc
| </div> | ||
|
|
||
| <div className="mt-8"> | ||
| <p className="relative text-xs text-zinc-300 before:absolute before:right-[55%] before:left-0 before:top-1/2 before:h-px before:bg-zinc-200/10 before:content-[''] after:absolute after:left-[55%] after:right-0 after:top-1/2 after:h-px after:bg-zinc-200/10 after:content-[''] md:text-base"> |
There was a problem hiding this comment.
Getting rid of before/after and puting those into markup would probably make things much more readable.
Before/After are just weird in TW imo, it would prolly be better to simply add those elements. It doesn't have any downside to it.
| export default function Intro() { | ||
| return ( | ||
| <> | ||
| <h2 className="text-left text-4xl font-medium xl:text-5xl">Templates</h2> |
There was a problem hiding this comment.
H2 styles would probably be repeating in the app quite often, consider creating a Typography component, just like it is in MUI
| <div className="container py-4"> | ||
| {/* Change height of the div below to `h-96` after filters are enabled */} | ||
| <div | ||
| className={`relative z-10 -mx-4 overflow-hidden rounded-lg bg-zinc-700/50 backdrop-blur-lg transition-all duration-300 md:flex md:items-center md:justify-between md:bg-transparent md:p-4 lg:overflow-hidden ${ |
There was a problem hiding this comment.
Try "clsx" library for this, it's more readable than using conditions in string literals
| import FilterList from "./FilterList"; | ||
|
|
||
| export default function Filters() { | ||
| const frameworks = [ |
There was a problem hiding this comment.
I think Subho has created a data structure for this before, it should be probably exported from one central location.
@subhoghoshX I remember you did something similar before, somewhere
|
Thanks for your valuable feedback! I am currently visiting my sister but I'll do these changes as early as I can. |
