fixed conflicts

src/app/dashboard/nft-details/page.tsx

+import { CONFIG } from 'src/config-global';
+
+import  NftDetailsView  from 'src/shared/sections/nft-details/view/nft-details-view'
+
+// ----------------------------------------------------------------------
+
+export const metadata = { title: `Dashboard - ${CONFIG.site.name}` };
+
+export default function Page() {
+  return <NftDetailsView />;
+}

src/routes/paths.ts

@@ -50,6 +50,7 @@ export const paths = {
     blank: `${ROOTS.DASHBOARD}/blank`,
     nftsmartcontract: `${ROOTS.DASHBOARD}/nftsmartcontract`,
     tokensmartcontract: `${ROOTS.DASHBOARD}/tokensmartcontract`,
+    nftdetails: `${ROOTS.DASHBOARD}/nft-details`,
     nftcards: `${ROOTS.DASHBOARD}/nft-cards`,
   },
 };

src/shared/layouts/config-nav-dashboard.tsx

@@ -50,11 +50,21 @@ export const navData = [
         path: paths.dashboard.tokensmartcontract,
         icon: ICONS.lock,
       },
+    ],
+  },
+  {
+    subheader: 'NFTs',
+    items: [
       {
         title: 'NFT Cards',
         path: paths.dashboard.nftcards,
         icon: ICONS.lock,
       },
+      {
+        title: 'NFT Details',
+        path: paths.dashboard.nftdetails,
+        icon: ICONS.lock,
+      }
     ],
-  },
+  }
 ];

src/shared/sections/nft-cards/nft-card.tsx

