generated from jphacks/JP_sample
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #62 from jphacks/fix/yama/user-design
ユーザーページのリファクタリング
- Loading branch information
Showing
5 changed files
with
154 additions
and
84 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,55 +1,74 @@ | ||
| import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; | ||
| import { Progress } from "@/components/ui/progress"; | ||
| import StatusChangeDialog from "@/components/view/user/StatusChangeDialog"; | ||
| import { ChevronRight } from "lucide-react"; | ||
| import { useState } from "react"; | ||
|
|
||
| type StatusListProps = { | ||
| speedPoint: number; | ||
| similarityPoint: number; | ||
| onClick: () => void; | ||
| }; | ||
|
|
||
| export default function StatusList({ | ||
| speedPoint, | ||
| similarityPoint, | ||
| onClick, | ||
| }: StatusListProps) { | ||
| const [isOpen, setIsOpen] = useState(false); | ||
|
|
||
| return ( | ||
| <Card className="flex flex-col items-center border-none p-8 cursor-pointer"> | ||
| <CardHeader className="flex flex-row items-center justify-between w-full space-y-0 pb-2"> | ||
| <CardTitle className="text-xl font-medium"> | ||
| プレイスタイル設定 | ||
| </CardTitle> | ||
| <ChevronRight className="h-5 w-5 text-muted-foreground" /> | ||
| </CardHeader> | ||
| <CardContent className="w-full pb-6"> | ||
| <p className="text-sm text-muted-foreground mb-6"> | ||
| スピードと類似度のバランスを調整 | ||
| </p> | ||
| <div className="flex flex-wrap gap-4"> | ||
| <div className="flex-1 min-w-[200px] space-y-2"> | ||
| <div className="flex justify-between text-sm"> | ||
| <span>スピード</span> | ||
| <span>{speedPoint}ポイント</span> | ||
| </div> | ||
| <Progress value={speedPoint} className="h-2 bg-blue-100"> | ||
| <div | ||
| className="h-full bg-blue-500" | ||
| style={{ width: `${speedPoint}%` }} | ||
| <> | ||
| <Card | ||
| className="flex flex-col w-[21rem] items-center border-none cursor-pointer" | ||
| onClick={() => { | ||
| setIsOpen(true); | ||
| onClick(); | ||
| }} | ||
| > | ||
| <CardHeader className="flex flex-row items-start justify-between w-full pb-1"> | ||
| <CardTitle className="text-xl font-bold text-[#333333]"> | ||
| プレイスタイル設定 | ||
| </CardTitle> | ||
| <ChevronRight className="h-5 w-5 text-muted-foreground" /> | ||
| </CardHeader> | ||
| <CardContent className="w-full pb-6"> | ||
| <p className="text-start text-sm text-muted-foreground mb-4"> | ||
| スピードと類似度のバランスを調整 | ||
| </p> | ||
| <div className="flex gap-4"> | ||
| <div className="w-1/2 space-y-2"> | ||
| <div className="flex justify-between text-xs"> | ||
| <span>スピード</span> | ||
| <span className="font-bold">{speedPoint}ポイント</span> | ||
| </div> | ||
| <Progress | ||
| value={speedPoint} | ||
| className="bg-blue-100" | ||
| indicatorClassName="bg-blue-500" | ||
| /> | ||
| </Progress> | ||
| </div> | ||
| <div className="flex-1 min-w-[200px] space-y-2"> | ||
| <div className="flex justify-between text-sm"> | ||
| <span>類似度</span> | ||
| <span>{similarityPoint}ポイント</span> | ||
| </div> | ||
| <Progress value={similarityPoint} className="h-2 bg-green-100"> | ||
| <div | ||
| className="h-full bg-green-500" | ||
| style={{ width: `${similarityPoint}%` }} | ||
| <div className="w-1/2 space-y-2"> | ||
| <div className="flex justify-between text-xs"> | ||
| <span>類似度</span> | ||
| <span className="font-bold">{similarityPoint}ポイント</span> | ||
| </div> | ||
| <Progress | ||
| value={similarityPoint} | ||
| className="bg-green-100" | ||
| indicatorClassName="bg-green-500" | ||
| /> | ||
| </Progress> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </CardContent> | ||
| </Card> | ||
| </CardContent> | ||
| </Card> | ||
|
|
||
| <StatusChangeDialog | ||
| isOpen={isOpen} | ||
| onClose={() => setIsOpen(false)} | ||
| initialSpeed={speedPoint} | ||
| initialSimilarity={similarityPoint} | ||
| /> | ||
| </> | ||
| ); | ||
| } |