bento cleanup
This commit is contained in:
@ -33,56 +33,31 @@ export default async function Share({
|
|||||||
const matchedSongs = songsData.filter((song) => playlogIds.includes(song.id));
|
const matchedSongs = songsData.filter((song) => playlogIds.includes(song.id));
|
||||||
return (
|
return (
|
||||||
<div className=" h-screen grid w-full gap-4 bg-red-200 grid-cols-8 grid-rows-9 rounded-lg shadow-md">
|
<div className=" h-screen grid w-full gap-4 bg-red-200 grid-cols-8 grid-rows-9 rounded-lg shadow-md">
|
||||||
<div className="col-span-2 row-span-2 row-start-2 col-start-2 bg-pink-200 rounded-lg shadow-md flex items-center justify-center">
|
<div className="col-span-2 row-span-1 row-start-2 col-start-2 bg-pink-200 rounded-lg shadow-md flex items-center justify-center">
|
||||||
<p>Salmon</p>
|
{matchedSongs.map((song) => (
|
||||||
|
<div key={song.id} className=" flex justify-center items-center">
|
||||||
|
<div className="text-white text-lg">
|
||||||
|
<p>Score: {song.score}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="col-span-4 row-span-4 row-start-2 bg-lime-200 rounded-lg shadow-md flex items-center justify-center">
|
<div className="col-span-4 row-span-4 row-start-2 bg-lime-200 rounded-lg shadow-md flex items-center justify-center">
|
||||||
<p>Broccoli</p>
|
<p>Broccoli</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="col-span-2 col-start-2 row-span-2 bg-yellow-200 rounded-lg shadow-md flex items-center justify-center">
|
<div className="col-span-2 col-start-2 row-span-3 row-start-3 bg-yellow-200 rounded-lg shadow-md flex items-center justify-center">
|
||||||
<p>Tamago</p>
|
<p>Tamago</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="col-span-2 col-start-2 row-span-3 bg-yellow-200 rounded-lg shadow-md flex items-center justify-center">
|
<div className="col-span-2 col-start-2 row-span-2 bg-yellow-200 rounded-lg shadow-md flex items-center justify-center">
|
||||||
<p>Pork</p>
|
<p>Pork</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="col-span-4 col-start-4 row-span-2 bg-green-200 rounded-lg shadow-md flex items-center justify-center">
|
<div className="col-span-4 col-start-4 row-span-1 bg-green-200 rounded-lg shadow-md flex items-center justify-center">
|
||||||
<p>Edamame</p>
|
<p>Edamame</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
// <div className="py-4 px-2 mx-auto max-w-screen-xl sm:py-4 lg:px-6">
|
|
||||||
// <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-5 gap-4 h-full">
|
|
||||||
// {matchedSongs.map((song) => (
|
|
||||||
// <div
|
|
||||||
// key={song.id}
|
|
||||||
// className="bg-slate-500 h-200 w-400 flex justify-center items-center"
|
|
||||||
// >
|
|
||||||
// <div className="text-white text-lg">
|
|
||||||
// <p>{song.title}</p>
|
|
||||||
// <p>Artist: {song.artist}</p>
|
|
||||||
// <p>Genre: {song.genre}</p>
|
|
||||||
// <p>diff: {song.chartlevel}</p>
|
|
||||||
|
|
||||||
// <p>Level: {song.level}</p>
|
|
||||||
|
|
||||||
// <p>Full Combo: {song.isFullCombo ? "Yes" : "No"}</p>
|
|
||||||
// <p>Score: {song.score}</p>
|
|
||||||
|
|
||||||
// <div>
|
|
||||||
// <span
|
|
||||||
// className={`justify-center rounded-sm text-center text-sm font-bold ${getDifficultyClass(
|
|
||||||
// song.chartId
|
|
||||||
// )} text-white`}
|
|
||||||
// >
|
|
||||||
// {getDifficultyText(song.chartId)}
|
|
||||||
// </span>
|
|
||||||
// </div>
|
|
||||||
// </div>
|
|
||||||
// </div>
|
|
||||||
// ))}
|
|
||||||
// </div>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
Reference in New Issue
Block a user