Skip to content

Commit

Permalink
UI調整
Browse files Browse the repository at this point in the history
  • Loading branch information
@nasubi-dev
nasubi-dev committed Oct 19, 2024
1 parent ebb00b2 commit 47bbe86
Show file tree
Hide file tree
Showing 2 changed files with 102 additions and 64 deletions.
2 changes: 1 addition & 1 deletion src/components/project/Card.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ export function ProjectCard({
m={4}
mdDown={{ minW: "90%" }}
minH={300}
minW={300}
minW={600}
p={4}
rounded="md"
w="20%"
Expand Down
164 changes: 101 additions & 63 deletions src/routes/_auth/projects/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,13 +24,18 @@ export const Route = createFileRoute("/_auth/projects/")({
return null;
}

// const scrollFruits = (): void => {
// scrollRef?.current?.scrollIntoView();
// };

return (
<HStack alignItems="start">
<HStack alignItems="start" w="full">
<VStack
bg="wkb-neutral.100"
display="block"
h="full"
w="500px"
minW="400px"
w="auto"
xlDown={{
display: "none",
}}
Expand All @@ -43,19 +48,34 @@ export const Route = createFileRoute("/_auth/projects/")({
みんなのプロジェクト
</p.p>
<VStack alignItems="start" gap={10} p={10}>
<Button color="wkb-neutral.0" fontSize="2xl" w="full">
<Button
bg="transparent"
colorPalette="wkb.bg"
fontSize="2xl"
w="full"
>
<HStack>
<Icon icon="akar-icons:heart" />
おすすめ
</HStack>
</Button>
<Button color="wkb-neutral.0" fontSize="2xl" w="full">
<Button
bg="transparent"
colorPalette="wkb.bg"
fontSize="2xl"
w="full"
>
<HStack>
<Icon icon="akar-icons:fire" />
急上昇
</HStack>
</Button>
<Button color="wkb-neutral.0" fontSize="2xl" w="full">
<Button
bg="transparent"
colorPalette="wkb.bg"
fontSize="2xl"
w="full"
>
<HStack>
<Icon icon="akar-icons:star" />
置き二位入り
Expand All @@ -65,8 +85,17 @@ export const Route = createFileRoute("/_auth/projects/")({
</p.div>
</VStack>

<VStack alignItems="center" maxW="1200px" w="100dvw">
<p.div maxW="1200px" w="100dvw">
<VStack alignItems="center" w="auto">
<p.div
display="none"
w="100dvw"
xlDown={{
display: "block",
}}
xlTo2xl={{
display: "block",
}}
>
<Swiper
autoplay
breakpoints={{
Expand Down Expand Up @@ -117,7 +146,7 @@ export const Route = createFileRoute("/_auth/projects/")({
display: "block",
}}
>
<p.div maxW="1200px" w="100%">
<p.div w="100%">
<Tabs.Root className={tabs.root} defaultValue="recommend">
<Tabs.List className={tabs.list}>
<Tabs.Trigger className={tabs.trigger} value="recommend">
Expand Down Expand Up @@ -223,86 +252,95 @@ export const Route = createFileRoute("/_auth/projects/")({
</p.div>
</Flex>

{/* PCビュー */}

<p.p
fontSize="5xl"
fontWeight="bold"
p={36}
textAlign="center"
w="100%"
>
Projects
</p.p>

<VStack
display="block"
w="100%"
w="calc(100dvw - 410px)"
xlDown={{
display: "none",
}}
xlTo2xl={{
display: "none",
}}
>
<p.div pl={8} py={8} w="100%">
<p.div pl={8} w="auto">
<HorizontalScrolling title="おすすめ">
<HStack w="100%">
<HStack gap={40} w="auto">
{projectsData.map((_) => (
<p.div key={_.project_id} w="500px">
<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"
}
/>
</p.div>
<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"
}
/>
))}
</HStack>
</HorizontalScrolling>
</p.div>

<p.div pl={8} py={8} w="100%">
<p.div pl={8} py={8} w="auto">
<HorizontalScrolling title="急上昇">
<HStack w="100%">
<HStack gap={40} w="auto">
{projectsData.map((_) => (
<p.div key={_.project_id} w="500px">
<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"
}
/>
</p.div>
<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"
}
/>
))}
</HStack>
</HorizontalScrolling>
</p.div>

<p.div pl={8} py={8} w="100%">
<p.div pl={8} py={8} w="auto">
<HorizontalScrolling title="お気に入り">
<HStack w="100%">
<HStack gap={40} w="auto">
{projectsData.map((_) => (
<p.div key={_.project_id} w="500px">
<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"
}
/>
</p.div>
<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"
}
/>
))}
</HStack>
</HorizontalScrolling>
Expand Down

0 comments on commit 47bbe86

Please sign in to comment.