DiskManagementRestartRequiredSection.tsx41 lines · main

1	import { AnimatePresence, motion } from 'framer-motion'
2	import { RotateCcw } from 'lucide-react'
3	import { DialogSection, WarningIcon } from 'ui'
4
5	interface DiskMangementRestartRequiredSectionProps {
6	visible: boolean
7	title: string
8	description: string
9	}
10
11	export const DiskMangementRestartRequiredSection = ({
12	visible,
13	title,
14	description,
15	}: DiskMangementRestartRequiredSectionProps) => {
16	return (
17	<AnimatePresence>
18	{visible && (
19	<motion.div
20	initial={{ opacity: 1, height: 'auto' }}
21	exit={{ opacity: 0, height: 0 }}
22	transition={{ duration: 0.15 }}
23	className="w-full"
24	>
25	<DialogSection className="bg-surface-100 text-sm text-foreground-light flex items-center gap-4 relative w-full rounded-md border-spacing-0 border">
26	<div className="w-12 h-12">
27	<div className="relative w-10 h-10 m-1 bg-alternative text-foreground border rounded-full flex items-center justify-center">
28	<RotateCcw strokeWidth={1} />
29	<WarningIcon className="absolute -right-1.5 -top-1.5" />
30	</div>
31	</div>
32	<div className="flex flex-col gap-0 grow">
33	<p className="text-sm text-foreground">{title}</p>
34	<p className="text-sm text-foreground-light">{description}</p>
35	</div>
36	</DialogSection>
37	</motion.div>
38	)}
39	</AnimatePresence>
40	)
41	}