Skip to content

Commit

Permalink
PCビュー 表示非表示の整理
Browse files Browse the repository at this point in the history
  • Loading branch information
@nasubi-dev
nasubi-dev committed Oct 19, 2024
1 parent 2b6fafa commit 3586c62
Showing 1 changed file with 178 additions and 136 deletions.
314 changes: 178 additions & 136 deletions src/routes/_auth/projects/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { Tabs } from "@ark-ui/react";
import { Icon } from "@iconify/react";
import { createFileRoute, Link } from "@tanstack/react-router";
import { Flex, HStack, styled as p } from "panda/jsx";
import { Flex, HStack, styled as p, VStack } from "panda/jsx";
import { Navigation } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/react";
import { projectsData } from "@/assets/data";
Expand All @@ -22,117 +23,181 @@ export const Route = createFileRoute("/_auth/projects/")({
}

return (
<>
<p.div w="100dvw">
<Swiper
autoplay
breakpoints={{
640: {
slidesPerView: 1,
},
768: {
slidesPerView: 2,
},
1024: {
slidesPerView: 3,
},
1280: {
slidesPerView: 4,
},
1536: {
slidesPerView: 5,
},
1792: {
slidesPerView: 6,
},
<HStack alignItems="start">
<VStack
bg="wkb-neutral.100"
display="block"
h="100vh"
w="500px"
xlDown={{
display: "none",
}}
xlTo2xl={{
display: "none",
}}
>
<p.div bg="wkb.primary" h="100%" p={4} w="100%">
<p.p color="wkb-neutral.0" fontSize="3xl" fontWeight="bold">
みんなのプロジェクト
</p.p>
<VStack alignItems="start" gap={10} p={10}>
<p.p color="wkb-neutral.0" fontSize="2xl">
<HStack>
<Icon icon="akar-icons:heart" />
おすすめ
</HStack>
</p.p>
<p.p color="wkb-neutral.0" fontSize="2xl">
<HStack>
<Icon icon="akar-icons:fire" />
急上昇
</HStack>
</p.p>
<p.p color="wkb-neutral.0" fontSize="2xl">
<HStack>
<Icon icon="akar-icons:star" />
置き二位入り
</HStack>
</p.p>
</VStack>
</p.div>
</VStack>
<VStack>
<p.div maxW="1200px" w="100dvw">
<Swiper
autoplay
breakpoints={{
640: {
slidesPerView: 1,
},
768: {
slidesPerView: 3,
},
}}
centeredSlides
loop
modules={[Navigation]}
navigation
>
<HStack>
{projectsData.map((_) => (
<SwiperSlide key={_.project_id} zoom={false}>
<Link to={`/projects/${_.project_id}`}>
<ProjectCard
amount_of_money={_.amount_of_money}
key_visual={_.key_visual ?? ""}
location={_.location}
name={_.name}
status={
// eslint-disable-next-line
_.project_id === "1"
? "tsubomi"
: _.project_id === "7"
? "hana"
: "wakaba"
}
/>
</Link>
</SwiperSlide>
))}
</HStack>
</Swiper>
</p.div>

<Flex
display="none"
justify="center"
xlDown={{
display: "block",
}}
xlTo2xl={{
display: "block",
}}
centeredSlides
loop
modules={[Navigation]}
navigation
>
<HStack>
{projectsData.map((_) => (
<SwiperSlide key={_.project_id} zoom={false}>
<Link to={`/projects/${_.project_id}`}>
<ProjectCard
amount_of_money={_.amount_of_money}
key_visual={_.key_visual ?? ""}
location={_.location}
name={_.name}
status={
// eslint-disable-next-line
_.project_id === "1"
? "tsubomi"
: _.project_id === "7"
? "hana"
: "wakaba"
}
/>
</Link>
</SwiperSlide>
))}
</HStack>
</Swiper>
</p.div>

<Flex justify="center">
<p.div maxW="1200px" w="100%">
<Tabs.Root className={tabs.root} defaultValue="recommend">
<Tabs.List className={tabs.list}>
<Tabs.Trigger className={tabs.trigger} value="recommend">
<p.p fontWeight="bold">おすすめ</p.p>
</Tabs.Trigger>
<Tabs.Trigger className={tabs.trigger} value="trending">
<p.p fontWeight="bold">急上昇</p.p>
</Tabs.Trigger>
<Tabs.Trigger className={tabs.trigger} value="all">
<p.p fontWeight="bold">すべて</p.p>
</Tabs.Trigger>
</Tabs.List>
<Tabs.Content value="recommend">
<GridLayout>
<>
{projectsData
.sort((a, b) => b.amount_of_money - a.amount_of_money)
.map((_) => (
<Link
key={_.project_id}
to={`/projects/${_.project_id}`}
>
<ProjectCard
amount_of_money={_.amount_of_money}
key_visual={_.key_visual ?? ""}
location={_.location}
name={_.name}
status={
// eslint-disable-next-line
_.project_id === "1"
? "tsubomi"
: _.project_id === "7"
? "hana"
: "wakaba"
}
/>
</Link>
))}
</>
</GridLayout>
</Tabs.Content>
<Tabs.Content value="trending">
<GridLayout>
<>
{projectsData
.sort(
(a, b) => Number(a.category_id) - Number(b.category_id),
)
.map((_) => (
<p.div maxW="1200px" w="100%">
<Tabs.Root className={tabs.root} defaultValue="recommend">
<Tabs.List className={tabs.list}>
<Tabs.Trigger className={tabs.trigger} value="recommend">
<p.p fontWeight="bold">おすすめ</p.p>
</Tabs.Trigger>
<Tabs.Trigger className={tabs.trigger} value="trending">
<p.p fontWeight="bold">急上昇</p.p>
</Tabs.Trigger>
<Tabs.Trigger className={tabs.trigger} value="all">
<p.p fontWeight="bold">すべて</p.p>
</Tabs.Trigger>
</Tabs.List>
<Tabs.Content value="recommend">
<GridLayout>
<>
{projectsData
.sort((a, b) => b.amount_of_money - a.amount_of_money)
.map((_) => (
<Link
key={_.project_id}
to={`/projects/${_.project_id}`}
>
<ProjectCard
amount_of_money={_.amount_of_money}
key_visual={_.key_visual ?? ""}
location={_.location}
name={_.name}
status={
// eslint-disable-next-line
_.project_id === "1"
? "tsubomi"
: _.project_id === "7"
? "hana"
: "wakaba"
}
/>
</Link>
))}
</>
</GridLayout>
</Tabs.Content>
<Tabs.Content value="trending">
<GridLayout>
<>
{projectsData
.sort(
(a, b) =>
Number(a.category_id) - Number(b.category_id),
)
.map((_) => (
<Link
key={_.project_id}
to={`/projects/${_.project_id}`}
>
<ProjectCard
key={_.project_id}
amount_of_money={_.amount_of_money}
key_visual={_.key_visual ?? ""}
location={_.location}
name={_.name}
status={
// eslint-disable-next-line
_.project_id === "1"
? "tsubomi"
: _.project_id === "7"
? "hana"
: "wakaba"
}
/>
</Link>
))}
</>
</GridLayout>
</Tabs.Content>
<Tabs.Content value="all">
<GridLayout>
<>
{projectsData.reverse().map((_) => (
<Link
key={_.project_id}
to={`/projects/${_.project_id}`}
>
<ProjectCard
key={_.project_id}
amount_of_money={_.amount_of_money}
key_visual={_.key_visual ?? ""}
location={_.location}
Expand All @@ -148,37 +213,14 @@ export const Route = createFileRoute("/_auth/projects/")({
/>
</Link>
))}
</>
</GridLayout>
</Tabs.Content>
<Tabs.Content value="all">
<GridLayout>
<>
{projectsData.reverse().map((_) => (
<Link key={_.project_id} to={`/projects/${_.project_id}`}>
<ProjectCard
amount_of_money={_.amount_of_money}
key_visual={_.key_visual ?? ""}
location={_.location}
name={_.name}
status={
// eslint-disable-next-line
_.project_id === "1"
? "tsubomi"
: _.project_id === "7"
? "hana"
: "wakaba"
}
/>
</Link>
))}
</>
</GridLayout>
</Tabs.Content>
</Tabs.Root>
</p.div>
</Flex>
</>
</>
</GridLayout>
</Tabs.Content>
</Tabs.Root>
</p.div>
</Flex>
</VStack>
</HStack>
);
},
});

0 comments on commit 3586c62

Please sign in to comment.