Restructure search anime json mock
This commit is contained in:
@@ -27,14 +27,14 @@ interface Props {
|
|||||||
description?: string;
|
description?: string;
|
||||||
|
|
||||||
tooltipEnabled?: boolean;
|
tooltipEnabled?: boolean;
|
||||||
tooltipMetadata?: {
|
tooltipMetadata: {
|
||||||
studio: string;
|
studio: string;
|
||||||
type: string;
|
type: string;
|
||||||
episodes: number;
|
episodes: number;
|
||||||
rating: number;
|
rating: number;
|
||||||
|
|
||||||
tags?: string[];
|
tags?: string[];
|
||||||
};
|
},
|
||||||
tooltipCollisionBoundary?: Element;
|
tooltipCollisionBoundary?: Element;
|
||||||
|
|
||||||
dynamicColor?: boolean;
|
dynamicColor?: boolean;
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { Search, SlidersHorizontal } from 'lucide-vue-next';
|
|
||||||
import HeroSection from '@/components/ui/internal/HeroSection.vue';
|
import HeroSection from '@/components/ui/internal/HeroSection.vue';
|
||||||
|
import { Search, SlidersHorizontal } from 'lucide-vue-next';
|
||||||
import MediaImageCard from '~/components/ui/internal/MediaImageCard.vue';
|
import MediaImageCard from '~/components/ui/internal/MediaImageCard.vue';
|
||||||
import SkeletonMediaImageCard from '~/components/ui/internal/SkeletonMediaImageCard.vue';
|
import SkeletonMediaImageCard from '~/components/ui/internal/SkeletonMediaImageCard.vue';
|
||||||
|
|
||||||
@@ -11,178 +11,144 @@ const trendingAnime = [
|
|||||||
id: 1,
|
id: 1,
|
||||||
image_url: "example/jigokuraku.jpg",
|
image_url: "example/jigokuraku.jpg",
|
||||||
title: "Jigokuraku 2nd Season",
|
title: "Jigokuraku 2nd Season",
|
||||||
type: "anime",
|
|
||||||
tooltipMetadata: {
|
|
||||||
studio: "MAPPA",
|
studio: "MAPPA",
|
||||||
type: "TV Show",
|
type: "TV Show",
|
||||||
episodes: 12,
|
episodes: 12,
|
||||||
rating: 78,
|
rating: 78,
|
||||||
tags: ["action", "adventure", "dark fantasy"],
|
tags: ["action", "adventure", "dark fantasy"],
|
||||||
status: "Ongoing",
|
status: "Ongoing",
|
||||||
season: "Spring 2024",
|
|
||||||
duration: "23 min"
|
duration: "23 min"
|
||||||
}
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 2,
|
id: 2,
|
||||||
image_url: "example/jujutsukaisen.jpg",
|
image_url: "example/jujutsukaisen.jpg",
|
||||||
title: "Jujutsu Kaisen: Shimetsu Kaiyuu - Zenpen",
|
title: "Jujutsu Kaisen: Shimetsu Kaiyuu - Zenpen",
|
||||||
type: "anime",
|
|
||||||
tooltipMetadata: {
|
|
||||||
studio: "MAPPA",
|
studio: "MAPPA",
|
||||||
type: "TV Show",
|
type: "TV Show",
|
||||||
episodes: 24,
|
episodes: 24,
|
||||||
rating: 85,
|
rating: 85,
|
||||||
tags: ["action", "supernatural", "dark fantasy"],
|
tags: ["action", "supernatural", "dark fantasy"],
|
||||||
status: "Finished",
|
status: "Finished",
|
||||||
season: "Fall 2023",
|
|
||||||
duration: "23 min"
|
duration: "23 min"
|
||||||
}
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 3,
|
id: 3,
|
||||||
image_url: "example/okiraku.jpg",
|
image_url: "example/okiraku.jpg",
|
||||||
title: "Okiraku Ryoushu no Tanoshii Ryouchi Bouei",
|
title: "Okiraku Ryoushu no Tanoshii Ryouchi Bouei",
|
||||||
type: "anime",
|
|
||||||
tooltipMetadata: {
|
|
||||||
studio: "CloverWorks",
|
studio: "CloverWorks",
|
||||||
type: "TV Show",
|
type: "TV Show",
|
||||||
episodes: 13,
|
episodes: 13,
|
||||||
rating: 72,
|
rating: 72,
|
||||||
tags: ["comedy", "fantasy", "slice of life"],
|
tags: ["comedy", "fantasy", "slice of life"],
|
||||||
status: "Ongoing",
|
status: "Ongoing",
|
||||||
season: "Winter 2024",
|
|
||||||
duration: "24 min"
|
duration: "24 min"
|
||||||
}
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 4,
|
id: 4,
|
||||||
image_url: "example/oshi no ko.jpg",
|
image_url: "example/oshi no ko.jpg",
|
||||||
title: "[Oshi no Ko] 3rd Season",
|
title: "[Oshi no Ko] 3rd Season",
|
||||||
type: "anime",
|
|
||||||
tooltipMetadata: {
|
|
||||||
studio: "Doga Kobo",
|
studio: "Doga Kobo",
|
||||||
type: "TV Show",
|
type: "TV Show",
|
||||||
episodes: 11,
|
episodes: 11,
|
||||||
rating: 88,
|
rating: 88,
|
||||||
tags: ["drama", "psychological", "showbiz"],
|
tags: ["drama", "psychological", "showbiz"],
|
||||||
status: "Airing",
|
status: "Airing",
|
||||||
season: "Spring 2024",
|
|
||||||
duration: "24 min"
|
duration: "24 min"
|
||||||
}
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 5,
|
id: 5,
|
||||||
image_url: "example/shibou.jpg",
|
image_url: "example/shibou.jpg",
|
||||||
title: "Shibou Yuugi de Meshi wo Kuu.",
|
title: "Shibou Yuugi de Meshi wo Kuu.",
|
||||||
type: "anime",
|
|
||||||
tooltipMetadata: {
|
|
||||||
studio: "Studio Bind",
|
studio: "Studio Bind",
|
||||||
type: "TV Show",
|
type: "TV Show",
|
||||||
episodes: 12,
|
episodes: 12,
|
||||||
rating: 75,
|
rating: 75,
|
||||||
tags: ["cooking", "fantasy", "isekai"],
|
tags: ["cooking", "fantasy", "isekai"],
|
||||||
status: "Finished",
|
status: "Finished",
|
||||||
season: "Fall 2023",
|
|
||||||
duration: "23 min"
|
duration: "23 min"
|
||||||
}
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 6,
|
id: 6,
|
||||||
image_url: "example/sousounofrieren.jpg",
|
image_url: "example/sousounofrieren.jpg",
|
||||||
title: "Sousou no Frieren 2nd Season",
|
title: "Sousou no Frieren 2nd Season",
|
||||||
type: "anime",
|
|
||||||
tooltipMetadata: {
|
|
||||||
studio: "Madhouse",
|
studio: "Madhouse",
|
||||||
type: "TV Show",
|
type: "TV Show",
|
||||||
episodes: 28,
|
episodes: 28,
|
||||||
rating: 92,
|
rating: 92,
|
||||||
tags: ["adventure", "drama", "fantasy"],
|
tags: ["adventure", "drama", "fantasy"],
|
||||||
status: "Airing",
|
status: "Airing",
|
||||||
season: "Spring 2024",
|
|
||||||
duration: "24 min"
|
duration: "24 min"
|
||||||
}
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 7,
|
id: 7,
|
||||||
image_url: "example/tamonkun.jpg",
|
image_url: "example/tamonkun.jpg",
|
||||||
title: "Tamon-kun Ima Docchi!?",
|
title: "Tamon-kun Ima Docchi!?",
|
||||||
type: "anime",
|
|
||||||
tooltipMetadata: {
|
|
||||||
studio: "Kyoto Animation",
|
studio: "Kyoto Animation",
|
||||||
type: "TV Show",
|
type: "TV Show",
|
||||||
episodes: 12,
|
episodes: 12,
|
||||||
rating: 68,
|
rating: 68,
|
||||||
tags: ["comedy", "romance", "school"],
|
tags: ["comedy", "romance", "school"],
|
||||||
status: "Ongoing",
|
status: "Ongoing",
|
||||||
season: "Winter 2024",
|
|
||||||
duration: "24 min"
|
duration: "24 min"
|
||||||
}
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 8,
|
id: 8,
|
||||||
image_url: "example/yuusha party.jpg",
|
image_url: "example/yuusha party.jpg",
|
||||||
title: "Yuusha Party wo Oidasareta Kiyou Binbou",
|
title: "Yuusha Party wo Oidasareta Kiyou Binbou",
|
||||||
type: "anime",
|
|
||||||
tooltipMetadata: {
|
|
||||||
studio: "Wit Studio",
|
studio: "Wit Studio",
|
||||||
type: "TV Show",
|
type: "TV Show",
|
||||||
episodes: 13,
|
episodes: 13,
|
||||||
rating: 70,
|
rating: 70,
|
||||||
tags: ["action", "adventure", "fantasy"],
|
tags: ["action", "adventure", "fantasy"],
|
||||||
status: "Finished",
|
status: "Finished",
|
||||||
season: "Fall 2023",
|
|
||||||
duration: "23 min"
|
duration: "23 min"
|
||||||
}
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 9,
|
id: 9,
|
||||||
image_url: "example/jujutsukaisen.jpg",
|
image_url: "example/jujutsukaisen.jpg",
|
||||||
title: "Jujutsu Kaisen: Shimetsu Kaiyuu - Zenpen soetjsot giwjiagjwiag wgi wajig wig gwi",
|
title: "Jujutsu Kaisen: Shimetsu Kaiyuu - Zenpen soetjsot giwjiagjwiag wgi wajig wig gwi",
|
||||||
type: "anime",
|
|
||||||
tooltipMetadata: {
|
|
||||||
studio: "MAPPA",
|
studio: "MAPPA",
|
||||||
type: "TV Show",
|
type: "TV Show",
|
||||||
episodes: 24,
|
episodes: 24,
|
||||||
rating: 85,
|
rating: 85,
|
||||||
tags: ["action", "supernatural", "dark fantasy"],
|
tags: ["action", "supernatural", "dark fantasy"],
|
||||||
status: "Finished",
|
status: "Finished",
|
||||||
season: "Fall 2023",
|
|
||||||
duration: "23 min"
|
duration: "23 min"
|
||||||
}
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 10,
|
id: 10,
|
||||||
image_url: "example/okiraku.jpg",
|
image_url: "example/okiraku.jpg",
|
||||||
title: "Okiraku Ryoushu no Tanoshii Ryouchi Bouei teisotsoeitj wgjiwag wgj wigwji",
|
title: "Okiraku Ryoushu no Tanoshii Ryouchi Bouei teisotsoeitj wgjiwag wgj wigwji",
|
||||||
type: "anime",
|
|
||||||
tooltipMetadata: {
|
|
||||||
studio: "CloverWorks",
|
studio: "CloverWorks",
|
||||||
type: "TV Show",
|
type: "TV Show",
|
||||||
episodes: 13,
|
episodes: 13,
|
||||||
rating: 72,
|
rating: 72,
|
||||||
tags: ["comedy", "fantasy", "slice of life"],
|
tags: ["comedy", "fantasy", "slice of life"],
|
||||||
status: "Ongoing",
|
status: "Ongoing",
|
||||||
season: "Winter 2024",
|
|
||||||
duration: "24 min"
|
duration: "24 min"
|
||||||
}
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 11,
|
id: 11,
|
||||||
image_url: "example/oshi no ko.jpg",
|
image_url: "example/oshi no ko.jpg",
|
||||||
title: "[Oshi no Ko] 3rd Season iaowjegiogjoiawgio waiogjawiog wag",
|
title: "[Oshi no Ko] 3rd Season iaowjegiogjoiawgio waiogjawiog wag",
|
||||||
type: "anime",
|
|
||||||
tooltipMetadata: {
|
|
||||||
studio: "Doga Kobo",
|
studio: "Doga Kobo",
|
||||||
type: "TV Show",
|
type: "TV Show",
|
||||||
episodes: 11,
|
episodes: 11,
|
||||||
rating: 88,
|
rating: 88,
|
||||||
tags: ["drama", "psychological", "showbiz"],
|
tags: ["drama", "psychological", "showbiz"],
|
||||||
status: "Airing",
|
status: "Airing",
|
||||||
season: "Spring 2024",
|
|
||||||
duration: "24 min"
|
duration: "24 min"
|
||||||
}
|
}
|
||||||
}
|
|
||||||
];
|
];
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@@ -214,7 +180,7 @@ const trendingAnime = [
|
|||||||
class="grid grid-cols-3 md:grid-cols-4 lg:grid-cols-5 2xl:grid-cols-6 gap-4 gap-y-12 justify-items-center w-full">
|
class="grid grid-cols-3 md:grid-cols-4 lg:grid-cols-5 2xl:grid-cols-6 gap-4 gap-y-12 justify-items-center w-full">
|
||||||
<MediaImageCard v-for="anime in trendingAnime" :key="anime.id" :id="anime.id"
|
<MediaImageCard v-for="anime in trendingAnime" :key="anime.id" :id="anime.id"
|
||||||
:image_url="anime.image_url" :title="anime.title" :type="anime.type" :tooltipEnabled="true"
|
:image_url="anime.image_url" :title="anime.title" :type="anime.type" :tooltipEnabled="true"
|
||||||
:tooltipMetadata="anime.tooltipMetadata" :tooltipCollisionBoundary="tooltipCollisionBoundary" />
|
:tooltipMetadata="anime" :tooltipCollisionBoundary="tooltipCollisionBoundary" />
|
||||||
<SkeletonMediaImageCard v-for="index in 10" />
|
<SkeletonMediaImageCard v-for="index in 10" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user