@@ -42,7 +46,7 @@ function onOptionSelected(value: string) {
leave-to-class="opacity-0"
>
{{ option.label }}
- ({{ option.count }})
+ ({{ option.count }})
diff --git a/components/Project/ProjectGrid.vue b/components/Project/ProjectGrid.vue
index 2d007ee..23f271a 100644
--- a/components/Project/ProjectGrid.vue
+++ b/components/Project/ProjectGrid.vue
@@ -11,6 +11,16 @@ const displayedProjects = computed(() => props.projects.slice(0, displayCount.va
function showMoreProjects() {
displayCount.value += 50
}
+
+const cardTitles = ref< { label: string, togglable?: boolean, toggled?: boolean }[]>([
+ { label: 'Usecase' },
+ { label: 'Openess', togglable: true },
+ { label: 'Technology', togglable: true },
+ { label: 'Privacy', togglable: true },
+ { label: 'Ecosystem' },
+ { label: 'Links' },
+ { label: 'W3PN Score', togglable: true },
+])
@@ -19,6 +29,118 @@ function showMoreProjects() {
flex-col
items-start
>
+
+
+
+
+
+
+ {{ title.label }}
+
+
+
+
+
+
+ Sort by:
+
+
+ Score
+
+
+
+
import type { InputOption } from '~/types'
+defineProps<{ placeholder?: string, includeSort?: boolean }>()
+
const { filter, switcher } = storeToRefs(useData())
const options: InputOption[] = [
{ label: 'A to Z', value: 'atoz' },
@@ -22,8 +24,8 @@ const isSearchFocused = ref(false)
border-2px
flex
items-center
- max-w-320px
w-full
+ h-40px
hover:opacity-100
:class="isSearchFocused ? 'opacity-100' : 'opacity-25'"
>
@@ -34,7 +36,7 @@ const isSearchFocused = ref(false)
w-fit
>
-
+
{
const categories = useState
('categories')
const projects = useState('projects')
- const selectedCategoryId = useState(() => 'defi')
+ const selectedCategoryId = useState(() => 'all')
const filter = reactive({
query: '',
sortby: 'atoz',
diff --git a/layouts/default.vue b/layouts/default.vue
index ec3771d..85c5390 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -3,8 +3,14 @@ import type { InputOption } from '~/types'
const { categories, filteredProjectsCount, selectedCategoryId } = storeToRefs(useData())
+const selectedUsecaseId = ref('usecase')
+const selectedEcosystemId = ref('ecosystem')
+const selectedAssetsUsedId = ref('assetsUsed')
+const selectedFeaturesId = ref('features')
+
const categoriesOptions = ref(categories.value ? categories.value.map(c => ({ label: c.name, value: c.id, count: c.projectsCount })) : [])
const extendedOptions: InputOption[] = [
+ { label: 'Category', value: 'all' },
...categoriesOptions.value,
]
@@ -56,77 +62,58 @@ watch([scrollY, top, y], (newValues, oldValues) => {
w-full
xl:gap-32px
>
-
-
+
+
-
- Choose category
-
+
+
+
+
-
-
-
-
- {{ selectedCategoryId === 'all' ? `${filteredProjectsCount} All Projects` : `${filteredProjectsCount ?? 0} ${selectedCategory?.name}` }}
-
-
diff --git a/unocss.config.collections.ts b/unocss.config.collections.ts
index c6251b3..b41987f 100644
--- a/unocss.config.collections.ts
+++ b/unocss.config.collections.ts
@@ -35,5 +35,7 @@ export const collections = {
open1: '
',
matrix: '
',
news: '
',
+ solid_arrow_down: '
',
+ solid_arrow_up: '
',
},
}