DST-450: use ghost button for demo links

marigold-ui · May 27, 2024 · e3ffc28 · e3ffc28
1 parent d077bd4
commit e3ffc28
Show file tree

Hide file tree

Showing 3 changed files with 144 additions and 6 deletions.
diff --git a/package.json b/package.json
@@ -17,6 +17,7 @@
  "dependencies": {
  "@code-hike/mdx": "^0.9.0",
  "@marigold/components": "^7.7.1",
+ "@marigold/icons": "^1.2.49",
  "@marigold/theme-core": "^26.1.7",
  "@mdx-js/rollup": "^3.0.1",
  "@tanstack/react-query": "^5.35.1",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/DemoLink.tsx b/src/components/DemoLink.tsx
@@ -1,13 +1,24 @@
-import {Link} from '@tanstack/react-router';
+import { Link } from '@tanstack/react-router';
+import { ExternalLink } from '@marigold/icons';
+import { Button } from '@marigold/components';
 
-const DemoLink = ({ destination, text = 'View demo'}: {destination: string, text?: string}) => {
+const DemoLink = ({
+ destination,
+ text = 'View demo',
+}: {
+ destination: string;
+ text?: string;
+}) => {
  return (
- <div className="pb-2">
+ <div className="w-fit">
  <Link target="_blank" to={destination} search="">
- {text}
+ <Button className="flex-1 cursor-pointer rounded-md bg-white p-4 font-black text-gray-800 hover:bg-gray-300">
+ {text}
+ <ExternalLink size={20} />
+ </Button>
  </Link>
  </div>
  );
-}
+};
 
-export default DemoLink;
+export default DemoLink;