魚之魷魂
diff --git a/frontend/src/lib/home/framework/ui/SelfTags.tsx b/frontend/src/lib/home/framework/ui/SelfTags.tsx
new file mode 100644
index 0000000..00d2f3a
--- /dev/null
+++ b/frontend/src/lib/home/framework/ui/SelfTags.tsx
@@ -0,0 +1,55 @@
+"use client";
+
+import { Provider } from "react-redux";
+import tagStore from "../../presenter/tagStore";
+import { useTagDispatch, useTagSelector } from "../../presenter/tagHooks";
+import { useEffect, useState } from "react";
+import { tagStartedAction, tagStoppedAction } from "../../presenter/tagSlice";
+
+export default function SelfTags() {
+ return (
+
+ <_SelfTags />
+
+ );
+}
+
+function _SelfTags() {
+ const tags = useTagSelector((state) => state.tag.tags);
+ const dispatch = useTagDispatch();
+
+ const [isTagsVisible, setIsTagsVisible] = useState(false);
+
+ useEffect(() => {
+ dispatch(tagStartedAction({ interval: 4000 }));
+ return () => {
+ dispatch(tagStoppedAction());
+ setIsTagsVisible(false);
+ };
+ }, []);
+
+ useEffect(() => {
+ if (tags.length === 0) return;
+ setIsTagsVisible(true);
+ setTimeout(() => {
+ setIsTagsVisible(false);
+ }, 3500);
+ }, [tags]);
+
+ return (
+
+
+
+ {tags.map((tag) => (
+
+ ))}
+
+
+ );
+}
+
+function Hashtag(props: { tag: string }) {
+ return
# {props.tag};
+}
diff --git a/frontend/src/lib/home/presenter/tagHooks.ts b/frontend/src/lib/home/presenter/tagHooks.ts
new file mode 100644
index 0000000..a4c799f
--- /dev/null
+++ b/frontend/src/lib/home/presenter/tagHooks.ts
@@ -0,0 +1,6 @@
+import { useDispatch, useSelector } from "react-redux";
+import tagStore from "./tagStore";
+
+export const useTagDispatch = useDispatch.withTypes
();
+export const useTagSelector =
+ useSelector.withTypes>();
diff --git a/frontend/src/lib/home/presenter/tagSlice.ts b/frontend/src/lib/home/presenter/tagSlice.ts
new file mode 100644
index 0000000..67f05ac
--- /dev/null
+++ b/frontend/src/lib/home/presenter/tagSlice.ts
@@ -0,0 +1,72 @@
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
+import tagStore from "./tagStore";
+import shuffleArray from "@/lib/util/shuffleArray";
+
+export interface TagState {
+ tags: string[];
+ timer?: NodeJS.Timeout;
+}
+
+export interface TagStartedActionPayload {
+ interval: number;
+}
+
+export const tagSlice = createSlice({
+ name: "tag",
+ initialState: {
+ tags: [],
+ timer: undefined,
+ } as TagState,
+ reducers: {
+ started: (state, action: PayloadAction) => {
+ state.tags = shuffleArray(tagsCollection);
+ state.timer = setInterval(() => {
+ tagStore.dispatch(tagSlice.actions.shuffled());
+ }, action.payload.interval);
+ },
+ shuffled: (state) => {
+ state.tags = shuffleArray(tagsCollection);
+ },
+ stopped: (state) => {
+ clearInterval(state.timer);
+ state.timer = undefined;
+ },
+ },
+});
+
+export const tagStartedAction = tagSlice.actions.started;
+export const tagStoppedAction = tagSlice.actions.stopped;
+
+const tagReducer = tagSlice.reducer;
+export default tagReducer;
+
+const tagsCollection = [
+ "APP",
+ "C++",
+ "Design Pattern",
+ "Docker",
+ "Flutter",
+ "Go",
+ "Java",
+ "LINER",
+ "Linux",
+ "Python",
+ "Squid",
+ "TypeScript",
+ "中央大學",
+ "全端",
+ "分享",
+ "前端",
+ "後端",
+ "教學",
+ "暴肝",
+ "知識",
+ "碼農",
+ "科技",
+ "科普",
+ "程式設計",
+ "資工系",
+ "軟體工程",
+ "遊戲",
+ "魷魚",
+];
diff --git a/frontend/src/lib/home/presenter/tagStore.ts b/frontend/src/lib/home/presenter/tagStore.ts
new file mode 100644
index 0000000..557fd1a
--- /dev/null
+++ b/frontend/src/lib/home/presenter/tagStore.ts
@@ -0,0 +1,10 @@
+import { configureStore } from "@reduxjs/toolkit";
+import tagReducer from "./tagSlice";
+
+const tagStore = configureStore({
+ reducer: {
+ tag: tagReducer,
+ },
+});
+
+export default tagStore;
diff --git a/frontend/src/lib/util/shuffleArray.ts b/frontend/src/lib/util/shuffleArray.ts
new file mode 100644
index 0000000..851ed97
--- /dev/null
+++ b/frontend/src/lib/util/shuffleArray.ts
@@ -0,0 +1,8 @@
+export default function shuffleArray(array: T[]): T[] {
+ const newArray = [...array];
+ for (let i = newArray.length - 1; i > 0; i--) {
+ const j = Math.floor(Math.random() * (i + 1));
+ [newArray[i], newArray[j]] = [newArray[j], newArray[i]];
+ }
+ return newArray;
+}
diff --git a/frontend/tailwind.config.ts b/frontend/tailwind.config.ts
index 85afc41..11fcf7f 100644
--- a/frontend/tailwind.config.ts
+++ b/frontend/tailwind.config.ts
@@ -2,7 +2,7 @@ import type { Config } from "tailwindcss";
export default {
content: [
- "./src/ui/**/*.{js,ts,jsx,tsx,mdx}",
+ "./src/lib/**/*.{js,ts,jsx,tsx,mdx}",
"./src/app/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: {