frontend-convert figma to webApp

frontend/.gitignore

@@ -0,0 +1,24 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example

frontend/README.md

@@ -0,0 +1,75 @@
+# Nuxt Minimal Starter
+
+Look at the [Nuxt documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Setup
+
+Make sure to install dependencies:
+
+```bash
+# npm
+npm install
+
+# pnpm
+pnpm install
+
+# yarn
+yarn install
+
+# bun
+bun install
+```
+
+## Development Server
+
+Start the development server on `http://localhost:3000`:
+
+```bash
+# npm
+npm run dev
+
+# pnpm
+pnpm dev
+
+# yarn
+yarn dev
+
+# bun
+bun run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+# npm
+npm run build
+
+# pnpm
+pnpm build
+
+# yarn
+yarn build
+
+# bun
+bun run build
+```
+
+Locally preview production build:
+
+```bash
+# npm
+npm run preview
+
+# pnpm
+pnpm preview
+
+# yarn
+yarn preview
+
+# bun
+bun run preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

frontend/app.vue

@@ -0,0 +1,6 @@
+<template>
+  <div>
+    <NuxtRouteAnnouncer />
+    <NuxtPage />
+  </div>
+</template>

frontend/components/SearchBar.vue

@@ -0,0 +1,14 @@
+<template>
+    <div class="flex justify-between items-center p-4 rounded-2xl text-left text-[#8F8F8F] bg-[#F4F4F4]">
+        <input type="text" placeholder="Suggest me a channel..." class="w-full bg-transparent h-full outline-none">
+        <img src="~/assets/images/ideas.svg" alt="">
+    </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped>
+
+</style>

frontend/components/SearchPage.vue

@@ -0,0 +1,53 @@
+<template>
+    <div class="w-full flex justify-center items-start min-h-screen bg-gradient-to-r"
+        :class="searchOptions.length ? 'from-gray-200 to-sky-300' : 'from-[#FCFCFCB2] to-cyan-50'"
+    >
+        <div class="w-full md:w-1/2 min-h-screen flex flex-col gap-5 p-6" >
+            <div v-if="!loading" class="flex flex-col gap-5">
+                <form 
+                    @submit.prevent="submitQuery()"
+                    class="flex justify-between relative"
+                >
+                    <input
+                        v-model="query"
+                        type="text" placeholder="Enter any message" 
+                        class="w-full bg-transparent h-full outline-none text-lg border-b p-2"
+                        @keyup.enter="submitQuery()"
+                    >
+                    <span @click="closeSearch" class="shadow-lg bg-transparent rounded-full absolute right-0">
+                        <img src="~/assets/images/close.svg" alt="">
+                    </span>
+                </form>
+
+                <Suggested v-if="searchOptions.length" title="This may be about" :options="searchOptions" :selectTopic />
+                <TopChannels v-if="searchOptions.length" title="Suggested for" :selectedTopic="searchOptions[0]" :topChannels />
+            </div>
+
+            <div v-if="!loading && error" class="relative flex justify-center items-center flex-grow">
+                <span class="absolute self-center w-1/2 text-center text-base" >{{ error }}</span>
+                <img src="~/assets/images/loading.svg" alt="loading" class="w-full h-96" />
+            </div>
+
+            <div v-if="loading" class="flex justify-center items-center flex-grow animate-pulse">
+                <img src="~/assets/images/loading.svg" alt="loading" class="w-full h-96" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+    const emit = defineEmits(['toggleSearch'])
+    const { loading, error, query, searchOptions, topChannels, submitQuery, selectTopic } = useTopics()
+
+    const closeSearch = () => {
+        query.value = ''
+        searchOptions.value = []
+        loading.value = false
+        error.value = ''
+        emit('toggleSearch')
+    }
+</script>
+
+<style scoped>
+
+</style>

frontend/components/Suggested.vue

@@ -0,0 +1,23 @@
+<template>
+    <Card>
+        <div class="flex justify-between text-center">
+            <span class="text-[#1C3B4F] font-bold text-[20px]">{{ $props.title }}</span>
+            <img src="~/assets/images/star.svg" alt="Nature" />
+        </div>
+        <div class="flex flex-wrap justify-start items-center p-0">
+            <span v-for="(topic,index) in props.options" :key="topic+index" class="text-native bg-white px-4 py-2 m-2 rounded-full"
+                @click="selectTopic(topic)"
+            >
+                {{ topic }}
+            </span>
+        </div>
+    </Card>
+</template>
+
+<script setup lang="ts">
+    const props = defineProps(['title', 'options', 'selectTopic'])
+</script>
+
+<style scoped>
+
+</style>

frontend/components/TopChannels.vue

@@ -0,0 +1,38 @@
+<template>
+    <Card>
+        <div class="flex flex-col gap-5 justify-between text-center">
+            <span class="text-[#1C3B4F] font-bold text-[20px]">{{ props.title }}</span>
+            <div class="flex">
+                <span v-if="props.selectedTopic" class="text-white bg-[#2794BF] px-4 py-2 mt-4 rounded-full justify-self-start">
+                    {{ props.selectedTopic }}
+                </span>
+            </div>
+            <div
+                class="flex flex-col gap-3"
+            >
+                <span v-for="(channel,index) in props.topChannels" :key="channel.topic+index">
+                    <Tile>
+                        <template #topic>
+                            {{ channel.topic }}
+                        </template>
+                        <template #mentions>
+                            {{ channel.mentions }} mentions
+                        </template>
+                    </Tile>
+                </span>
+                <div class="flex justify-center items-center gap-1 px-4 py-2 text-base bg-[#F4F4F4] rounded-2xl text-left">
+                    <span>Show more </span>
+                    <img src="~/assets/images/caret-down.svg" alt="">
+                </div>
+            </div>
+        </div>
+    </Card>
+</template>
+
+<script setup lang="ts">
+    const props = defineProps(['title', 'selectedTopic', 'topChannels'])
+</script>
+
+<style scoped>
+
+</style>

frontend/components/Trending.vue

@@ -0,0 +1,24 @@
+<template>
+   <Card>
+        <div class="flex justify-between text-center">
+            <span class="text-[#1C3B4F] font-bold text-[20px]">Trending topics</span>
+            <img src="~/assets/images/trend.svg" alt="Nature" />
+        </div>
+        <div class="flex flex-wrap justify-start items-center p-0">
+            <span v-for="(topic,index) in trending" :key="topic+index" class="text-native bg-white px-4 py-2 m-2 rounded-full"
+                @click="selectTopic(topic)"
+            >
+                {{ topic }}
+            </span>
+        </div>
+    </Card>
+</template>
+
+<script setup lang="ts">
+    const { trending, selectTopic } = useTopics()
+
+</script>
+
+<style scoped>
+
+</style>

frontend/components/common/Card.vue

@@ -0,0 +1,20 @@
+<template>
+    <div 
+        class="
+            h-full w-full bg-gray-400 rounded-2xl bg-clip-padding 
+            backdrop-filter backdrop-blur-sm bg-opacity-10 border 
+            border-gray-100
+            p-5 shadow-lg
+        "
+    >
+        <slot></slot>
+    </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped>
+
+</style>

frontend/components/common/Tile.vue

@@ -0,0 +1,21 @@
+<template>
+    <div class="flex flex-col gap-1 px-4 py-2 bg-[#F4F4F4] rounded-2xl text-left">
+        <!-- Topics -->
+       <span class="text-base text-[#3A3A3A]">
+        <slot name="topic"></slot>
+       </span> 
+
+        <!-- Mentions -->
+       <span class="text-sm text-[#8F8F8F]">
+        <slot name="mentions"></slot>
+       </span> 
+    </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped>
+
+</style>