repod/src/views/Discover.vue

<template>
	<NcAppContent class="main">
		<NcTextField class="search" :label="t('Find a podcast')" :value.sync="search">
			<Magnify :size="20" />
		</NcTextField>
		<Search v-if="search" :value="search" />
		<TopList v-if="!search" />
		<AddRss v-if="!search" />
	</NcAppContent>
</template>

<script>
import { NcAppContent, NcTextField } from '@nextcloud/vue'
import AddRss from '../components/Discover/AddRss.vue'
import Magnify from 'vue-material-design-icons/Magnify.vue'
import Search from '../components/Discover/Search.vue'
import TopList from '../components/Discover/TopList.vue'

export default {
	name: 'Discover',
	components: {
		AddRss,
		Magnify,
		NcAppContent,
		NcTextField,
		Search,
		TopList,
	},
	data() {
		return {
			search: '',
		}
	},
}
</script>

<style scoped>
	.main {
		padding: 15px 51px;
		overflow: hidden;
	}

	.search {
		margin-bottom: 1rem;
	}
</style>