Refactor code structure and remove redundant changes

pages/community/components/WorkCard.vue

@@ -0,0 +1,83 @@
+<template>
+  <div class="work-card">
+    <div class="work-image">
+      <img :src="work.image" :alt="work.title" />
+    </div>
+    <div class="work-info">
+      <h3>{{ work.title }}</h3>
+      <div class="work-stats">
+        <span>
+          <i class="icon-view"></i>
+          {{ work.views }}
+        </span>
+        <span>
+          <i class="icon-like"></i>
+          {{ work.likes }}
+        </span>
+        <span>
+          <i class="icon-comment"></i>
+          {{ work.comments }}
+        </span>
+      </div>
+      <div class="work-author">
+        <img :src="work.authorAvatar" :alt="work.author" />
+        <span>by {{ work.author }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  defineProps({
+    work: {
+      type: Object,
+      required: true,
+    },
+  })
+</script>
+
+<style scoped>
+  .work-card {
+    background: white;
+    border-radius: 8px;
+    overflow: hidden;
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+  }
+
+  .work-image {
+    height: 200px;
+    overflow: hidden;
+  }
+
+  .work-image img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .work-info {
+    padding: 15px;
+  }
+
+  .work-stats {
+    display: flex;
+    gap: 15px;
+    color: #666;
+    font-size: 14px;
+    margin: 10px 0;
+  }
+
+  .work-author {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 14px;
+    color: #666;
+  }
+
+  .work-author img {
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+  }
+</style>