207 lines
8.5 KiB
Vue
Executable File
207 lines
8.5 KiB
Vue
Executable File
<template>
|
||
<meta-head title="Новинки"></meta-head>
|
||
|
||
<div class="mb-6 py-10 md:py-14 xl:py-20 banner relative bg-center bg-no-repeat bg-cover"
|
||
style="background-image: url('/image/bg-home.jpg');"
|
||
>
|
||
<div class="min-h-[24rem] flex justify-center items-center text-center">
|
||
<div class="max-w-4xl text-gray px-3">
|
||
<p class="text-md md:text-2xl">
|
||
Социальная сеть для творческих людей
|
||
</p>
|
||
<h1
|
||
class="mt-4 md:mt-8 text-xl md:text-2xl lg:text-3xl xl:text-5xl text-white font-semibold xl:leading-relaxed"
|
||
>
|
||
Зарабатывай на
|
||
своем творчестве вместе с teeaseer
|
||
</h1>
|
||
<div v-if="!$page.props.auth.user" class="mt-4 md:flex flex-wrap -mx-3 justify-center">
|
||
<inertia-link
|
||
:href="route('login')"
|
||
class="min-w-[260px] mx-3 my-1 px-6 md:px-12 py-3 transition shadow-none hover:shadow-classic2 inline-flex items-center justify-center text-base rounded-full text-white border border-white bg-transparent focus:outline-none"
|
||
>
|
||
Войти
|
||
</inertia-link>
|
||
|
||
|
||
<inertia-link
|
||
:href="route('register')"
|
||
class="min-w-[260px] mx-3 my-1 px-6 md:px-12 py-3 transition shadow-none hover:shadow-classic2 inline-flex items-center justify-center text-base rounded-full text-white border border-white bg-transparent focus:outline-none"
|
||
>
|
||
Зарегистрироваться
|
||
</inertia-link>
|
||
<inertia-link
|
||
:href="route('common.write-to-us.get')"
|
||
class="min-w-[260px] mx-3 my-1 px-6 md:px-12 py-3 transition shadow-none hover:shadow-classic2 inline-flex items-center justify-center text-base rounded-full text-white border border-white bg-transparent focus:outline-none"
|
||
>
|
||
Написать нам
|
||
</inertia-link>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="mt-3 text-gray mx-auto max-w-2xl">
|
||
<ul class="flex justify-center flex-wrap gap-3 text-xs px-3">
|
||
<li>
|
||
<a target="_blank" class="hover:underline"
|
||
href="/docs/company.pdf"
|
||
rel="noopener noreferrer nofollow"
|
||
>О компании</a>
|
||
</li>
|
||
<li>
|
||
<a target="_blank" class="hover:underline"
|
||
href="/docs/offer_authors.pdf"
|
||
rel="noopener noreferrer nofollow"
|
||
>Оферта для авторов</a>
|
||
</li>
|
||
<li>
|
||
<a target="_blank" class="hover:underline"
|
||
href="/docs/offer_paid_subscription.pdf"
|
||
rel="noopener noreferrer nofollow"
|
||
>Оферта на платную подписку</a>
|
||
</li>
|
||
<li>
|
||
<a target="_blank" class="hover:underline"
|
||
href="/docs/security_policy.pdf"
|
||
rel="noopener noreferrer nofollow"
|
||
>Политика безопасности</a>
|
||
</li>
|
||
<li>
|
||
<a target="_blank" class="hover:underline"
|
||
href="/docs/privacy_policy.pdf"
|
||
rel="noopener noreferrer nofollow"
|
||
>Политика конфиденциальности</a>
|
||
</li>
|
||
<li>
|
||
<a target="_blank" class="hover:underline"
|
||
href="/docs/terms_use.pdf"
|
||
rel="noopener noreferrer nofollow"
|
||
>Пользовательское соглашение</a>
|
||
</li>
|
||
<li>
|
||
<a target="_blank" class="hover:underline"
|
||
href="/docs/personal_data.pdf"
|
||
rel="noopener noreferrer nofollow"
|
||
>Согласие на обработку персональных данных</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="xl:container xl:mx-auto px-2 md:px-3 buttons-filter-line">
|
||
<div class=" relative mb-5">
|
||
<div class="absolute inset-y-0 left-3 flex items-center z-[1]">
|
||
<svg class="flex-shrink-0 h-5 w-5 text-gray-light" xmlns="http://www.w3.org/2000/svg"
|
||
viewBox="0 0 24 24" fill="currentColor"
|
||
>
|
||
<path fill-rule="evenodd" clip-rule="evenodd"
|
||
d="M11 4a7 7 0 100 14 7 7 0 000-14zm-9 7a9 9 0 1118 0 9 9 0 01-18 0z"
|
||
/>
|
||
<path fill-rule="evenodd" clip-rule="evenodd"
|
||
d="M15.943 15.943a1 1 0 011.414 0l4.35 4.35a1 1 0 01-1.414 1.414l-4.35-4.35a1 1 0 010-1.414z"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
<input
|
||
v-model="form.search"
|
||
class="relative w-full focus:ring-4 focus:ring-offset-1 focus:ring-orange focus:ring-opacity-20 focus:ring-offset-orange focus:border-transparent text-gray border border-indigo-300 bg-indigo-200 rounded-md placeholder-gray-light !pl-10 h-14" placeholder="Поиск"
|
||
type="search"
|
||
>
|
||
</div>
|
||
|
||
<div class="grid gap-2 md:gap-5 grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6">
|
||
<inertia-link :href="route('dashboard')"
|
||
:class="[active_filter == 'new' ? 'bg-orange shadow-classic2' : 'shadow-classic bg-indigo-200 hover:bg-orange' , 'transition inline-flex items-center px-3 py-3 lg:px-6 lg:py-6 xl:px-10 text-sm lg:text-lg justify-center rounded-md text-white focus:outline-none']"
|
||
>
|
||
Новинки
|
||
</inertia-link>
|
||
|
||
<inertia-link :href="route('dashboard')"
|
||
:data="{ filter: 'hot' }"
|
||
:class="[active_filter == 'hot' ? 'bg-orange shadow-classic2' : 'shadow-classic bg-indigo-200 hover:bg-orange' , 'transition inline-flex items-center px-3 py-3 lg:px-6 lg:py-6 xl:px-10 text-sm lg:text-lg justify-center shadow-classic rounded-md text-white focus:outline-none']"
|
||
>
|
||
<svg class="-ml-1 mr-2 h-4 w-4 md:h-5 md:w-5 flex-shrink-0" fill="currentColor"
|
||
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
|
||
>
|
||
<path
|
||
d="M14.422 6.243c-3.57-2.172-1.895-5.238-1.824-5.365A.586.586 0 0012.09 0c-1.837 0-3.276.522-4.276 1.552-1.71 1.76-1.63 4.498-1.597 5.667.004.13.007.242.007.325 0 .868.14 1.67.263 2.377.079.456.147.85.16 1.159.012.331-.048.407-.05.41-.01.01-.081.049-.276.049a.657.657 0 01-.53-.235c-.565-.634-.604-2.365-.496-3.307a.586.586 0 00-.582-.654c-1.521 0-2.658 2.488-2.658 4.712 0 1.046.21 2.07.625 3.045a8.081 8.081 0 001.7 2.527C5.894 19.157 7.89 20 10 20c2.119 0 4.114-.83 5.618-2.34a7.892 7.892 0 002.327-5.605c0-2.692-2.107-4.95-3.523-5.812zM10 18.828c-3.671 0-6.773-3.101-6.773-6.773 0-.893.213-1.83.585-2.571.086-.173.175-.322.263-.447.01.967.163 2.284.841 3.046.366.41.852.627 1.405.627.518 0 .912-.156 1.172-.466.486-.578.337-1.436.148-2.524-.115-.66-.245-1.409-.245-2.176 0-.1-.003-.22-.007-.359-.032-1.107-.099-3.412 1.265-4.817.613-.63 1.467-1.014 2.55-1.145-.123.406-.228.92-.232 1.497-.01 1.27.476 3.085 2.841 4.524 1.145.696 2.96 2.618 2.96 4.811A6.78 6.78 0 0110 18.828z"
|
||
/>
|
||
</svg>
|
||
Популярные
|
||
</inertia-link>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="xl:container xl:mx-auto px-2 md:px-3 my-6">
|
||
<button class="button-default text-gray text-lg" @click="resetFilter">
|
||
Очистить фильтры
|
||
</button>
|
||
</div>
|
||
|
||
|
||
<div class="xl:container xl:mx-auto px-2 md:px-3">
|
||
<div class="grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 cards-block rounded-md bg-indigo-200 shadow-classic grid gap-2 lg:gap-4 grid-cards p-2 lg:p-5">
|
||
<feed
|
||
:next-cursor="nextCursor"
|
||
:feeds="feeds"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { Inertia } from '@inertiajs/inertia'
|
||
import pickBy from 'lodash/pickBy'
|
||
import throttle from 'lodash/throttle'
|
||
|
||
import Feed from '@/Shared/Feed/Feed.vue'
|
||
import Layout from '@/Shared/Layout.vue'
|
||
import MetaHead from '@/Shared/MetaHead.vue'
|
||
|
||
export default {
|
||
components: {
|
||
MetaHead,
|
||
Feed
|
||
},
|
||
layout: Layout,
|
||
props: {
|
||
feeds: Array,
|
||
nextCursor: String,
|
||
active_filter: String,
|
||
searchFilters: Object,
|
||
},
|
||
|
||
data() {
|
||
return {
|
||
form: {
|
||
search: this.searchFilters.search,
|
||
},
|
||
}
|
||
},
|
||
|
||
watch: {
|
||
form: {
|
||
deep: true,
|
||
handler: throttle(function () {
|
||
Inertia.get(route('dashboard'), pickBy(this.form), {
|
||
preserveScroll: true, preserveState: true
|
||
})
|
||
}, 500),
|
||
},
|
||
},
|
||
|
||
|
||
methods: {
|
||
resetFilter() {
|
||
Inertia.get(
|
||
route('dashboard'),
|
||
{},
|
||
{
|
||
preserveScroll: true,
|
||
}
|
||
)
|
||
},
|
||
},
|
||
|
||
}
|
||
</script>
|