mirror of
https://github.com/sonr-io/sonr.git
synced 2026-08-03 01:41:44 +00:00
feature/driver indexed db (#14)
* fix: update commitizen version * feat: add WASM build tags to db actions * feat: Update all actions to follow `AddAsset` for error handling * feat: remove database dependency in dwn and motr commands * feat: add basic info form to registration view * feat: implement basic browser navigation component * refactor: move database related files to middleware * fix: remove unused test command * fix: update source directory for buf-publish workflow * feat: embed dwn config data * feat: add Sync RPC to query service * refactor: rename package to for better organization * feat: add new javascript exception handling for server requests * refactor: move dwn.wasm to embed directory * refactor: move server files to a new directory * refactor: move session related code to client package * refactor: Update dwn.wasm build path * refactor: move dwn wasm build to vfs * feat: introduce config loading middleware * feat: introduce DWN config and address JSON * refactor: move dwn wasm build output to embed directory * feat: introduce config and IndexedDB model * refactor: move DWN config file generation to vfs * refactor: move config package to * feat: add Sonr.ID IPFS gateway proxy * feat: add SWT data structure * feat: update index.html to use Sonr styles and scripts * feat(dwn): remove index.html server endpoint * feat: add Navigator API for web credential management
This commit is contained in:
Prad Nukala
@@ -0,0 +1,109 @@
|
||||
package blocks
|
||||
|
||||
templ Tabs() {
|
||||
<div
|
||||
x-data="{
|
||||
tabSelected: 1,
|
||||
tabId: $id('tabs'),
|
||||
tabButtonClicked(tabButton){
|
||||
this.tabSelected = tabButton.id.replace(this.tabId + '-', '');
|
||||
this.tabRepositionMarker(tabButton);
|
||||
},
|
||||
tabRepositionMarker(tabButton){
|
||||
this.$refs.tabMarker.style.width=tabButton.offsetWidth + 'px';
|
||||
this.$refs.tabMarker.style.height=tabButton.offsetHeight + 'px';
|
||||
this.$refs.tabMarker.style.left=tabButton.offsetLeft + 'px';
|
||||
},
|
||||
tabContentActive(tabContent){
|
||||
return this.tabSelected == tabContent.id.replace(this.tabId + '-content-', '');
|
||||
},
|
||||
tabButtonActive(tabContent){
|
||||
const tabId = tabContent.id.split('-').slice(-1);
|
||||
return this.tabSelected == tabId;
|
||||
}
|
||||
}"
|
||||
x-init="tabRepositionMarker($refs.tabButtons.firstElementChild);"
|
||||
class="relative w-full max-w-sm"
|
||||
>
|
||||
<div x-ref="tabButtons" class="relative inline-grid items-center justify-center w-full h-10 grid-cols-3 p-1 text-gray-500 bg-white border border-gray-100 rounded-lg select-none">
|
||||
<button :id="$id(tabId)" @click="tabButtonClicked($el);" type="button" :class="{ 'bg-gray-100 text-gray-700' : tabButtonActive($el) }" class="relative z-20 inline-flex items-center justify-center w-full h-8 px-3 text-sm font-medium transition-all rounded-md cursor-pointer whitespace-nowrap">Tab1</button>
|
||||
<button :id="$id(tabId)" @click="tabButtonClicked($el);" type="button" :class="{ 'bg-gray-100 text-gray-700' : tabButtonActive($el) }" class="relative z-20 inline-flex items-center justify-center w-full h-8 px-3 text-sm font-medium transition-all rounded-md cursor-pointer whitespace-nowrap">Tab2</button>
|
||||
<button :id="$id(tabId)" @click="tabButtonClicked($el);" type="button" :class="{ 'bg-gray-100 text-gray-700' : tabButtonActive($el) }" class="relative z-20 inline-flex items-center justify-center w-full h-8 px-3 text-sm font-medium transition-all rounded-md cursor-pointer whitespace-nowrap">Tab3</button>
|
||||
<div x-ref="tabMarker" class="absolute left-0 z-10 w-1/2 h-full duration-300 ease-out" x-cloak><div class="w-full h-full bg-gray-100 rounded-md shadow-sm"></div></div>
|
||||
</div>
|
||||
<div class="relative flex items-center justify-center w-full p-5 mt-2 text-xs text-gray-400 border rounded-md content border-gray-200/70">
|
||||
<div :id="$id(tabId + '-content')" x-show="tabContentActive($el)" class="relative">
|
||||
@Table()
|
||||
</div>
|
||||
<div :id="$id(tabId + '-content')" x-show="tabContentActive($el)" class="relative" x-cloak>
|
||||
And, this is the content for Tab2
|
||||
</div>
|
||||
<div :id="$id(tabId + '-content')" x-show="tabContentActive($el)" class="relative" x-cloak>
|
||||
Finally, this is the content for Tab3
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
templ Table() {
|
||||
<div class="flex flex-col">
|
||||
<div class="overflow-x-auto">
|
||||
<div class="inline-block min-w-full">
|
||||
<div class="overflow-hidden">
|
||||
<table class="min-w-full divide-y divide-neutral-200">
|
||||
<thead>
|
||||
<tr class="text-neutral-500">
|
||||
<th class="px-5 py-3 text-xs font-medium text-left uppercase">Name</th>
|
||||
<th class="px-5 py-3 text-xs font-medium text-left uppercase">Age</th>
|
||||
<th class="px-5 py-3 text-xs font-medium text-left uppercase">Address</th>
|
||||
<th class="px-5 py-3 text-xs font-medium text-right uppercase">Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-neutral-200">
|
||||
<tr class="text-neutral-800">
|
||||
<td class="px-5 py-4 text-sm font-medium whitespace-nowrap">Richard Hendricks</td>
|
||||
<td class="px-5 py-4 text-sm whitespace-nowrap">30</td>
|
||||
<td class="px-5 py-4 text-sm whitespace-nowrap">Pied Piper HQ, Palo Alto</td>
|
||||
<td class="px-5 py-4 text-sm font-medium text-right whitespace-nowrap">
|
||||
<a class="text-blue-600 hover:text-blue-700" href="#">Edit</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="text-neutral-800">
|
||||
<td class="px-5 py-4 text-sm font-medium whitespace-nowrap">Erlich Bachman</td>
|
||||
<td class="px-5 py-4 text-sm whitespace-nowrap">40</td>
|
||||
<td class="px-5 py-4 text-sm whitespace-nowrap">5230 Penfield Ave, Woodland Hills</td>
|
||||
<td class="px-5 py-4 text-sm font-medium text-right whitespace-nowrap">
|
||||
<a class="text-blue-600 hover:text-blue-700" href="#">Edit</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="text-neutral-800">
|
||||
<td class="px-5 py-4 text-sm font-medium whitespace-nowrap">Monica Hall</td>
|
||||
<td class="px-5 py-4 text-sm whitespace-nowrap">35</td>
|
||||
<td class="px-5 py-4 text-sm whitespace-nowrap">2030 Stewart Drive, Sunnyvale</td>
|
||||
<td class="px-5 py-4 text-sm font-medium text-right whitespace-nowrap">
|
||||
<a class="text-blue-600 hover:text-blue-700" href="#">Edit</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="text-neutral-800">
|
||||
<td class="px-5 py-4 text-sm font-medium whitespace-nowrap">Dinesh Chugtai</td>
|
||||
<td class="px-5 py-4 text-sm whitespace-nowrap">28</td>
|
||||
<td class="px-5 py-4 text-sm whitespace-nowrap">Pied Piper HQ, Palo Alto</td>
|
||||
<td class="px-5 py-4 text-sm font-medium text-right whitespace-nowrap">
|
||||
<a class="text-blue-600 hover:text-blue-700" href="#">Edit</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="text-neutral-800">
|
||||
<td class="px-5 py-4 text-sm font-medium whitespace-nowrap">Gilfoyle</td>
|
||||
<td class="px-5 py-4 text-sm whitespace-nowrap">32</td>
|
||||
<td class="px-5 py-4 text-sm whitespace-nowrap">Pied Piper HQ, Palo Alto</td>
|
||||
<td class="px-5 py-4 text-sm font-medium text-right whitespace-nowrap">
|
||||
<a class="text-blue-600 hover:text-blue-700" href="#">Edit</a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
Reference in New Issue
Block a user