Cycle of Tech

記念すべき10個目。おばんです。

10個目を作ってきました。
https://rss-reader-gold.vercel.app/?zennTag=nextjs

せっかくなんで初めてpanda cssを使ってみました。使ってみた感想は割と好き。
こんな感じでrecipeを作ってコンポーネントみたいに定義する感じなんですね。

import { defineRecipe } from "@pandacss/dev"
export const tag = defineRecipe({
    className: "tag",
    base: {
        display: "inline-flex",
        alignItems: "center",
        justifyContent: "cener",
        padding: "4px 12px",
        borderRadius: "16px",
        fontSize: "12px",
        fontWeight: "500",
        cursor: "pointer",
        transition: "all 0.2s ease",
        border: "1px solid",
        whiteSpace: "nowrap",
        flesShrink: 0,
    },
    variants: {
        variant: {
            default: {
                backgroundColor: "#ffffff",
                borderColor: "#e5e7eb",
                color: "#374151",
                _hover: {
                    backgroundColor: "#f9fafb",
                    borderColor: "#d1d5db",
                },
            },
            selected: {
                backgroundColor: "#3b82f6",
                borderColor: "#3b82f6",
                color: "#ffffff",
                _hover: {
                    backgroundColor: "#2563eb",
                    borderColor: "#2563eb",
                },
            }
        }
    },
    defaultVariants: {
        variant: "default",
    },
});

一回 `pnpm prepare`で作っちゃえばそれからホットリロードでちゃんと更新されるのも良き。
ただあくまでcssのフレームワークだから自分でコンポーネントを一から作るのは正直めんどくさかった。
やっぱshadcn/uiとかの方が楽で良いかな。逆にちゃんと自分でコンポーネント作りますとか。デザイナーがfigmaとかで用意してますならpanda css めちゃ良さそうだね。

兎にも角にもこれで10個目が完成。
次に自分が作りたいと思うものを説明したらちょっと怒られちゃった。

正直完成する見込みは全くないからご指摘はごもっともなんだけど...
多分続かなくなりそうだからこことかで細かに報告できたらなと思います。

【Claudeに怒られたから】ゴミアプリを作り続ける。RSSリーダー【10個目】