@@ -28,7 +28,7 @@ const NftCard: React.FC<NftCardProps> = ({ nft }) => {
   const otherAttributes = nft.attributes.filter(attr => attr.trait_type !== 'Date' && attr.trait_type !== 'Expiry Date');
 
   return (
-    <Card sx={{ maxWidth: 570, borderRadius: '16px', boxShadow: 3, m: 2 }}>
+    <Card sx={{ maxWidth: 570, borderRadius: '10px', boxShadow: 3, m: 2 }}>
       <CardMedia
         component="img"
         height="300"
@@ -77,7 +77,7 @@ const NftCard: React.FC<NftCardProps> = ({ nft }) => {
           </Box>
           <Button variant="contained" color="primary" sx={{ mt: 2 }}>
             <Iconify icon='carbon:view-filled' sx={{ mx: 1 }} />
-            View Details
+            Voir Details
           </Button>
         </Box>
       </CardContent>

src/shared/sections/nft-cards/view/nft-cards-view.tsx

@@ -11,6 +11,7 @@ import { CustomBreadcrumbs } from 'src/shared/components/custom-breadcrumbs';
 import NftCard from '../nft-card';
 
 
+
 interface Attribute {
   trait_type: string;
   value: string;
@@ -83,7 +84,7 @@ const NftGallery: React.FC = () => (
         heading="Account"
         links={[
           { name: 'Dashboard', href: paths.dashboard.root },
-          { name: 'nftcards', href: paths.dashboard.nftcards },
+          { name: 'Cartes NFTs', href: paths.dashboard.nftcards },
         ]}
         sx={{ mb: { xs: 3, md: 5 } }}
       />
@@ -94,6 +95,7 @@ const NftGallery: React.FC = () => (
             </Grid>
         ))}
         </Grid>
+       
     </DashboardContent>
   );
 

src/shared/sections/nft-details/nft-details.tsx

+// Adjust the import path as needed
+import type { Nft } from 'src/shared/types/nft';
+
+import React from 'react';
+
+import { Box, Card, Stack, Button, Divider, CardMedia, Typography } from '@mui/material'; // Adjust the import path as needed
+import { Label } from 'src/shared/components/label';
+
+interface NftDetailsProps {
+  nft: Nft;
+}
+
+const ipfsGateway = "https://ipfs.io/ipfs/";
+
+
+const NftDetails: React.FC<NftDetailsProps> = ({ nft }) => (
+  <Box sx={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', p: 3 }}>
+    <Box sx={{ flex: 1, mr: 3 }}>
+      <Card sx={{ borderRadius: '16px', boxShadow: 3 }}>
+        <CardMedia
+          component="img"
+          height="500"
+          image={`${ipfsGateway}${nft.image.split('ipfs://')[1]}`}
+          alt={nft.name}
+        />
+      </Card>
+    </Box>
+    <Box sx={{ flex: 1, ml: 3 }}>
+    <Label color="info" sx={{ mb: 3 }}>Valide</Label>
+
+      <Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
+        <Typography variant="h4" sx={{ flex: 1 }}>
+          {nft.name}
+        </Typography>
+
+      </Box>
+      <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
+        {nft.description}
+      </Typography>
+      <Box sx={{ display: 'flex', flexDirection: 'column', mb: 2 }}>
+        {nft.attributes.map((attribute, index) => (
+          <Box key={index} sx={{ mb: 1 }}>
+            <Typography variant="body2" color="text.primary" fontWeight="bold">
+              {attribute.trait_type}:
+            </Typography>
+            <Typography variant="body2" color="text.secondary">
+              {attribute.value}
+            </Typography>
+          </Box>
+        ))}
+      </Box>
+      <Divider sx={{ borderStyle: 'dashed' }} />
+      <Stack direction="row" spacing={2} sx={{ mt: 3 }}>
+        <Button
+          fullWidth
+        
+          size="large"
+          color="warning"
+          variant="contained"
+          
+          sx={{ whiteSpace: 'nowrap' }}
+        >
+          Voir profile
+        </Button>
+
+        <Button fullWidth size="large" type="submit" variant="contained" >
+          Voir la transaction mint
+        </Button>
+    </Stack>
+    </Box>
+  </Box>
+);
+
+export default NftDetails;

src/shared/sections/nft-details/view/nft-details-view.tsx

+import React from 'react';
+
+import { Box, Container } from '@mui/material';
+ 
+import { paths } from 'src/routes/paths';
+
+import { DashboardContent } from 'src/shared/layouts/dashboard';
+
+import { CustomBreadcrumbs } from 'src/shared/components/custom-breadcrumbs';
+
+import NftDetails from '../nft-details';
+
+const nftData = {
+    name: "Quiz Certificate NFT",
+    description: "Certificate for completing the quiz",
+    image: "ipfs://QmS32zryq8SrTkRnKCAGvsoA6NEeQxU9R5dnsweYnYtX9e",
+    attributes: [
+      {
+        trait_type: "Name",
+        value: "Souhail El Mahdani"
+      },
+      {
+        trait_type: "Quiz",
+        value: "Blockchain"
+      },
+      {
+        trait_type: "Score",
+        value: "99/100"
+      },
+      {
+        trait_type: "Date",
+        value: "09/07/2024"
+      },
+      {
+        trait_type: "Expiry Date",
+        value: "12/12/2025"
+      }
+    ]
+  }
+
+const NftDetailsView: React.FC = () => (
+    <DashboardContent>
+      <CustomBreadcrumbs
+        heading="Account"
+        links={[
+          { name: 'Dashboard', href: paths.dashboard.root },
+          { name: 'Details Nft', href: paths.dashboard.nftdetails },
+        ]}
+        sx={{ mb: { xs: 3, md: 5 } }}
+      />
+        <Container maxWidth="lg">
+            <Box sx={{ mt: 4 }}>
+            <NftDetails nft={nftData} />
+            </Box>
+        </Container>
+  </DashboardContent>
+);
+
+export default NftDetailsView;

src/shared/types/nft.d.ts

+export interface Attribute {
+    trait_type: string;
+    value: string;
+}
+  
+export interface Nft {
+name: string;
+description: string;
+image: string;
+attributes: Attribute[];
+}
\ No newline at end of file