Files
sonr/pkg/nebula/blocks/card.templ
T
Prad NukalaandGitHub a4dbb41202 feature/dwn database state (#18)
* refactor: move database, navigator scripts to state package

* feat: add Schema config for dwn

* test: add unit tests for InitializeDatabase

* feat: use templated index.html for the DWN frontend

* feat: introduce templ generation for templ

* chore(deps): update devbox.json to use latest packages

* chore: update devbox to use bun

* feat: introduce dwn config generation

* feat: add motr.mjs for vault management

* refactor: move front end from  to  (alert)

* feat: implement devbox integration and devbox-based process management

* feat: embed motr.mjs script for offline demo

* refactor: embed motr.mjs data in embed.go

* chore: update workflows to use actions/checkout@v4

* refactor: move process-compose.yaml to deploy directory

* refactor: remove unnecessary JSON conversion
2024-09-21 21:42:51 -04:00

48 lines
2.6 KiB
Templ

package blocks
func Card(id string, size Size) templ.Component {
return renderCard(id, size.CardAttributes())
}
templ renderCard(id string, attrs templ.Attributes) {
<div id={ id } { attrs... }>
<div class="w-full h-full">
<div class="row">
<div class="col-md-12 space-3">
{ children... }
</div>
</div>
</div>
</div>
}
templ ProfileCard() {
<div class="relative max-w-sm overflow-hidden bg-white border rounded-lg shadow-sm border-neutral-200/60">
<img src="https://cdn.devdojo.com/images/august2023/wallpaper.jpeg" class="relative z-20 object-cover w-full h-32"/>
<div class="absolute top-0 z-50 flex items-center w-full mt-2 translate-y-24 px-7 -translate-x-0">
<div class="w-20 h-20 p-1 bg-white rounded-full">
<img src="https://cdn.devdojo.com/images/august2023/adam.jpeg" class="w-full h-full rounded-full"/>
</div>
<a href="https://twitter.com/adamwathan" target="_blank" class="block mt-6 ml-2">
<h5 class="text-lg font-bold leading-none tracking-tight text-neutral-900">Adam Wathan</h5>
<small class="block mt-1 text-sm font-medium leading-none text-neutral-500">adamwathan</small>
</a>
<button class="absolute right-0 inline-flex items-center justify-center w-auto px-5 mt-6 text-sm font-medium transition-colors duration-100 rounded-full h-9 mr-7 hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 bg-neutral-900 disabled:pointer-events-none hover:bg-neutral-800 text-neutral-100">
<span>Follow</span>
</button>
</div>
<div class="relative pb-6 p-7">
<p class="mt-12 mb-6 text-neutral-500 text-">Creator of @tailwindcss. Listener of Slayer. Austin 3:16. BTW, Pines UI is super cool!</p>
<div class="flex items-center justify-between pr-2 text-neutral-500">
<div class="relative flex w-16">
<img src="https://cdn.devdojo.com/images/august2023/caleb.jpeg" class="relative z-30 w-8 h-8 border-2 border-white rounded-full"/>
<img src="https://cdn.devdojo.com/images/august2023/taylor.jpeg" class="z-20 w-8 h-8 -translate-x-4 border-2 border-white rounded-full"/>
<img src="https://cdn.devdojo.com/images/august2023/adam.jpeg" class="z-10 w-8 h-8 border-2 border-white rounded-full -translate-x-7"/>
</div>
<a href="https://twitter.com/adamwathan/following" target="_blank" class="text-sm hover:underline"><strong class="text-neutral-800">673</strong> Following</a>
<a href="https://twitter.com/adamwathan/followers" target="_blank" class="text-sm hover:underline"><strong class="text-neutral-800">168.6K</strong> Followers</a>
</div>
</div>
</div>
}