MigrateToPostgres.tsx46 lines · main

1	import { motion } from 'framer-motion'
2	import { BaggageClaim, BookOpen } from 'lucide-react'
3	import { Button } from 'ui'
4
5	// not in use yet
6	export const MigrateToPostgres = () => (
7	<motion.div
8	className="w-full rounded-lg overflow-hidden relative border border-muted"
9	variants={{
10	hidden: { opacity: 0, scale: 0.96, y: 15 },
11	show: {
12	opacity: 1,
13	scale: 1,
14	y: 0,
15	transition: {
16	type: 'spring',
17	stiffness: 600,
18	damping: 50,
19	staggerChildren: 0.08,
20	delayChildren: 0.03,
21	},
22	},
23	}}
24	>
25	<div className="absolute inset-0 bg-linear-to-r from-background-surface-200 via-background-surface-200 to-transparent"></div>
26	<div className="relative z-10 px-5 py-4 h-full flex gap-5 items-center justify-between">
27	<div className="flex flex-col gap-3">
28	<div className="flex gap-4">
29	<div className="inline-flex items-center justify-center w-7 h-7 rounded-lg bg-surface-300 border">
30	<BaggageClaim size={14} className="text-foreground-light" strokeWidth={1.5} />
31	</div>
32	<div className="flex flex-col gap-1">
33	<h2 className="text-base text-foreground">Migrate your Database to Postgres</h2>
34	<p className="text-xs text-foreground-light max-w-md">
35	Already have a database? Migrate any database to Briven to access backups, RESTful
36	auto APIs, Authentication and more.
37	</p>
38	</div>
39	</div>
40	</div>
41	<Button type="default" className="rounded-full" iconRight={<BookOpen />}>
42	Migrate to Postgres
43	</Button>
44	</div>
45	</motion.div>
46	)