feat(docs): add card snippet docs.

riazer-lab · Jun 23, 2023 · 484635d · 484635d · vercel · Jun 23, 2023
1 parent 57e2b87
commit 484635d
Show file tree

Hide file tree

Showing 6 changed files with 244 additions and 2 deletions.
diff --git a/apps/website/pages/docs/snippets/_meta.en.json b/apps/website/pages/docs/snippets/_meta.en.json
@@ -1,4 +1,5 @@
 {
   "overview": "Overview",
-  "gradient-text": "Gradient Text"
+  "gradient-text": "Gradient Text",
+  "card": "Card"
 }
diff --git a/apps/website/pages/docs/snippets/_meta.zh.json b/apps/website/pages/docs/snippets/_meta.zh.json
@@ -1,4 +1,5 @@
 {
   "overview": "概览",
-  "gradient-text": "渐变色文本"
+  "gradient-text": "渐变色文本",
+  "card": "卡片"
 }
diff --git a/apps/website/pages/docs/snippets/card.en.mdx b/apps/website/pages/docs/snippets/card.en.mdx
@@ -0,0 +1,122 @@
+# Card
+
+import { CodeDemo } from '../../../components/demo/code';
+
+## Text
+
+<CodeDemo>
+  <div class="overflow-hidden rounded-lg has-shadow w-80 p-4 flex flex-col gap-2">
+    <div class="flex justify-between items-baseline">
+      <h3 class="text-xl font-semibold">Sira team talk</h3>
+      <div class="text-xs">Ricco Xie • 1 June 2023</div>
+    </div>
+    <div class="text-sm">
+      🕹 Customizable and 😍 accessible design system which provides TailwindCSS component class name library to build
+      modern UI. 💥
+    </div>
+  </div>
+</CodeDemo>
+
+## Post
+
+<CodeDemo>
+  <div class="overflow-hidden rounded-lg has-shadow w-80">
+    <img
+      src="https://images.unsplash.com/photo-1542744173-8e7e53415bb0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80"
+      class="aspect-video rounded-b-none"
+      alt=""
+    />
+    <div class="p-4 flex flex-col gap-2">
+      <div class="text-xs">Ricco Xie • 1 June 2023</div>
+      <h3 class="text-xl font-semibold">Sira team talk</h3>
+      <div class="text-sm">
+        🕹 Customizable and 😍 accessible design system which provides TailwindCSS component class name library to build
+        modern UI. 💥
+      </div>
+      <div class="flex gap-2">
+        <span class="badge light info">Design</span>
+        <span class="badge light primary">Product</span>
+        <span class="badge light danger">Developer</span>
+      </div>
+    </div>
+  </div>
+</CodeDemo>
+
+## Image Background
+
+<CodeDemo>
+  <div class="overflow-hidden rounded-2xl has-shadow w-[30rem] relative">
+    <div>
+      <img
+        src="https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1244&q=80"
+        class="aspect-video"
+        alt=""
+      />
+    </div>
+    {/* shadow from bottom */}
+    <div class="absolute inset-0 z-10 bg-gradient-to-t from-black"></div>
+    <div class="absolute inset-x-0 bottom-0 z-20 p-4 text-white">
+      <div class="text-xs">Ricco Xie • 1 June 2023</div>
+      <h3 class="text-xl font-semibold">Sira team talk</h3>
+      <div class="text-sm opacity-80">
+        🕹 Customizable and 😍 accessible design system which provides TailwindCSS component class name library to build
+        modern UI. 💥
+      </div>
+    </div>
+  </div>
+</CodeDemo>
+
+## List items
+
+<CodeDemo>
+  <div class="flex flex-col items-stretch gap-2">
+    <div class="overflow-hidden rounded-2xl has-shadow w-[26rem] grid grid-cols-4">
+      <div class="col-span-3 p-4 flex flex-col gap-2 justify-between">
+        <h3 class="text-xl font-semibold line-clamp-2">
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat
+          aspernatur inventore eius deleniti reprehenderit?
+        </h3>
+        <div class="text-xs">Ricco Xie • 1 June 2023</div>
+      </div>
+      <div class="col-span-1">
+        <img
+          src="https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1244&q=80"
+          class="h-full aspect-square rounded-l-none"
+          alt=""
+        />
+      </div>
+    </div>
+    <div class="overflow-hidden rounded-2xl has-shadow w-[26rem] grid grid-cols-4">
+      <div class="col-span-3 p-4 flex flex-col gap-2 justify-between">
+        <h3 class="text-xl font-semibold line-clamp-2">
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat
+          aspernatur inventore eius deleniti reprehenderit?
+        </h3>
+        <div class="text-xs">Ricco Xie • 1 June 2023</div>
+      </div>
+      <div class="col-span-1">
+        <img
+          src="https://images.unsplash.com/photo-1480714378408-67cf0d13bc1b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80"
+          class="h-full aspect-square rounded-l-none"
+          alt=""
+        />
+      </div>
+    </div>
+    <div class="overflow-hidden rounded-2xl has-shadow w-[26rem] grid grid-cols-4">
+      <div class="col-span-3 p-4 flex flex-col gap-2 justify-between">
+        <h3 class="text-xl font-semibold line-clamp-2">
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus iusto laborum autem placeat
+          aspernatur inventore eius deleniti reprehenderit?
+        </h3>
+        <div class="text-xs">Ricco Xie • 1 June 2023</div>
+      </div>
+      <div class="col-span-1">
+        <img
+          src="https://images.unsplash.com/photo-1519501025264-65ba15a82390?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=764&q=80"
+          class="h-full aspect-square rounded-l-none"
+          alt=""
+        />
+      </div>
+    </div>
+  </div>
+</CodeDemo>
diff --git a/apps/website/pages/docs/snippets/card.zh.mdx b/apps/website/pages/docs/snippets/card.zh.mdx
@@ -0,0 +1,116 @@
+# 卡片
+
+import { CodeDemo } from '../../../components/demo/code';
+
+## 文字段落
+
+<CodeDemo>
+  <div class="overflow-hidden rounded-lg has-shadow w-80 p-4 flex flex-col gap-2">
+    <div class="flex justify-between items-baseline">
+      <h3 class="text-xl font-semibold">Sira 团队会议</h3>
+      <div class="text-xs">Ricco Xie • 2023.06.01</div>
+    </div>
+    <div class="text-sm">
+      鉴于对人类家庭所有成员的固有尊严及其平等的和不移的权利的承认,乃是世界自由、正义与和平的基础
+    </div>
+  </div>
+</CodeDemo>
+
+## 帖子
+
+<CodeDemo>
+  <div class="overflow-hidden rounded-lg has-shadow w-80">
+    <img
+      src="https://images.unsplash.com/photo-1542744173-8e7e53415bb0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80"
+      class="aspect-video rounded-b-none"
+      alt=""
+    />
+    <div class="p-4 flex flex-col gap-2">
+      <div class="text-xs">Ricco Xie • 2023.06.01</div>
+      <h3 class="text-xl font-semibold">Sira 团队会议</h3>
+      <div class="text-sm">
+        鉴于对人类家庭所有成员的固有尊严及其平等的和不移的权利的承认,乃是世界自由、正义与和平的基础
+      </div>
+      <div class="flex gap-2">
+        <span class="badge light info">设计</span>
+        <span class="badge light primary">产品</span>
+        <span class="badge light danger">开发者</span>
+      </div>
+    </div>
+  </div>
+</CodeDemo>
+
+## 图片背景
+
+<CodeDemo>
+  <div class="overflow-hidden rounded-2xl has-shadow w-[30rem] relative">
+    <div>
+      <img
+        src="https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1244&q=80"
+        class="aspect-video"
+        alt=""
+      />
+    </div>
+    {/* shadow from bottom */}
+    <div class="absolute inset-0 z-10 bg-gradient-to-t from-black"></div>
+    <div class="absolute inset-x-0 bottom-0 z-20 p-4 text-white">
+      <div class="text-xs">Ricco Xie • 2023.06.01</div>
+      <h3 class="text-xl font-semibold">Sira 团队会议</h3>
+      <div class="text-sm opacity-80">
+        鉴于对人类家庭所有成员的固有尊严及其平等的和不移的权利的承认,乃是世界自由、正义与和平的基础
+      </div>
+    </div>
+  </div>
+</CodeDemo>
+
+## 列表项
+
+<CodeDemo>
+  <div class="flex flex-col items-stretch gap-2">
+    <div class="overflow-hidden rounded-2xl has-shadow w-[26rem] grid grid-cols-4">
+      <div class="col-span-3 p-4 flex flex-col gap-2 justify-between">
+        <h3 class="text-xl font-semibold line-clamp-2">
+          鉴于对人类家庭所有成员的固有尊严及其平等的和不移的权利的承认,乃是世界自由、正义与和平的基础
+        </h3>
+        <div class="text-xs">Ricco Xie • 2023.06.01</div>
+      </div>
+      <div class="col-span-1">
+        <img
+          src="https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1244&q=80"
+          class="h-full aspect-square rounded-l-none"
+          alt=""
+        />
+      </div>
+    </div>
+    <div class="overflow-hidden rounded-2xl has-shadow w-[26rem] grid grid-cols-4">
+      <div class="col-span-3 p-4 flex flex-col gap-2 justify-between">
+        <h3 class="text-xl font-semibold line-clamp-2">
+          鉴于对人类家庭所有成员的固有尊严及其平等的和不移的权利的承认,乃是世界自由、正义与和平的基础
+        </h3>
+        <div class="text-xs">Ricco Xie • 2023.06.01</div>
+      </div>
+      <div class="col-span-1">
+        <img
+          src="https://images.unsplash.com/photo-1480714378408-67cf0d13bc1b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80"
+          class="h-full aspect-square rounded-l-none"
+          alt=""
+        />
+      </div>
+    </div>
+    <div class="overflow-hidden rounded-2xl has-shadow w-[26rem] grid grid-cols-4">
+      <div class="col-span-3 p-4 flex flex-col gap-2 justify-between">
+        <h3 class="text-xl font-semibold line-clamp-2">
+          鉴于对人类家庭所有成员的固有尊严及其平等的和不移的权利的承认,乃是世界自由、正义与和平的基础
+        </h3>
+        <div class="text-xs">Ricco Xie • 2023.06.01</div>
+      </div>
+      <div class="col-span-1">
+        <img
+          src="https://images.unsplash.com/photo-1519501025264-65ba15a82390?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=764&q=80"
+          class="h-full aspect-square rounded-l-none"
+          alt=""
+        />
+      </div>
+    </div>
+  </div>
+</CodeDemo>
diff --git a/apps/website/pages/docs/snippets/overview.en.mdx b/apps/website/pages/docs/snippets/overview.en.mdx
@@ -3,3 +3,4 @@
 Snippets is a set of reuse code snippets that can be paste to your projects to reduce works.
 
 - [Gradient text](gradient-text)
+- [Card](card)
diff --git a/apps/website/pages/docs/snippets/overview.zh.mdx b/apps/website/pages/docs/snippets/overview.zh.mdx
@@ -3,3 +3,4 @@
 代码片段是一组重用代码段，可以粘贴到项目中以减少工作量。
 
 - [渐变色文本](gradient-text)
+- [卡片](card)
Original file line number	Diff line number	Diff line change
Expand Up		@@ -3,3 +3,4 @@
		Snippets is a set of reuse code snippets that can be paste to your projects to reduce works.

		- [Gradient text](gradient-text)
		- [Card](card)
Original file line number	Diff line number	Diff line change
Expand Up		@@ -3,3 +3,4 @@
		代码片段是一组重用代码段，可以粘贴到项目中以减少工作量。

		- [渐变色文本](gradient-text)
		- [卡片](card)