utcode-learnの宣伝を追加、alert用アイコンを1ファイルにまとめる

Author: na-trium-144

app/daisyAlertIcon.tsx

@@ -0,0 +1,73 @@
+// https://daisyui.com/components/alert/ のコード例のsvgのコピペ
+
+export function DaisyInfoIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      className="stroke-info h-6 w-6 shrink-0"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
+        d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+      ></path>
+    </svg>
+  );
+}
+
+export function DaisySuccessIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      className="h-6 w-6 shrink-0 stroke-current"
+      fill="none"
+      viewBox="0 0 24 24"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
+        d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+      />
+    </svg>
+  );
+}
+
+export function DaisyWarningIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      className="h-6 w-6 shrink-0 stroke-current"
+      fill="none"
+      viewBox="0 0 24 24"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
+        d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+      />
+    </svg>
+  );
+}
+
+export function DaisyErrorIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      className="h-6 w-6 shrink-0 stroke-current"
+      fill="none"
+      viewBox="0 0 24 24"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
+        d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
+      />
+    </svg>
+  );
+}

app/page.tsx

@@ -4,7 +4,13 @@ import { getPagesList } from "@/lib/docs";
 import clsx from "clsx";
 import { LanguageIcon } from "./terminal/icons";
 import { RuntimeLang } from "@my-code/runtime/languages";
-import { ChatImage, FeatureCard, PracticeImage, RuntimeImage } from "./featureCard";
+import {
+  ChatImage,
+  FeatureCard,
+  PracticeImage,
+  RuntimeImage,
+} from "./featureCard";
+import { DaisyInfoIcon } from "./daisyAlertIcon";
 
 export const metadata: Metadata = {
   title: "my.code(); へようこそ",
@@ -107,9 +113,33 @@ export default async function Home() {
         <h2 id="tutorials" className="text-3xl font-bold mb-4 text-center">
           さあ、学習を始めましょう
         </h2>
-        <p className="text-center opacity-70 mb-10">
+        <p className="text-center opacity-70 mb-4">
           豊富なラインナップから、学びたい言語を選択してください。
+          <br />
+          my.code();
+          ならあなたがまだ触ったことがない言語を気軽に体験することができます。
         </p>
+        <div className="alert alert-info alert-dash mb-4 w-max max-w-full mx-auto">
+          <DaisyInfoIcon />
+          <span>
+            プログラミング未経験の方、何から始めればいいかわからない...という方は、
+            <br className="hidden md:block" />
+            まずは
+            <a
+              className="link mx-1"
+              style={{
+                color: "#25c2a0",
+                fontFamily:
+                  'system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
+              }}
+              href="https://learn.utcode.net"
+              target="_blank"
+            >
+              ut.code(); Learn
+            </a>
+            でプログラミングの基礎を学ぶことをおすすめします！
+          </span>
+        </div>
         <div
           className="grid items-center gap-4"
           style={{

app/terminal/page.tsx

@@ -25,6 +25,7 @@ import sub_h from "./samples/sub.h?raw";
 import sub_cpp from "./samples/sub.cpp?raw";
 import main2_rs from "./samples/main2.rs?raw";
 import sub_rs from "./samples/sub.rs?raw";
+import { DaisyInfoIcon } from "@/daisyAlertIcon";
 
 export default function RuntimeTestPage() {
   return (
@@ -281,19 +282,7 @@ function MochaTest() {
         </div>
       ) : (
         <div className="alert mt-16 sm:mt-4 w-80">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 24 24"
-            className="stroke-info h-6 w-6 shrink-0"
-          >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth="2"
-              d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-            ></path>
-          </svg>
+          <DaisyInfoIcon />
           テストが完了しました
         </div>
       )}