efim
/
Learning-HTMX
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(18): basic templates

This commit is contained in:
efim 2024-03-13 12:58:26 +00:00
parent 8601288230
commit 623d05da91
3 changed files with 59 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
18-expenses-chart/notes.org
View File

@ -53,6 +53,24 @@ also
do i have a separate note with all of these things? do i have a separate note with all of these things?
i've also used some commands to vertically center my stuff i've also used some commands to vertically center my stuff
** TODO allright, tailwind config go ** DONE allright, tailwind config go
font, size, colors font, size, colors
** well, i don't really want to go on.
but yeah, i'll need hierarchy of the elements.
** ok. thoughs:
the componets would be
- my balance bubble
because it is spacially separate
- spending summary
- graph inside spending summary
or maybe don't even need that
the component should take up all space provided to it.
if parent would want to add space around - that's easy to do,
but if component insists on adding space around itself - harder to reuse?
because then if parent would want to have child take up all space - negative padding?
*** allright, @ to include sub templates

2
18-expenses-chart/tailwind.config.js
View File

@ -18,7 +18,7 @@ module.exports = {
}, },
neutral: { neutral: {
'dark-brown': 'hsl(25, 47%, 15%)', 'dark-brown': 'hsl(25, 47%, 15%)',
'medum-brown': 'hsl(28, 10%, 53%)', 'medium-brown': 'hsl(28, 10%, 53%)',
cream: 'hsl(27, 66%, 92%)', cream: 'hsl(27, 66%, 92%)',
'very-pale-orange': 'hsl(33, 100%, 98%)', 'very-pale-orange': 'hsl(33, 100%, 98%)',
}, },

55
18-expenses-chart/templates/index.templ
View File

@ -1,5 +1,38 @@
package templates package templates
templ myBalanceComponent() {
<div class="rounded-xl text-neutral-very-pale-orange text-sm bg-primary-soft-red p-4 shadow">
My balance
<p class="text-xl font-bold">$921.48</p>
</div>
}
templ spendingSummaryComponent() {
<div class="bg-neutral-very-pale-orange rounded-xl shadow p-4 flex flex-col">
<p2>Spending - Last 7 days</p2>
<div class="flex flex-row">
mon
tue
wed
thu
fri
sat
sun
</div>
<hr class="bg-neutral-cream border-t-0 h-0.5"/>
<div class="flex flex-row text-sm text-neutral-medium-brown">
<div>
Total this month
<p class="text-neutral-dark-brown text-xl font-bold">$478.33</p>
</div>
<div>
<p class="text-neutral-dark-brown">+2.4%</p>
from last month
</div>
</div>
</div>
}
templ IndexPage() { templ IndexPage() {
<html lang="en"> <html lang="en">
<head> <head>
@ -15,22 +48,12 @@ templ IndexPage() {
.attribution a { color: hsl(228, 45%, 44%); } .attribution a { color: hsl(228, 45%, 44%); }
</style> </style>
</head> </head>
<body class="bg-neutral-very-pale-orange"> <body class="bg-neutral-cream text-bold p-4 h-full grid items-center">
My balance <div class="flex flex-col gap-4">
Spending - Last 7 days @myBalanceComponent()
$921.48 @spendingSummaryComponent()
mon </div>
tue <div class="attribution fixed bottom-0 inset-x-0">
wed
thu
fri
sat
sun
Total this month
$478.33
+2.4%
from last month
<div class="attribution">
Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
Coded by <a href="#">Your Name Here</a>. Coded by <a href="#">Your Name Here</a>.
</div> </div>